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

I have been using Cypress for a few months now, and it gets the job done. Although sometimes it is not easy to get what you want with it, Cypress is still relatively easy to use than other frameworks like Selenium. And if you have never tried Cypress, I would highly recommend to give it a spin.

Here I show how to install, config and create a pipeline for Cypress. Let’s first configure your environment and extract as much as possible from 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.

Cypress will open and show a screen with a list of tests, and behind the scene, it creates a folder called Cypress containing four more sub-folders, fixtures, integration, plugins and support.

Folder structure after “cypress open” command
Folder structure after “cypress open” command

For more information about the folders and what they are for, visit Folder-Structure.

Long story short.

  • 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

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

Here is another example using different methods.

Second example

It is also possible to include verification or executing something before each test. Let’s use the previous example.

Third example

Execute the examples saved in your integration folder by typing the following command in the terminal or using the cypress UI.

For the terminal:

For cypress UI:

Cypress UI

Now, after executing the code example above, the following result will show in your terminal.

Results after executing cypress run command in terminal

And on the Cypress UI interface, you can run each test individually and see it executed in the browser. Another cool thing is that each test gets saved as a video by default (unless the configuration is changed). Access the created video folder to see all videos from the tests.

Every test saved as video

Before every test execution, the videos and screenshots taken during the last execution get deleted. To see all results of the previous executions, you have two options. You can save all files before executing another test round or using the Cypress cloud for it by the command:

Example of the result in the Dashboard

To know more about the dashboard, access https://www.cypress.io/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.

Here is an example of cypress configuration:

Cypress config file example

Some configuration parameters might be self-explanatory but let’s have a quick look at their effect on the tests.

  • 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.

Depending on the project, you can change the configuration dynamically — for example, the viewport depending on your app’s Mobile and Desktop web version.

Fourth example

The following image represents the code above after execution.

Execution of test example four

For more examples of how to change the viewport’s configuration during the test, check https://docs.cypress.io/api/commands/viewport.html#Syntax.

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

And then choose the NodeJs workflow.

NodeJs workflow in Actions section

Using the actions and creating a flow like the next example below, the tests will run every time the code gets pushed to the master branch.

Example Actions on GitHub for Cypress

As you probably noticed, there is a secret key used when running the test command. To have the record key in your workflow but hidden, you must use your project’s option secrets.

Go to settings.

Project menu in Github — Settings

Then click on Secrets in the left menu.

Secrets option

After saving your secret with the chosen key and value you will be able to use it in your workflow.

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

Few things to notice in the example of 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.

The result of the configuration above is something like this:

Pipeline on Git-lab
Pipeline execution finished

After the pipeline finish, you can access all the videos created for each test by clicking on the execution phase and then on the right side menu clicking on browser artifacts.

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

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