Integrate Cypress with Jenkins
Integrate your Cypress test suite with Jenkins and the BrowserStack real device grid using our plugin.
Introduction
Jenkins is an open-source Continuous Integration (CI) server, which automates the build and deploy process of your web applications. By running your Cypress test suite in Jenkins, you also automate testing as part of the build process. Add BrowserStack to the mix, and your web apps can be tested across thousands of real devices. BrowserStack lets you integrate your Cypress tests with Jenkins using a plugin that connects your Jenkins CI server to the BrowserStack device grid.
Use the BrowserStack Jenkins plugin to:
- Configure your BrowserStack credentials for your Jenkins jobs.
- See results from individual spec file executions.
- Set up and tear down the BrowserStack Local binary for testing internal, development, and staging environments.
- Embed BrowserStack test results, including video, logs, and screenshots in your Jenkins job results.
Prerequisites
You need the following set up before you begin:
- An existing Jenkins CI server (version 1.653+)
- A BrowserStack account
- A Jenkins freestyle project, if you want to generate Cypress reports.
Installing the Jenkins plugin
To run your Cypress tests with Jenkins on BrowserStack, you will first need to download our Jenkins plugin. Before installing the plugin, ensure you have the necessary privileges to administer your Jenkins installation. We recommend doing this when there are no active build jobs running on Jenkins.
- Click on Manage Jenkins > Manage Plugins.
- Click on the Available tab.
- In the search box type BrowserStack.
- Choose BrowserStack from the list of available plugins.
- Check the box and install the plugin.
- Once the plugin has been successfully installed you will be able to see it in the list of Installed plugins.
Configuring BrowserStack credentials
Once you’ve installed the plugin, you will need to configure your BrowserStack credentials to complete the integration between Jenkins and your Cypress tests. This can be done by either using Jenkins UI or using a Jenkinsfile.
Follow these steps to configure BrowserStack inside Jenkins:
- Go to Manage Jenkins > Configure System.
- Under the BrowserStack section, click on the Add button next to BrowserStack Credentials.
- Enter your BrowserStack Username and Access Key which you can find on your BrowserStack Account Settings page.
- Save your changes.
Follow these steps to configure BrowserStack inside Jenkins:
- Go to the Pipeline project > Configure.
- Under the Pipeline section, click Pipeline Syntax
- Select the browserstack:BrowserStack in the Sample Step dropdown menu and click Add to set BrowserStack credentials in Jenkins.
- Add your BrowserStack username and access key in Jenkins Credentials Provider: Jenkins window and click Add as shown below:
This will set your BrowserStack Username and Access Key in Jenkins.
Once you add your credentials as mentioned above, Jenkins generates an ID which is used in the Jenkinsfile.
From the Jenkins home page, click on Manage Jenkins then Manage Credentials. You can copy the ID for BrowserStack credentials.
Use the sample code in your Jenkinsfile:
browserstack(credentialsId: '<browserstackCredentialsID>') {
// code for executing test cases
}
The above Jenkinsfile code block can also be generated with the help of Pipeline Syntax generator tool available in Jenkins.
To generate the step snippet with Snippet Generator:
- Navigate to the Pipeline Syntax from a configured Pipeline, or at
<jenkins-ip>:<port>/pipeline-syntax. - Select the browserstack:BrowserStack in the Sample Step dropdown menu.
- Use the dynamically populated area below the Sample Step dropdown to configure the selected step.
- Click Generate Pipeline Script to create a snippet of Pipeline which can be copied and pasted into a Pipeline.
Configuring BrowserStack Local
BrowserStack Local Testing allows you to test web applications hosted on private, development, and internal servers. With the Local testing binary, you can create a secure, private connection between the BrowserStack device grid and your internal servers. The BrowserStack Jenkins plugin is responsible for:
- Downloading the BrowserStack Local binary for every platform that the build job is running on
- Setting up and tearing down the secure tunnel.
To enable BrowserStack Local follow these steps
Under the Build Environment section check the box next to BrowserStack Local.
- If you are using an externally downloaded binary, you can enter its location at BrowserStack Local Path. If left empty, the plugin will automatically download the binary (recommended). This is recommended especially if you are using Jenkins in master-slave configurations, since the plugin will download the appropriate binary for the build agent OS.
- Use BrowserStack Local Options to set any additional configuration options when running the binary (Full list of options available here)
To enable BrowserStack Local using a Jenkinsfile add localConfig option as shown in the sample code:
browserstack(credentialsId: '<browserstackCredentialsId>', localConfig: [localOptions: '<local-options>', localPath: '/path/to/local']) {
// code for executing test cases
}
Once you’ve integrated BrowserStack Local through the Jenkins plugin, you can run your Cypress tests on websites hosted on private, development, and internal servers safely and securely. Refer to the sample code in the below section.
Viewing test report in Jenkins
The BrowserStack Jenkins plugin enables you to embed the test results from Cypress on BrowserStack Automate into Jenkins. It shows summary of the build, and a grid of all the specs of that build. The plugin helps you to debug faster by highlighting failed tests and linking tests to the Automate dashboard.
BROWSERSTACK_BUILD_NAME environment variable to set build name in your test code. If you don’t use the BROWSERSTACK_BUILD_NAME environment variable, the plugin will not be able to embed reports in Jenkins. Refer Using Environment variables section on how to use environment variables.
Enabling reporting is a simple process and doesn’t require any code change, follow the below steps:
- Click on Add post-build action dropdown in Post-build Actions section
- Select BrowserStack Cypress Test Report from the dropdown. Note that
--build-name $BROWSERSTACK_BUILD_NAMEshould be present in the command in ‘Execute Shell’.
- Click Save
Use the code in your Jenkinsfile
browserStackReportPublisher 'automate'
This is a post build step and should be added after the browserstack block in the Jenkinsfile.
Browserstack Cypress Test Report if the Pipeline option is used for builds. The Browserstack Cypress Test Report can only be generated if you have used a Freestyle project to create a build job.
With this integration, you can now view the results of your Cypress tests within Jenkins. You can know the summary of a build:
You can view the list of specs and their individual results by clicking on View Full BrowserStack Report or by clicking on BrowserStack Cypress Test Report link in the sidebar.
Selecting any session from this table will take you to the Automate dashboard where you can refer to video logs, text logs, screenshots, and other debugging options for a session.
Conclusion
By following the steps outlined in this guide, you should have a seamless integration between your existing automation in Jenkins, your Cypress tests, and the BrowserStack evice grid. This will help you leverage all the benefits of test automation along with the scale and coverage offered by BrowserStack.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
- RESOURCES
Is this page helping you?
Yes
No
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!
