Page Objects in Cypress

Page objects are used to get the access of web page's elements from a common place. It is mainly used for Code re-usability and Maintainability.

To create Page objects in Cypress, create a folder 'PageObjects' under Integration folder and create '.js' file based on which page you are going to create your page objects.

Create and class and methods to add page objects for each field in the page and add an export statement.

To access them in your tests,

1. Import the class from the defined path

import ContactPageObjects from "../PageObjects/ContactPageObjects.js"

2. Create object for that class

const contact = new ContactPageObjects()

3. access them in code using the object created.

contact.name()
contact.email().type('data')

Complete Code:

ContactPageObjects.js

class ContactPageObjects{
 name(){
 return cy.get('#input_comp-kntvy6i7')
    }
 email(){
 return cy.get('#input_comp-kntvy6ir')
    }
 subject(){
 return cy.get('#input_comp-kntvy6j4')
    }
 message(){
 return cy.get('#textarea_comp-kntvy6jb')
    }
}

export default ContactPageObjects

ContactTest.js

import ContactPageObjects from "../PageObjects/ContactPageObjects.js"
describe('testing custom commands',()=>{
 const contact = new ContactPageObjects()
 it('custcommands test1',()=>{
 cy.visit('https://coderscamp.wixsite.com/codeit')
 cy.contains('Contact').click()
 contact.name().type('coderscamp')
 contact.email().type('coderscampindia@gmail.com')
 contact.subject().type('testing custom commands')
 contact.message().type('All the best',{sensitive:true})
 cy.get('[data-testid=buttonElement]').click()
    })
})

You have learned today how to add page objects in cypress!! Happy Testing!!