How to Run Cypress tests In BrowserStack with Generating the Html report

KailashPathak

3 min readApr 14, 2021

Pre- Condition :

Cypress is already set up.
Some test cases are available to run in BrowserStack.

Step Up Browser stack for Cypress test case execution :

Step 1: Install the CLI

Install the BrowserStack using Cypress CLI command via npm.

BrowserStack’s command-line interface allows us to run your Cypress tests on BrowserStack.

npm install -g browserstack-cypress-cli

Step 2: Generate browserstack.json

Under the root folder configure the browsers that we want to run the tests.

Use the init command to generate a sample browserstack.json file, or alternatively create one from scratch

Use below command

browserstack-cypress init

In generated browserstack.json file pass the below information

Fill in the auth, browsers, run_settings values in the browserstack.json file to be able to run your tests

Under auth fill below data (*Enter user name / generated access_key) of your BrowserStack account

“auth”: 
{
“username”: “XXXXXXX”,“access_key”: “XXXXXXXXX”},

Under the browsers fill browser, os, version detail (

"browsers": [{"browser": "chrome","os": "Windows 10","versions": ["latest", "latest - 1"]},{"browser": "firefox","os": "OS X Mojave","versions": ["latest", "latest - 1"]},

Under run_settings fill below information

"run_settings": {"cypress_config_file": "./cypress.json","cypress_version": "6","project_name": "My cypress project","build_name": "Build no. 1","parallels": "5"}

Step 3: Run the cypress tests

Run the below command

browserstack-cypress run --sync

As we run the above command test cases start to run in BrowserStack

Below the report of run test cases in terminal

Browser stack report of all run test cases

Step 4: Generate HTML report in browser stack

We can generate the HTML report for your test builds using one of the two ways:

1.Use the — sync argument while running your tests

browserstack-cypress run --sync

2. If you haven’t run the tests in the sync mode, or want to generate the test report for an old build.

We have to use the below command

browserstack-cypress generate-report <build_id>

**Here build-id we can get from BrowserStack Dashboard

This command will save the test results to the results folder as HTML (browserstack-cypress-report.html) and as JSON (browserstack-cypress-report.json)