The idea of using page objects is to store all selectors or locators or functions for a certain page in a page object class. This helps to abstract information from the actual tests and also helps in easier maintenance of your tests.
Writing maintainable end to end tests is challenging and certainly page object pattern addresses this in a certain way.
Recently, I spent some time experimenting with cypress automation tool for web applications built using javascript framework and I fell in love with the tool instantly. Cypress is an incredible tool for front end developers and testers for end to end testing. Only limitation is that it supports only chrome browser for now. if you are looking for cross browser testing solution or developing tests in any language other than Javascript, Cypress may not work for you now. You may need to use other javascript e2e frameworks like Protractor or WebdriverIO.
The interesting part about Cypress is that the commands are extremely faster and run directly in the browser.The cypress setup is very simple with a extremely detailed documentation. You will be productive and run your first test in less than 10 minutes.
In this post, I would like to tell you more about setting up page object pattern for your cypress tests.
Once you setup your cypress project following the instructions given here , you can follow the below steps to enhance your project to use Page Object Design.
In your project directory, create a separate folder named 'pageobjects'. In this folder, you can store classes for each page in your application to store the selectors and functions for that page. See below an example for SigninPage.
class SignInPage {
getEmail() {
return cy.get('#email');
}
getPassword() {
return cy.get(`[data-test=SignInPassword]`);
}
submit() {
const button = cy.get(`[data- test=SignInSubmitButton]`);
button.click();
}
}
export default new SignInPage();
Now watch this video to see how you can import this class and use the page objects in your test file.
You can also clone and try the sample project from my repository