Cypress automation testing

Stackoverflow insights
npm install cypress

Folder structure

npx cypress open
Folder structure after “cypress open” command
  • Fixtures: contain all the data that tests will use, like user names, emails, addresses, credit cards, etc.
  • Integration: contain the test scripts that run when the command cypress run executes.
  • Plugins: it makes it possible to config your project based on different parameters. The plugin function executes when the project opens, and you can customize it to react depending on Cypress config. There is also a list of plugins available that you can install in your project here: https://docs.cypress.io/plugins/index.html.
  • Support: make it possible to configure your project using different customized methods and replace the existent ones.

The Code

First example
Second example
Third example
npx cypress run
npx cypress open
Cypress UI
Results after executing cypress run command in terminal
Every test saved as video
npx cypress run — record — key <YOUR KEY>
Example of the result in the Dashboard

Config file

Cypress config file example
  • viewportHeight and viewportWidth: specifies the viewport of the browser. The parameter can configure the browser size to any resolution that your test requires.
  • video: allows Cypress to record a video for each test.
  • videosFolder: This is the folder where Cypress will save the videos after the test.
  • screenshotOnRunFailure: When it is true, it allows Cypress to take a screenshot when your test fails.
  • screenshotsFolder: This is the folder that will contain all the screenshots taken.
  • retries: The number of times each test will repeat when it fails.
  • execTimeout: The maximum amount of time each test has to execute. Otherwise, it fails on a timeout.
  • pageLoadTimeout: The time limit for waiting for a page to load.
  • requestTimeout: The maximum amount of time for waiting for a request to go out. For example, cy.wait.
  • responseTimeout: The limit of time for waiting for a response after a request made. For example, cy.fixture.
Fourth example
Execution of test example four

Configuring CI

GitHub

Project menu of Github
NodeJs workflow in Actions section
Example Actions on GitHub for Cypress
Project menu in Github — Settings
Secrets option

Git-lab

Example .gitlab-ci.yml for Git-lab
  1. The default image is cypress:base but can be any other image of your choice. Check https://github.com/cypress-io/cypress-docker-images/tree/master/browsers.
  2. It is necessary to cache the cypress installation folder; otherwise, the binaries get lost when changing to the next step, and the step will require a new installation of Cypress.
  3. The command to record in the cloud is optional since on every test execution, the artifacts are getting saved, and you can see the tests’ videos and screenshots.
Pipeline on Git-lab
Pipeline execution finished
Artifacts option
Videos saved

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store