Integrating Cypress with BrowserStack

By /
Integrating Cypress with BrowserStack

Before you integrate your test with BrowserStack, ensure that the following prerequisites are met:

  • BrowserStack Username and Access key, which you can find in your account settings. If you have not created an account yet, you can sign up for a Free Trial or purchase a plan.
  • Node.js installed on your machine.
  • Git installed on your machine.
  • NPM installed on your machine.
  • Create a Package.json
    npm init -y
  • Install Cypress
    npm install cypress –save-dev

The following steps are written based on the instructions given in the official BrowserStack Documentation: https://www.browserstack.com/docs/automate/cypress/run-your-first-test

Clone the Kitchen Sink app using the following command:

git clone https://github.com/cypress-io/cypress-example-kitchensink.git; cd cypress-example-kitchensink

Use the npm command to install dependent node modules required to run the Kitchen Sink example app:

npm install

Create and configure the browserstack.json file which contains configurations, such as BrowserStack credentials, capabilities, etc., that are required for running the tests. Use the following init command to initialize the app project folder and create a boilerplate browserstack.json file:

browserstack-cypress init

If you eventually meet the following issue after this step

PS C:\Users\38163\Desktop\BrowserStack Test\cypress-example-kitchensink> browserstack-cypress init
>>
browserstack-cypress : File C:\Users\38163\AppData\Roaming\npm\browserstack-cypress.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see 
about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ browserstack-cypress init
+ ~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : SecurityError: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

…then check out the following article to find the solution for it:
https://notoolsnocraft.tech/powershells-execution-policy-error-example/

If you haven’t met this issue, meaning that your browserstack.json file got created, then feel free to move to the next step.

After the browserstack.json file is created, modify and add the mandatory configurations that are required to run the Cypress test as shown in the following sample code. The mandatory configurations are BrowserStack credentials, Cypress configuration file, browser-device combinations, and the number of parallels:

// browserstack.json

{
  "auth": {
    "username": "YOUR BROWSERSTACK USERNAME HERE",
    "access_key": "ACCESS KEY HERE"
  },
  "browsers": [
    {
      "browser": "chrome",
      "os": "Windows 10",
      "versions": ["latest", "latest - 1"]
    },
    {
      "browser": "firefox",
      "os": "OS X Mojave",
      "versions": ["latest", "latest - 1"]
    },
    {
      "browser": "edge",
      "os": "OS X Catalina",
      "versions": ["latest"]
    }
  ],
  "run_settings": {
    "cypress_config_file": "./cypress.config.js",
    "cypress_version": "13.latest",
    "npm_dependencies": {},
    "project_name": "Cypress Kitchen Sink Example",
    "build_name": "Build no: 1",
    "parallels": 5,
    "exclude": ["some-folder/test.js", "static/*.pdf"]
  },
  "connection_settings": {
    "local": false
  }
}

Set up the application server. The Kitchen sink sample app can be tested on BrowserStack using either the localhost website or the Cypress Kitchen Sink sample app public URL.

The tests are given under the cypress/e2e/… path. The tests are, by default, set to the http://localhost:8080 Instances. In order to run the tests on the default Cypress live demo site, we have to replace the instances.

Search for http://localhost:8080 instances
You need to search for instances of the http://localhost:8080 URL in your project.

Steps to Search and Replace URLs in VSCode

  1. Open VSCode in the project directory.
  2. Use Ctrl + Shift + F (Windows) or Cmd + Shift + F (Mac) to open the search panel.
  3. Search for http://localhost:8080.
  4. Replace all instances with https://example.cypress.io.

Double-Check for Files

Make sure to check files inside:

  • cypress/e2e/**/*.spec.js for instances of http://localhost:8080 and replace them.

Run the Cypress tests through BrowserStack:

browserstack-cypress run

After you run this command in the Visual Studio Code terminal, it will load the test and at the end you will receive the BrowserStack link that you have to open in order to see the test visual.

Here is an example screenshot of how the results of the test look like in BrowserStack:

In order to customize the tests to your needs, you should remove the default Cypress tests from the cypress/e2e/… path and update your own Cypress test scripts.

Related Posts

Scroll to Top