Cypress With Page Object Model (POM) Framework
Page object model (POM) is a design pattern where classes are represented as pages. POM reduces code duplication and makes code more reusable.
Installation of Cypress with POM
- Install node.js on the machine.
- Create an empty folder.
- Open the directory and hit the command npm init -y and this will create a package.json file in the project directory.
- To install cypress hit command npm and install cypress –save-dev and this will add node_modules & package.json files.
- Update package.json file below
- Hit command npm run cypress:open, this will open a window like this
- Select E2E testing and it will open a window like this select browser of your choice
- After selecting the browser, it will open Chrome browser like this
Now cypress is installed and ready to use.
Creating POM Framework
- Create a config.json file and add data like this
- Create a folder as ‘pages’ and add the file ‘LoginPage.js’ and code like this
- Create a new file as ‘login.spec.cy.js’ under the e2e folder and code like this
To run the test hit the command, npx cypress run –browser chrome –headed
The folder structure will look like this
Integration with Mochawesome Report
Cypress bundled with mocha.
To install mochawesome report, run the command below
npm install mochawesome –save-dev
Add the following to cypressconfig.js :
This will create a folder ‘result’ after execution and generate an HTML report that will show inside the ‘result’ folder like the screenshot below
Integration with CircleCI
- Push code to git repo
- Login into circleci
- Create folder ‘circleci’ under the project directory and create file config.yml
Add the below code to the config.yml file
An error that you might face
Orb cypress-io/cypress@3 not loaded. To use Orb, the organization admin must opt-in to using third-party orbs in Organization Security settings.
To resolve this error, go to orbs settings on circle ci
Settings -> Security -> Allow uncertified orbs
The pipeline will kick off and the run will look like this
Good to Read:-