Skip to main content
Upgrade your BrowserStack Cypress-CLI to v1.19.1 and leverage the critical fixes & improvements. Learn more!

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

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:

Command Line
# 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 && cd cypress-example-kitchensink

# Clone the Kitchen Sink repo
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:

Command Line
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:

Command Line
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:

Note: Check out the supported devices and browsers to configure the testing combinations.
// 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",
    "cypress_version": "10",
    "npm_dependencies": {
      "npm-package-you-need-to-run-tests-1": "^1.2.1",
      "npm-package-you-need-to-run-tests-2": "^7.1.6-beta.13",
    },
    "project_name": "Cypress Kitchen Sink Example",
    "build_name": "Build no: 1",
    "parallels": 5,
    "exclude": ["some-folder/test.js", "static/*.pdf"],
}
// 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": "9",
    "npm_dependencies": {
      "npm-package-you-need-to-run-tests-1": "^1.2.1",
      "npm-package-you-need-to-run-tests-2": "^7.1.6-beta.13",
    },
    "project_name": "Cypress Kitchen Sink Example",
    "build_name": "Build no: 1",
    "parallels": 5,
    "exclude": ["some-folder/test.js", "static/*.pdf"],
}
Important: If you are using any external npm packages in your Cypress tests, add those under npm_dependencies in the browserstack.json file.

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.

If you want to run the Cypress test using the Kitchen Sink web app hosted publicly at https://example.cypress.io/, you must replace all localhost URL instances with the public URL in the project folder.

Step 6: In your IDE, open the Kitchen Sink App project.

Step 7: Search the project for http://localhost:8080, and then replace all instances with https://example.cypress.io as shown in the following IDE sample:Cypress kitchen sink replace localhost

Ensure that you replace the instances in all *.spec.js files.

Step 8: Set the following Local configurations to the connection_settings object in your browserstack.json file:

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

The tests in Kitchen Sink example use the http:\\localhost:8080 URL to access the application server. Use the following steps to start the application server.

Note: Check out the Cypress Kitchen Sink’s README for more information.

Step 6: Set up Local testing. Set the following Local configurations to the connection_settings object in your browserstack.json file:

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

Step 7: Start the webserver.

npm start

Step 8: Verify the app is hosted.

Verify that the Kitchen Sink web app is hosted at http://localhost:8080.

Step 9: Run the test using the following command:

Command Line
browserstack-cypress run

View your test results

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

Automate Cypress Dashboard

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

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