has become increasingly significant due to the growing market sizing of web applications and website at aCAGR of 34 %which is await to gainUSD 7.6 Billion by 2026. It is essential for client engagement and memory that the web applications are built to deliver a unseamed exploiter experience. Test Automation helps in achieving this with better accuracy and in a shorter period of time, keeping release cycles shorter.

To leverage the benefits of, selecting the correct Test Automation model like Cypress is essential.

is one of the democratic web test mechanization frameworks that is gaining grip among the developer and QAs due to its easy facility and apparatus. This clause discusses how to use Page Object Model in Cypress for better testing experience.

What is Cypress Page Object Model?

Page Object Model (POM) is a trending technique used in test mechanization in the Quality Engineering world. Simply put, the Page Object Model refers to using the Objects/Classes to depict and represent all the locater and functions (Components used for the mechanization) related to that particular page in a web application.

These help in bump the required HTML element on the page, so that these can be expend in the test scripts for test automation. Locators help in identifying the constituent that has to be used for automating a sure function using.

With the Page Object Model, you can but break down a unscathed web application into multiple pages and use classes to depict those page. In this way, each page in the web application corresponds to a peculiar class in the Page Object.

Also sometimes a single page in the application can be habituate across multiple form in the Page Object, according to the functionalities of the page.

Benefits of using a Page Object Model

Here are the two main benefits of use a Page Object Model:

• Code Reusability

The main welfare of utilize the Page Object Model will be code reusability. Since we are utilise different classes to individually represent the pages, instead of utilize duplicate locators and methods, we can use the locators and methods of the relevant class for the page inside various variety of test scenarios by exactly creating an Object of the page grade in the tryout family or by importing the class to the test class.

• Code Maintainability

By make a Page Object Model we are create a separate layer for the pages so that we can separate the page-wise methods and locators from the examination scenarios which are in the test layer. So we can sustain the examination flow code in the test level and all the locater and methods-related code can be maintained through the bed of the Page Object Model.

In a standard Cypress project, the page classes are stored in a separate brochure. Those pages will be imported accordingly into the trial classes according to the relevancy.

Cypress Page Object Model Example

In this illustration, usingbstackdemo.comas demo site to certify how Page Object Model works in Cypress.

To begin with, let ’ s see the undertaking structure for the Page Object Model in Cypress. As seen in the example below, a folder nominate “pages” is created under the “Cypress” folder, which is used to store bothhomePage.js and loginPage.js.

• homePage.js

The homePage.jsconsists of all the method that are related to the Homepage of the site. You also can store the locater in a variable, so that you can recycle locators as well. (For the purpose of presentation, simply using the locators as above in the example)

form homePage {

factor = {

loginBtn: () = & gt; cy.get (& # 8220; # signin & # 8221;),

logOffBtn: () = & gt; cy.get (& # 8220; # logout & # 8221;)

    }

clickOnSignin () {

this.elements.loginBtn () .click ()

    }

}

module.exports = new homePage ();

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

In the above codification, the locators are used to identify elements, which are being store utilise the Cypress methodcy.get (locater).Then, creating the method apply the identify web elements to click on the Login push.

• loginPage.js

The loginPage.js class is utilize to store a web element used inside the login page. The Cypress commandscy.get (locator)and cy.xpath ()are utilise to get the locator for different web elements on the login page. Then the methodlogin()uses these locator to create a flow for login.

stratum loginPage {

elements = {

usernameDropDown: () = & gt; cy.get (& # 8220; # username & # 8221;),

selectUser: () = & gt; cy.xpath (& # 8220; //div [text () = & # 8217; demouser & # 8217;] & # 8221;),

passwordDropDown: () = & gt; cy.get (& # 8220; # password & # 8221;),

passwordOption: () = & gt; cy.xpath (& # 8220; //div [text () = & # 8217; testingisfun99 & # 8242;] & # 8221;),

loginBtn: () = & gt; cy.get (& # 8220; # login-btn & # 8221;)

    }

    login(){

this.elements.usernameDropDown () .click ();

this.elements.selectUser () .click ();

this.elements.passwordDropDown () .click ();

this.elements.passwordOption () .click ();

this.elements.loginBtn () .click ();

    }

}

module.exports = new loginPage ();

require (& # 8216; cypress-xpath & # 8217;)

For this class, useCypress Xpathlibrary as easily.

Structure of E2E User Flows utilize Cypress Page Object Model

Now let ’ s see how the examination flows are be coded and how the pages are being habituate in the test flow.

Using the “e2e” folder to layer out the resources related to testing. Creating another folder identify “tests” inside thee2e folder, which is employ to store actual test causa written in Cypress. If there are other resources that are expend in the tests such as.jsonfiles, then you can store them inside a separate folder undere2e.

• verifyLogin.cy.js

import homePage from & # 8220; .. / .. /pages/homePage & # 8221;

importation loginPage from & # 8220; .. / .. /pages/loginPage & # 8221;

it (& # 8216; Should login to inventory page & # 8217;, () = & gt; {

cy.visit (& # 8216; https: //bstackdemo.com/ & # 8217;)

homePage.clickOnSignin ();

loginPage.login ();

homePage.elements.logOffBtn () .should (& # 8216; have.text & # 8217;, & # 8217; Logout & # 8217;)

})

In here, withline 1, I have imported thehomePageclass as thehomePageobjective, and withline 2 I have imported theloginPagestratum as theloginPage object. 

Then from line 4 & # 8211; line 10the test flow is written utilise the Cypress methods to verify that we can log in successfully. Here, inline 9 you can see that we are using the web element that we stored inside thehomePage.jsto verify the Login push is now alter to Logout.

Talk to an Expert

Page Object Model vs Cypress App Actions

Even though you can use the Page Object Model in a Cypress project, you can also use App Actions, which is an easy way offered simply by Cypress.

, which is used foroptic end-to-endtests runs inside the browser, enabling QA to curb the functions that are being utilize in the browser easily through theCypress App Actions. 

Cypress App Actionsis using a Modal method which is mention to various states of the web app so that you can outperform the unnecessary steps, and get into the certain Page or states of the web app.

By using Cypress App Actions, you certainly can decrease the running clip of tests, because you can bow some test flowing by surpassing throughmodal states. However, with Page Object Model you have to execute them even though they might not be much relevant for your examination stream.

At multiplication, where all the steps are not significant to be implemented within a stream, Cypress App Actions can be favor over Cypress Page Object Model to reduce performance clip of tests.

On a closing tone

Page Object Model is the most commonly used method in test automation for Web try. So Cypress also allow the usance of the Page Object Model. Even though Cypress is offering the App Actions pick, it will be good practice for expend the Page Object Model as it will simplify the coding summons as well as the maintenance. But there will be a slight advantage in scarper time when we are using Cypress App Actions.

We can mitigate this by removing unneeded method and assertions inside the testing flows. Another thing we can do when using the Page Object Model is to use appropriate methods to mitigate the waits which will immensely decrease the running time if correctly enforce. So with the Page Object Model, we can optimize the automation process inside a Cypress project which will yield us comprehensive outreach for the freestanding Test and Page layers, so that we can mitigate and maintain the integrity of the test flows in the long run.