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.
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.
npm install cypress
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
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.
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.
Here is another example using different methods.
It is also possible to include verification or executing something before each test. Let’s use the previous 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:
npx cypress run
For cypress UI:
npx cypress open
Now, after executing the code example above, the following result will show in your 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.
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:
npx cypress run — record — key <YOUR KEY>
To know more about the dashboard, access https://www.cypress.io/dashboard.
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:
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.
The following image represents the code above after execution.
For more examples of how to change the viewport’s configuration during the test, check https://docs.cypress.io/api/commands/viewport.html#Syntax.
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.
To activate the workflow of GitHub, first, click on Action on the menu bar of the project.
And then choose the NodeJs workflow.
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.
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.
Then click on Secrets in the left menu.
After saving your secret with the chosen key and value you will be able to use it in your workflow.
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:
Few things to notice in the example of Git-lab:
- 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.
- 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.
- 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:
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.
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.