In this article we will see about how to run Cypress Tests in CI environment. Once we have created our Cypress project, we will maintain them in any VCS Repo(in our case GitHub). When there is a change in AUT functionality, obviously we need to change our test specs also. Once the changes are done we will update them in our Repos, integrate this Repo with Cypress Dashboard and on running Cypress tests, the results will be updated in Dashboard. These tests will be executed from a Jenkins job in CI/CD pipeline.
Here we use,
1. VS Code as editor for creating cypress test specs.
2. GitHub as repository to maintain test specs.
3. Jenkins to run tests in CI.
Basic steps needed to do Cypress testing in CI environment are
1. Integrate IDE with any source code repository(GitHub)
2. Integrate Cypress Dashboard with GitHub
3. Integrate Cypress Dashboard with Jenkins
- Integrate IDE with any source code repository(GitHub)
a . Keep our cypress project ready in VS code with some test specs.
b . Create an account in GitHub.
c . In VS Code install, ‘GitHub Pull Request & Issues’ extension.
To maintain our project in GitHub, we need to integrate VS Code and GitHub. This integration can be done with the help of ‘GitHub Pull Request & Issues’ extension.
In VS Code Goto Settings -> Extensions ->
d . From VS Code, Sign-in into GitHub.
Once the above extension is installed, we need to provide GitHub credentials to integrate both VS Code and GitHub.
e . From Project folder, ‘Synchronize changes’
Click an icon in VS code at bottom left corner next to master. This will create a repository in GitHub with your project name. Any further changes in test scripts, we need to commit and Synchronize changes again.
2. Integrate Cypress Dashboard with GitHub
This involves 3 main steps.
Step 1 : Create a new Cypress Dashboard project
a . Register into Cypress Dashboard.
Cypress Dashboard is available for free access with limited test runs. Register into Cypress Dashboard.
b . Create an Organization
Create an Organization in Dashboard. And inside an Organization create a New Project.
c . Once a project is created successfully, Dashboard will generate a project id and record key.
Step 2 : Integrate Cypress project with Dashboard project
a . Include this project id in cypress.json file.
Copy the above project id from Cypress Dashboard and include it in cypress.json file of a project
with which we are going to integrate.
{
“projectId”: “XXXXXXXXXXX”
}
b . Configure record key
Include the record key in package.json under scripts or use this record key while executing cypress run command from CLI.
“scripts”: {
“cy:open”: “cypress open”,
“cy:run” : “cypress run”,
“cy:dashboard”:”cypress run — record — key XXXXXXXXXXXXXXXXXXXXXX
}
c . Run cypress project from terminal using
npx cypress run — record — key xxxxxxxxxx
or
npm run cy:dashboard
d . Check the results in Cypress Dashboard
Once test specs got executed, results will be updated in Cypress Dashboard project.
Step 3 : Integrate Dashboard project with GitHub
Now this Cypress Dashboard project can be linked to GitHub repository by installing ‘Cypress GitHub Hub’ plugin.
a . From a newly created project goto ‘Project Settings’.
b . Click ‘Install the Cypress GitHub Hub’
c . Authorize Cypress to access GitHub by providing GitHub password.
d . Select a GitHub Repo in which we have created our test specs.
Now our Cypress Dashboard project and GitHub repo are integrated.
When we run cypress tests, the results are updated in Dashboard either Pass or Fail. In case of test failure, Dashboard will provide list of file names which got failed in the latest run.
So, let we see how Cypress makes our job easy to locate test specs which made our tests to fail(like assertion failure). To understand this better we introduce some error in our code. After making code changes in VS Code,
Commit and Synchronize Changes,
Run Cypress test, and
View the results in Dashboard.
On test failure, corresponding test specs will be listed under Change log as given below.
On click of a displayed file name, we will be redirected to a corresponding file in GitHub Repo.
3. Integrate Cypress Dashboard with Jenkins
a . Install Jenkins
b . Install NodeJS plugin from Plugin Manager
c . Once it is installed, we need to configure NodeJS to run npm scripts. This plugin allows us to configure NodeJS from ‘Global Tool Configuration’.
d . Create a Freestyle project.(named cypressdashboardsample)
e . Provide below configurations.
f . Run Cypress project using script as included in package.json.
Once Jenkins build is completed, the test results will be displayed in Console output along with Url to view the test results in Cypress Dashboard.
Great!!! our results are updated in Dashboard.
Conclusion :
Cypress could be easily configured and execute tests in CI environment by integrating Cypress Project, GitHub, Cypress Dashboard and Jenkins. Instead of Jenkins can also be integrated with other CI tools like Azure DevOps, Circle CI etc.
Related Video Links :
