Cypress integration with BrowserStack

Hello everyone!! In this article we are going to learn how to run our cypress test cases on BrowserStack. This is required for many purposes like to run test cases on multiple browsers/OS in parallel, or to use AppliTool /Percy for visual testing.

Let’s Get started-

Prerequisite: We need Cypress installed and few test cases available to run on browserstack. For this you can refer https://medium.com/@puneetvashisth/cucumber-integration-with-cypress-9465db0fde83.

Step 1- Go to Browserstack and create account. You can start with free account for learning. After login successfully, you can find your username and access key to use it further in the cypress.

Step 2- Install the BrowserStack CLI with below command which is required to enable the communication between cypress and BrowserStack-

npm install -g browserstack-cypress-cli

Step 3- Use below command to create browserstack.json file where we will modify or add the configurations which is required to run the cypress tests. This include credentials, browser-device combinations and the number of parallels which we will discuss in next step.

browserstack-cypress init

Step 4- Set the required configurations in browserstack.json file.

{
  "auth": {
    "username": "userName from browserstack account",
    "access_key": "Accesskey from browserstack account"
  },
  "browsers": [
    {
      "browser": "chrome",
      "os": "Windows 11",
      "versions": ["latest", "latest-1"]
    },
    {
      "browser": "edge",
      "os": "Windows 11",
      "versions": ["latest"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "cypress.config.js",
    "project_name": "Test Project",
    "cypress_version": "12.latest",
    "parallels": "5",
    "build_name": "build1",
    "npm_dependencies": {
      "cypress-cucumber-preprocessor": "^4.3.1",
      "cypress": "^12.0.2",
      "cypress-xpath": "^2.0.1",
      "add dependencies required to run test cases":"package"
    },
    "cache_dependencies": "false",
    "headless": false
  },
  "connection_settings": {
    "local": false,
    "local_identifier": null,
    "local_mode": null,
    "local_config_file": null
  },
  "disable_usage_reporting": false
}

Lets discuss each field from the above file-

“auth” — You need to pass username and access key which you can get from the browserstack account.

“browsers” — You can add number of browser-os combinations which you want to use to run the test cases.

“run_settings” — You need to pass the path of cypress.config.js file with respect to browserstack.json file. Rest of the fields you can configure as per the requirement.

“cache-dependencies” — You can pass true if do not want to install your npm dependencies every time on browserstack. Browserstack will cache your npm dependencies and install it from there.

“connection_settings” — If your application is on local server not public, then you need to enable these fields else you can pass false here.

Step 5- Run the test using below command-

browserstack-cypress run

OR you can create script in your package.json file to run the spec file you want e.g.

"cypress:browserstack": "browserstack-cypress run --sync --spec cypress/e2e/sample.feature"

Once your terminal commands are completed (installed dependencies, export your test.zip file , parallel =5 etc), then you will see your build on the browserstack dashboard. As you click on the build, you will see the test run including the browser-device combinations and the video.

Here, the test cases are running successfully on browserstack. If you click on any browser-os combination here, you can see the video execution of the test run with complete details.

Note — Sometimes you can find few errors while running the test cases like:

This error occurs when wrong username/access key is used. You can copy and paste again from browserstack account.

Sometimes you can get error like “build creation failed”. If you are using paid credentials then you need to check with your organization for the permissions because this error comes when there is no server found.

Hope you enjoyed this article and please share any feedback which requires improvement in the article. I would be very happy to hear the improvements. Happy Learning!! :)