Skip to content

Assertions

Jump to bottom
rquellh edited this page May 10, 2018 · 22 revisions

Assertions are a way to assess if the web page is in an expected state. We are only going to cover a few assertion commands in this exercise, but there are plenty that TestCafe can perform.

Smart Assertions

TestCafe handles assertions differently than many other assertion libraries. Some libraries immediately fail the assertion if the assertion is initially false. TestCafe retries the assertion until the assertion completes successfully or the step times out. This cuts down on the amount of failures that occur due to timing errors.

smart assertions

Truthy and Falsy

Another important concept to understand is truthy and falsy. Truthy values are values that have a true outcome when there is a Boolean evaluation, and the inverse is true for falsy values.

There are some values that are inherently falsy:

  • false
  • 0 (zero)
  • '' or "" (empty string)
  • null
  • undefined
  • NaN (e.g. the result of 1/0)

All other values are inherently truthy including:

  • '0' (a string containing a single zero)
  • 'false' (a string containing the text “false”)
  • [] (an empty array)
  • {} (an empty object)
  • function(){} (an “empty” function)

It's important to have an understanding of what's truthy and falsy. A good resource is for this is https://www.sitepoint.com/javascript-truthy-falsy/.

Creating Assertions

sample page

On the confirmation page that loads after the form is filled out and the submit button is clicked, you might notice that the information you filled out on the previous page shows up on this screen. The following steps will check whether that information shows up on this screen.

  1. Let's check to make sure the name is showing up in the submission form. We'll need to create a selector for the contact form. If you "inspect" the code you'll see the form is contained in class="contact-form-submission. Add the following selector to the list of selectors in your code.
const contactFormSubmit = Selector('.contact-form-submission')
  1. Now we can use that selector to check whether the text inside of the selector contains the value that's expected. Add .innerText to the selector in order to figure out the text inside of the selector. Use .expect to let TestCafe know that an assertion is being made. Use .contains to make the comparison.
.expect(contactFormSubmit.innerText).contains('John Doe')

Being more clear

Our last example works, but depending on the requirement might not be what we really want. Change the text in the comment box to be 'This is a comment from John Doe'

.typeText(nameField, 'Jane Doe')

Now, change your text in the name field to 'Jane Doe'.

.typeText(commentBox, 'This is a comment John Doe')

Run the test and see the result. Did the test pass? You might not have been expecting that, but it's because you are looking at the entire form for the na

Clone this wiki locally