Assertions

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.

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

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')

2. 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(commentBox, 'This is a comment John Doe')

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

.typeText(nameField, 'Jane 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 name John Doe. Since you added John Doe to the comment the test passes. The following steps will make the assertion more clear.

1. We are going to target the name field. When looking at the code you'll see under the selector are 7 paragraphs shown by the HTML tag <p>. If you expand the first <p> you'll see the "Name" line.

2. In order to get just the first paragraph we need to include .child to the selector. .child will find all the elements that match the parameter. Amend the following line.

.expect(contactFormSubmit.child('p').innerText).contains('something')

3. Run the test again with the "Jane Doe" data. You should see that the test failed, because Jane Doe was not found in the name field. TestCafe made the assertion and it was false so it failed the test.

Even more clarity

So the last example works, but only because name is in the first position of the list. If that changed then the assertion would not look at the correct <p>. We should be more explicit in our assertion.

1. Let's try to find the email address in the example. It's actually quite simple with .nth which finds the specified index in a set. In our case we'll need to set the index to 1, because the index is zero-based which means the count begins with 0. Amend the following line.

.expect(contactFormSubmit.child('p').nth(1).innerText).contains('johndoe@gmail.com') 

3. Also, change the input of the name field back to 'John Doe'

.typeText(nameField, 'John Doe')

2. Now run the test. You should see the test pass.

3. To make sure we aren't getting a false positive we should change the email to something other than johndoe@gmail.com.

.expect(contactFormSubmit.child('p').nth(1).innerText).contains('janedoe@gmail.com') 

4. Now run the test. Did you get an error? You should have gotten an assertion error.

Finishing up

Two things that I want you to try on your own (don't worry the solution will be below).

1. Clean up the name assertion to include the .nth
2. Make an assertion on the text "Message Sent" shown below.
3. Get the test to a passed state.

Contents of simple-test.js

If you've been following along, the simple-test.js file should now look like this. Your comment selector might look different based on what method you used to make the selection.

const { Selector } = require('testcafe');

fixture`First Test`

test('First test - Visit Website', async function (t) {
    const nameField = Selector('#g2599-name');
    const emailField = Selector('[name="g2599-email"]');
    const submitButton = Selector('input.pushbutton-wide');
    const experienceSelect = Selector('#g2599-experienceinyears');
    const experienceOption = experienceSelect.find('option');
    const commentBox = Selector('#contact-form-comment-g2599-comment');
    const contactFormSubmit = Selector('.contact-form-submission')
    const sentConfirmation = Selector('#contact-form-2599').child('h3')

    await t
        .navigateTo('http://www.globalsqa.com/samplepagetest/')
        .typeText(nameField, 'John Doe')
        .typeText(emailField, 'johndoe@gmail.com')
        .typeText(commentBox, 'This is a comment John Doe')
        .click(experienceSelect)
        .click(experienceOption.withText('5-7'))
        .click(submitButton)
        .expect(contactFormSubmit.child('p').innerText).contains('John Doe')
        .expect(contactFormSubmit.child('p').nth(1).innerText).contains('johndoe@gmail.com')
        .expect(sentConfirmation.innerText).contains('Message Sent')
});