Run your first Cypress test with Automate Turboscale
Learn how to use the Kitchen Sink example app to run your first test on Automate Turboscale.
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
- Ensure that you understand Cypress fundamentals and how Cypress runs tests
- Cypress version 13.6 is required
- 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 20.9 is required
Run your first test
Perform the following steps to run cypress tests with Automate Turboscale using the sample kitchen sink project.
Install the latest version of the browserstack-cypress-cli npm package
Install the BrowserStack CLI. Use the npm
command to install the BrowserStack - Cypress CLI
as shown below:
# Install the BrowserStack Cypress CLI
npm install -g browserstack-cypress-cli
Clone the Kitchen Sink app
Clone the sample application 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
After you clone the repository, the Cypress project will be in the following structure:
app
...
cypress
|-- fixtures
|-- e2e
|-- support
cypress.config.js
...
Install node modules
Use the npm
command to install dependent node modules required to run the Kitchen Sink example app:
npm install
Create the configuration file
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 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, Turboscale parameters, 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": "linux",
"versions": latest
}
],
"run_settings": {
"cypress_config_file": "./cypress.config.js",
"project_name": "new-project",
"build_name": "new-build",
"exclude": [],
"parallels": "2",
"npm_dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
"react-router-dom": "^6.15.0"
},
"record": true,
"record-key": "87b774c4-a373-43fa-986e-0833a55dc6d7",
"projectId": "2m6i88",
"package_config_options": {},
"headless": true,
"turboScale": true,
"turboScaleOptions": {
"gridName": "turboscale-trial-grid"
}
},
"disable_usage_reporting": true
}
In the above sample code snippet, the following parameters are mandatory for the test to run:
-
username
,access_key
-
browser
,os
-
record-key
,projectId
,turboScale
It is mandatory to set turboScale
to true
to use Automate Turboscale.
gridName
is an optional parameter. If turboScale
is set to true
and gridName
is not specified, then the test session is run on the latest grid that you created.
The record-key
and projectId
can be found on your Cypress dashboard. These parameters are essentials to publish the test results on your Cypress dashboard. If they are not added to the configuration file, test results will only be displayed on the CLI terminal.
Set up the application server.
Run the Kitchen sink sample app using the Cypress Kitchen Sink sample app public URL.
In your IDE, open the Kitchen Sink App
project.
Replace URLs
Search the project for http://localhost:8080
, and then replace all instances with https://example.cypress.io
as shown in the following IDE sample:
Ensure that you replace the instances in all *.spec.js
files.
Run tests
Run the test using the following command:
npx browserstack-cypress run
View your test results
After you run your test, visit the Cypress dashboard to view your test results and logs as follows:
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
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!