Integrate your Test Suite with BrowserStack

Learn how to integrate your existing Cypress tests with BrowserStack Automate.

This guide assumes that you are integrating an existing Cypress project. If you don’t have access to an existing Cypress project, you can try running your first test using the Cypress Kitchen Sink web app.

In this guide you will learn about:

• Prerequisites
• Run your test
• View your results

Prerequisites

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.
• An existing Cypress project that you want to integrate with BrowserStack.

Run your test

To run your Cypress test, perform the following steps:

Step 1: Install the BrowserStack CLI. The BrowserStack - Cypress CLI is a command-line tool that is used to enable communication between Cypress and BrowserStack. Use the npm command to install the BrowserStack - Cypress CLI as follows:

# Install the BrowserStack Cypress CLI
npm install -g browserstack-cypress-cli

Step 2: Generate and configure the browserstack.json file. The browserstack.json file contains configurations, such as BrowserStack credentials, capabilities, etc, required for running the tests.

Navigate to your project’s root directory and run the following command to generate the browserstack.json configuration file.

# Create a sample configuration file for configurations and capabilities
browserstack-cypress init

After the browserstack.json file is created, modify or 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:

The following sample browserstack.json file configuration can be used to create your own configuration:

      {
      "auth": {
        "username": "YOUR_USERNAME",
        "access_key": "YOUR_ACCESS_KEY"
      },
      "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",
        // For Cypress v9 or lower using the following configuration
        // "cypress_config_file": "./cypress.json",
        "cypress_version": "12.3",
        "project_name": "Cypress sample build",
        "build_name": "Build no. 1",
        "parallels": "5"
      }
    }

Step 3: Run the test using the following command:

browserstack-cypress run --sync

Access the test results

After you run your test, visit the Automate dashboard to view your test results as follows:

All the tests run as part of each spec file are grouped by the browser combination. When you click any browser combination, you can see the detailed view that includes video logs, text logs, etc. If any tests run into an error, relevant screenshots are captured in the Screenshots tab.

On your command-line tool, you can see the completed tests along with their current status as the build execution progresses. After the tests are executed, you can access the results in the results folder that contains the HTML & JSON files with the build summary.

Debug builds and analyze trends with Test Observability

Level up your Cypress testing on BrowserStack with Test Observability, an advanced test reporting and debugging tool that helps you analyze test failures dramatically faster.

If enabled, Test Observability collects test data using the SDK. This capability is enabled (set to true) by default. You can explicitly turn off Test Observability by turning the testObservability flag to false. You can explore additional configurations and learn how to use Test Observability for Cypress here.

Please note that Test Observability currently cannot be used alongside existing test reporters like mochawesome, and will automatically disable any other reporters you have set up.

Next Steps

• Check out how to run your first test
• Learn how to test localhost and staging websites
• Learn how to run tests in parallel