Cypress automation testing

There are many tools and frameworks out there for automation, but this time one tool is getting popular when it comes to E2E browser testing, Cypress.

Stackoverflow insights
npm install cypress

Folder structure

When you create a new project with Cypress, it generates some folders automatically in the current directory. To start a cypress project, you can type the commands below in your project’s folder.

npx cypress open
Folder structure after “cypress open” command
Folder structure after “cypress open” command
  • 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

JavaScript is the only programming language for writing Cypress tests. Although even if you don’t know the language, it is relatively easy to learn and since it is an old script language, you will find many of thousands of tutorials on the internet. Here is an example of a test in Cypress.

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 comes with many configuration parameters, like baseUrl for initial URL address, env for environment variables, pageLoadTimeout to set a limit for waiting for the page, etc. All the parameters come with a default value, and they can be replaced by setting a new value in cypress.json file. Access https://docs.cypress.io/guides/references/configuration.html for more information about the parameters.

Cypress config file example
  • 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

As you progress with Cypress, you will probably want to start dealing with pipelines to have it running automatically whenever the code is updated, and new tests are in place.

GitHub

To activate the workflow of GitHub, first, click on Action on the menu bar of the project.

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

Git-lab

If you use Git-lab for your project, you have to create a file called .gitlab-ci.yml and configure it like the example below:

Example .gitlab-ci.yml for Git-lab
  1. 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.
  2. 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

Cypress is an easy tool to start testing automation, and it has a massive amount of documentation. There are free and paid accounts types. For the free account features like SSO Add-On, it is necessary to pay, the number of records has a limit of 500, and the account is also limited to a maximum of 3 users. All in all, a free account is sufficient enough for you to start the automation journey with Cypress. The topics above were only the beginning, and cypress is also enabled to use different plugins and libraries to increase testing capabilities and facilitate code implementation. Dig in-depth into its docs and success.

Software nerd and data engineer enthusiast