Run your first Cypress test

Learn how to use the Kitchen Sink example app to run your first test on BrowserStack.

In this tutorial, you use Cypress’ Kitchen Sink example app to run tests. This app helps demonstrate how Cypress works.

This guide covers:

• Prerequisites
• Running your first tests
• Viewing test results

Prerequisites

• Ensure you have basic knowledge of Cypress fundamentals.
• 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.
• NodeJS version 12 or higher is installed.

Run your first test

To run your first Cypress test with BrowserStack, 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: Clone the Kitchen Sink app using the following command:

# Clone the Kitchen Sink repo for Cypress v10 and higher
git clone https://github.com/cypress-io/cypress-example-kitchensink.git && cd cypress-example-kitchensink

# Clone the Kitchen Sink repo for Cypress v9 and lower
git clone https://github.com/cypress-io/cypress-example-kitchensink.git && cd cypress-example-kitchensink && git checkout ab10094ef7b199ae7febafec413a0626414bcd3c

After you clone the repository, the Cypress project will be in the following structure:

app
...
cypress
|-- fixtures
|-- e2e
|-- support
cypress.config.js
...

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

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

npm install

Step 4: 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

After you create the browserstack.json file, add or modify the mandatory configurations required to run the Cypress tests, as shown in the following sample. These configurations include your BrowserStack credentials, the Cypress configuration file, browser-device combinations, and the number of parallels.

// 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.config.js",
    // For Cypress v9 or lower using the following configuration
    // "cypress_config_file": "./cypress.json",
    "cypress_version": "13.latest",
    "npm_dependencies": {
      "add-your-npm-package-1-for-test-run-here": "npm-package-version",
      "add-your-npm-package-2-for-test-run-here": "npm-package-version"
    },
    "project_name": "Cypress Kitchen Sink Example",
    "build_name": "Build no: 1",
    "parallels": 5,
    "exclude": ["some-folder/test.js", "static/*.pdf"]
  }
}

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

  //browserstack.json
  ...
  "connection_settings": {
          "local": false,
      }
  ...

//browserstack.json
...
"connection_settings": {
        "local": true,
        "local_identifier": "My_Sample_Tutorial"
    }
...

npm start

Step 9: Run the test using the following command:

browserstack-cypress run

View your test results

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

All tests in each spec file are grouped by browser combination. When you click a browser combination, you see a detailed view with video logs, text logs, and more. If any test fails, relevant screenshots appear in the Screenshots tab.

On your command-line tool, you see completed tests and their current status as the build runs. After execution, test results are saved in the results folder, which contains HTML and JSON files with the build summary.

Debug builds and analyze trends with Test Reporting & Analytics

Level up your Cypress testing on BrowserStack with Test Reporting & Analytics - with advanced test reporting, debugging, smart failure analysis, and rich insights for your test suites.

works automatically for all users running Cypress v10 and above. You can explicitly turn off Test Reporting & Analytics by turning the testObservability flag to false. You can explore additional configurations and learn how to use Test Reporting & Analytics for Cypress here.

Test Reporting & Analytics currently doesn’t support other test reporters like Mochawesome. If any are set up, they are automatically disabled.

Next Steps

• Learn how to integrate your tests
• Learn how to run tests in parallel