Adding TestCafe Functionality to Cucumber steps

Adding TestCafe Functionality

So now we've setup the Cucumber steps; Let's make the steps do something. If you recall from our previous exercises, we created the TestCafe code to automate our test. I added assertions to the experience and the comment field from the previous exercise. Here's the code...

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

fixture`First Test`

test('First test - Form Submission', 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(contactFormSubmit.child('p').nth(3).innerText).contains('5-7')
        .expect(contactFormSubmit.child('p').nth(6).innerText).contains('This is a comment John Doe')
        .expect(sentConfirmation.innerText).contains('Message Sent')
});

These TestCafe steps are what's going to drive the Cucumber step definitions. Let's setup the sample_form_steps.js file together.

1. Add the Selector module to the file by adding the following line to the top of the file.

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

2. We don't need to create a TestCafe fixture or test as it's already handled in the Cucumber hooks. We can simply just add the TestCafe steps that correspond with the Cucumber step definitions.

Important: instead of using t as the test controller, the new test controller will be testController.

3. Add the .navigateto step to the first step shown below.

Given('I navigate to the example form page', async function () {
    await testController.navigateTo('http://www.globalsqa.com/samplepagetest/')
});

4. Add the selector and the action to the second step.

It's important to add .with({ boundTestRun: testController }) to the end of the selector in order to let the client function access the testController. This is very necessary for assertions, so I've decide to use it for every Selector.

When('I fill out the name field with {string}', async function (string) {
    const nameField = Selector('#g2599-name').with({ boundTestRun: testController });

    await testController.typeText(nameField, 'John Doe');
});

5. Change the hard coded name to use the parameter being passed from the .feature file. I also changed the parameter to a name that is more descriptive about what the parameter is.

When('I fill out the name field with {string}', async function (name) {
    const nameField = Selector('#g2599-name').with({ boundTestRun: testController });

    await testController.typeText(nameField, name)
});

6. Now run Cucumber again in the command line. You should see the first two steps passing, and then a Pending response on the third step.

7. I'm going to let you try the remaining steps on your own. Remember to add the selector to the corresponding step and substitute the hard coded values to use the parameter.

The solution is provided below.

const { Given, When, Then } = require('cucumber');
const { Selector } = require('testcafe');

Given('I navigate to the example form page', async function () {
    await testController.navigateTo('http://www.globalsqa.com/samplepagetest/')
});

When('I fill out the name field with {string}', async function (name) {
    const nameField = Selector('#g2599-name').with({ boundTestRun: testController });

    await testController.typeText(nameField, name)
});

When('I fill out the email field with {string}', async function (email) {
    const emailField = Selector('[name="g2599-email"]').with({ boundTestRun: testController });

    await testController.typeText(emailField, email)
});

When('I fill out the comment box with {string}', async function (comment) {
    const commentBox = Selector('#contact-form-comment-g2599-comment').with({ boundTestRun: testController });

    await testController.typeText(commentBox, comment)
});

When('I select {string} from the expereince dropdown', async function (experience) {
    const experienceSelect = Selector('#g2599-experienceinyears').with({ boundTestRun: testController });
    const experienceOption = experienceSelect.find('option').with({ boundTestRun: testController });

    await testController
        .click(experienceSelect)
        .click(experienceOption.withText(experience))
});

When('I click the submit button', async function () {
    const submitButton = Selector('input.pushbutton-wide').with({ boundTestRun: testController });    

    await testController.click(submitButton)
});

Then('I see {string} in the name field on the submission form', async function (name) {
    const contactFormSubmit = Selector('.contact-form-submission').with({ boundTestRun: testController })

    await testController.expect(contactFormSubmit.child('p').innerText).contains(name)
});

Then('I see {string} in the email field on the submission form', async function (email) {
    const contactFormSubmit = Selector('.contact-form-submission').with({ boundTestRun: testController })
    
    await testController.expect(contactFormSubmit.child('p').nth(1).innerText).contains(email)
});

Then('I see {string} in the expereince field on the submission form', async function (experience) {
    const contactFormSubmit = Selector('.contact-form-submission').with({ boundTestRun: testController })

    await testController.expect(contactFormSubmit.child('p').nth(3).innerText).contains(experience)
});

Then('I see {string} in the message field on the submission form', async function (message) {
    const contactFormSubmit = Selector('.contact-form-submission').with({ boundTestRun: testController })

    await testController.expect(contactFormSubmit.child('p').nth(6).innerText).contains(message)
});

Then('I see the {string} message', async function (confirmation) {
    const sentConfirmation = Selector('#contact-form-2599').child('h3').with({ boundTestRun: testController })

    await testController.expect(sentConfirmation.innerText).contains(confirmation)
});