Skip to main content
Introducing support for Selenium 4 and its BiDi APIs on BrowserStack Automate! Learn More!

Sample tutorial

A tutorial to help you use the CLI to run Cypress tests on BrowserStack.

This tutorial will show you how to use the CLI and run Cypress tests on BrowserStack. In this tutorial, we will use Cypress’ kitchen sink example., and run it on BrowserStack’s infra.

Get Kitchen Sink

You can either clone Kitchen Sink using the following command, or download Kitchen Sink example.

Command Line
# Clone the Kitchen Sink repo
git clone https://github.com/cypress-io/cypress-example-kitchensink.git

# Switch to the cloned example
cd cypress-example-kitchensink

The example has the following structure, and several other files that make up the application.

app
...
cypress
|-- fixtures
|-- integration
|-- plugins
|-- support
cypress.json
...

Configure browserstack.json

If you already haven’t, install the BrowserStack CLI.

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

Next, create a browserstack.json file to configure your test runs on BrowserStack. In this tutorial, we will just use the init command of the CLI to create a starter file.

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

Edit the browserstack.json file, and update:

  • auth details (you can find your username and access_key on the Automate dashboard)
  • browsers list that you want to run the tests on. You can find the list of supported browsers here
  • cypress_config_file with the path to the Cypress config file (usually cypress.json)
  • project_name with a project name of your choice (eg., Cypress Kitchen Sink Example)
  • build_name with the build name (eg., Build no 12345)
  • parallels key with the number of parallels you want to use to run the tests (eg., 5)

Here is a good configuration that we will be using for this tutorial:

browserstack.json
{
  "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.json",
    "cypress_version": "7",
    "project_name": "Cypress Kitchen Sink Example",
    "build_name": "Build no: 1",
    "parallels": 5,
    "npm_dependencies": {}
  },
  "connection_settings": {
    "local": false,
    "local_identifier": null
  },
  "disable_usage_reporting": false
}

Setup the application server

The tests in Kitchen Sink example use localhost:8080 to access the application server. You can either setup the application locally (as per the instructions in Cypress Kitchen Sink’s README).

Alternatively, you can replace all occurences of http://localhost:8080 with https://example.cypress.io as follows:

Cypress kitchen sink replace localhost

Note: If you’re using localhost:8080, make sure to set up a Local Testing connection so that the application can be accessed by BrowserStack while running your tests.

Run the tests

Now, you can run your tests with the following command:

Command Line
browserstack-cypress run --sync

Access the test results

Now, head to the Automate dashboard to see the tests running.

You can access the tests grouped by the browser combination and see all the spec files, the test videos and logs. For the errored out sessions, you can find the screenshots captured as well.

You can also see the tests that finished running (along with their statuses) on your CLI while the build is being run. After the tests are done running, you can access the results in the results folder where you will find the HTML & JSON files containing the build summary.

Next Steps

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

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!

Talk to an Expert
Talk to an Expert