Actions

Actions commands are how to get TestCafe to interact with the website. We are only going to cover a few commands in this exercise, but there are plenty that TestCafe can perform.

Adding actions to the test function

Before we get to adding action to our test function, let's take some time to talk about the test design pattern. In our previous example we used the following code.

test('First test - Visit Website', async function(t){
    await t.navigateTo('http://www.globalsqa.com/samplepagetest/')
});

Let's dissect this code to better understand what's happening.

• As we mentioned before the opening test creates a TestCafe test function.
• The first parameter inside of test function is the test name. In this case it's "First test - Visit Website".
• The second parameter inside of the test function is a function that contains the test code. This function contains the test controller t used to access the API.
• async/await are used to create an asynchronous function where operation cannot happen synchronously (all at once)
• t.navigateTo('http://www.globalsqa.com/samplepagetest/') the test controller t is making an API call navigateTo in order to send the browser to to the desired page http://www.globalsqa.com/samplepagetest/

Entering Text

We have three fields that we need to enter text into. We use t.typeText(selector, text) to enter text into the different textboxes. Let's do this, complete the following steps.

1. Put everything after the await t on a new line. We are going to "chain" the actions and only write the testController once.

Quite simply, this

    await t.navigateTo('http://www.globalsqa.com/samplepagetest/')
    await t.typeText(nameField, 'John Doe')   

Written more simply is this

    await t
        .navigateTo('http://www.globalsqa.com/samplepagetest/')
        .typeText(nameField, 'John Doe')

2. Add the .typeText method for the name, email, and comment box. The first parameter for the .typetext method is the selector and the second parameter is what you want TestCafe to type.

The final solution should look like this

    await t
        .navigateTo('http://www.globalsqa.com/samplepagetest/')
        .typeText(nameField, 'John Doe')
        .typeText(emailField, 'johndoe@gmail.com')
        .typeText(commentBox, 'This is a comment')

3. Save and run the test using testcafe chrome simple-test.js in the command line.
4. The test should pass successfully.

Making a Selection from the Dropdown

Making a selection from a dropdown is a two step process of clicking the dropdown then making a selection. Let's work through an example.

1. Click the dropdown. This can be accomplished simply by t.click(selector). Add the following line to the end of the action chain.

.click(experienceSelect)

2. Make the selection. This can be accomplished by doing a finding the specified text on the option selector and clicking t.click(optionSelector.find('optionFromList')). Add the following line to the end of the action chain.

.click(experienceOption.withText('5-7'))

3. Save and run the test using testcafe chrome simple-test.js in the command line.
4. The test should pass successfully.

Finishing up

Our last step is to click the submit button to submit the form. I'm going to let you try and solve this step on your own. Run the test when you are done to check your progress. The test should load the submission success page before closing.

The next section shows the final solution if you are having trouble.

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

    await t
        .navigateTo('http://www.globalsqa.com/samplepagetest/')
        .typeText(nameField, 'John Doe')
        .typeText(emailField, 'johndoe@gmail.com')
        .typeText(commentBox, 'This is a comment')
        .click(experienceSelect)
        .click(experienceOption.withText('5-7'))
});