Cypress with Page Object Model
This tutorial will walk you through the configuration setup of Cypress with the Page object model. Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium. Cypress enables you to write all types of tests:
- end-to-end tests
- Integration tests
- API test
- Unit tests
Cypress can test anything that runs in a browser. Cypress can be used for the following reasons
- Open Source availability
- Developer Friendly
- Parallel Test Execution
- Support for Multiple Browsers
- Support for the both Front-end and Back-end
- Support for CI/CD Integration Tools
From the front end web application, the calls to the API go through layers of code. It would be nice to track what back end code has been exercised during Cypress end-to-end tests. Cypress end-to-end tests are so effective at covering the web application code and also covering the back end server code.
Environments
The framework is configured in such a way to execute the test cases on any of the available environments by changing the environment variables passing as the command line arguments. This ensures that the test suites can be executed in multiple environments to check the stability of the environments built. From the command line, set environment variables to contain your credentials. For example:
CYPRESS_API_BASE_URL=https://pokeapi.co/api/v2
CYPRESS_WEB_BASE_URL=https://www.cypress.ioNote: The environment variables should always have the same variable names to generate the environment or else it results in the error. More information related to the environment variable can be found in this link.
Page Object Model
Page Objects are the key elements of Automation. During Continuous development, it has a high chance of the probability that elements on the page will be constantly changing due to the development. So this increases the high chance of failing test cases, and it is always annoying to change the objects directly in the spec files. To avoid this, page objects are written in the XML format and later exported to JSON format automatically by writing a small logic. For this, we have .xml, .json files written to obtain the objects to the spec files.
PO Conversion
A small logic is written inside the javascript file to automatically generate the page objects from XML to JSON. The Page objects are overwritten whenever new objects are written and compiled. The root-level page objects should always be unique. This file must be compiled using the node to generate the newly written page objects every single time.
Xml Po’s
JSON PO’s
The above-written logic converts all the XML objects to key-value pairs. The use of writing the PO’s in the XML format is for better clarity, easy understanding and ability to change.
Test Suite
The Framework consists of different test suites so that each spec has a purpose on its own. For eg, the end-to-end test suites are written inside the e2e folder. To achieve this, the default integration folder of the Cypress is overridden in cypress.json.
{“chromeWebSecurity”: false,“video”: false,“viewportWidth”: 1024,“viewportHeight”: 768,“reporter”: “mochawesome”,“reporterOptions”: {“reportDir”: “cypress/report/mochawesome-report”,“overwrite”: true,“html”: true,“json”: true,“timestamp”: “mmddyyyy_HHMMss”},“screenshotsFolder”: “cypress/report/mochawesome-report/assets”,“integrationFolder”: “./”}
Acquiring Page Objects in the Spec Files
The json converted page objects can be acquired into the spec files by the following.
const pageObj = require(‘../../../page_objects/cypress.po.json’);cy.get(pageObj.cypress_page.features_label);
Cypress Runner
A runner file has been written to execute the spec files based on the different environments and browsers. This file automatically generates the report for the test execution after the completion. The runner is configured in such a way to execute the spec files based on different suites like e2e, Integration, API and Smoke. It can be configured in the CI/CD tools to execute the tests on cloud servers.
An example command for executing the runner file.
node cypress_runner.js --env=dev -b chrome -s cypress/test_suite/e2e/**/*.featurewhere
— env denotes the environment to be executed (dev, stage, production)
-b denotes the browser to be executed (chrome, electron, firefox)
-s denotes the spec files to be executed
Report Generation
Once the test execution is completed through the runner, the report is automatically generated. The default Mocha HTML reporter is configured in the runner file to generate the report. The report generation is as follows:
The full configuration setup is available in this repo. Please clone the repo to get the exact idea of the concept.
Conclusion
This Configuration setup will be highly efficient during continuous development. The test cases can be executed several times on the different environments to make the application bug free and to attain the Quality. I hope this configuration tutorial will be really helpful for the Automation developers who are using Cypress. Thanks for reading the article, please do share about this. Happy Automating..!!
Credits
Fork me on Github: https://github.com/syedth
Linkedin : https://www.linkedin.com/in/syed-thoufiq-4aba57107/
