Page Object

Looking at the step definitions our previous exercises, we see that we are duplicating our selector in the Then steps. If we think about scaling our tests after awhile we'll probably be duplicating not only this Selector but many other Selectors. Creating a page object for the selectors will help alleviate the repetition of continually creating the same Selectors. Also, if the Selectors change then there is only one place to make the fix.

Creating a Page Object

Let's start by creating a page object file.

1. Under Features -> Support -> Pages create a new form_confirmation_page.js

2. Let's import the Selector constructor

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

3. Create a module with the name confirmationTable and export the module.

exports.confirmationTable = {
    
}

4. Create the Selector functions in the module

exports.confirmationTable = {
    submissionRow: function() {
        return Selector('.contact-form-submission').with({ boundTestRun: testController }).child('p')
    }
}

Calling the page object in the step definition

Now that we've created the page object we now need to use the selector in the step definition file.

1. Import the newly created page object file

const formConfirmationPage = require('../support/pages/form_confirmation_page.js')

2. Replace the selector in the step with the selector in the page object page

Then('I see {string} in the name field on the submission form', async function (name) {
    await testController.expect(formConfirmationPage.confirmationTable.submissionRow().innerText).contains(name)
});

Then('I see {string} in the email field on the submission form', async function (email) {
    await testController.expect(formConfirmationPage.confirmationTable.submissionRow().nth(1).innerText).contains(email)
});

Then('I see {string} in the expereince field on the submission form', async function (experience) {
    await testController.expect(formConfirmationPage.confirmationTable.submissionRow().nth(3).innerText).contains(experience)
});

Then('I see {string} in the message field on the submission form', async function (message) {
    await testController.expect(formConfirmationPage.confirmationTable.submissionRow().nth(6).innerText).contains(message)
});

Now if the selector changes you only need to change the one selector in the confirmation page.

Try converting all of the rest of the selectors to the page object model.

Page Object is also for regularly used functions

Page object is not only used for Selectors but it also can be used for functions that are regularly used. Say I have a lot of step definitions that are differing variations of filling out the form. Let's say in these instances we really don't care what's going into the form, just that the form is filled out. We could create a quick page object to accomplish this task.

Additional Reading

https://martinfowler.com/bliki/PageObject.html https://github.com/SeleniumHQ/selenium/wiki/PageObjects