Page Object Model in Cypress

Page Object Model in Cypress

Lets Create a Login Page Class

class LoginPage

{

    visit(){

        cy.visit('https://admin-demo.nopcommerce.com/login?ReturnUrl=%2Fadmin%2F')

    }

    //Functions

    enterEmail(value){

        const email=cy.get('#Email')

        email.clear()

        email.type(value)

        return this

    }

    

    enterPassword(value){

        const password=cy.get('#Password')

        password.clear()

        password.type(value)

        return this

    }

    clickSubmit(){

        const button= cy.get('[type=submit]')

        button.click()

        return this

    }

    

}

export default LoginPage // This line is for exporting LoginPage class so that other classes can access this class

Sample Test Case using Page Object

import LoginPage from '../pageObjects/LoginPage'

describe('Page Objects Test Cases',function(){

    it('Validate Login Page',function(){

        const lp=new LoginPage()

        lp.visit()

        lp.enterEmail('admin@yourstore.com')

        lp.enterPassword('admin')

        lp.clickSubmit()

        cy.title().should('be.equal','Dashboard / nopCommerce administration')

    })

})