Run your first Cypress test

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

Overview

In this tutorial, we will use Cypress’ kitchen sink example app to run our tests. The Kitchen Sink app is an example app provided by Cypress to learn how Cypress works.

In this guide you will learn about:

• Prerequisites
• Running your first tests
• Viewing test results

Prerequisites

• Ensure that you understand Cypress fundamentals and how Cypress runs tests.
• 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
git clone https://github.com/cypress-io/cypress-example-kitchensink.git

# Navigate to the cloned example directory
cd cypress-example-kitchensink

After you clone the repository, the folder structure of Cypress project is as follows:

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

Step 3: Install the dependent node modules. 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. The browserstack.json file is a configuration file that contains specific configurations, such as BrowserStack credentials, capabilities, etc, required for running the tests. Use the init command to initialize the app project folder and create a boilerplate browserstack.json file using the following command:

# 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:

{
  "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": "9",
    "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.

  ...
  "connection_settings": {
          "local": false,
      }
  ...

...
"connection_settings": {
        "local": true,
        "local_identifier": "My_Sample_Tutorial"
    }
...

npm start

Step 6: 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 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.

Next Steps

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