Cypress Tutorial

This documentation page is a quick tutorial on how to set up an example app, with Cypress tests, and run Cypress Tests on multiple browsers in parallel on TestingBot.

Install the Example

The most popular example with Cypress is the Cypress Kitchensink Example.
You can download or clone it from GitHub:

git clone https://github.com/cypress-io/cypress-example-kitchensink.git

git clone https://github.com/cypress-io/cypress-example-kitchensink.git
git checkout ab10094ef7b199ae7febafec413a0626414bcd3c

Once you have the example on your computer, navigate to the directory and install its dependencies:

cd cypress-example-kitchensink
npm install

Configuration

Once you have the example on your computer, you can install the TestingBot Cypress CLI:

npm install -g testingbot-cypress-cli

Next, you'll need to create a testingbot.json file which will hold the configuration and authentication details to connect with TestingBot. You can quickly generate a new configuration with the CLI:

testingbot-cypress init

This will create the json file in the current directory. Now you can edit the file:

auth: add your TestingBot Key and Secret (obtained from member dashboard) in the auth code block
browsers: specify the browsers that you want to run your test on
run_settings: various options that you can configure to customize the Cypress Tests
tunnel_settings: options to customize the TestingBot tunnel, usually you will not need to modify this

This is a good example configuration to continue with the tutorial:

{
    "auth": {
        "key": "TESTINGBOT_KEY",
        "secret": "TESTINGBOT_SECRET"
    },
    "browsers": [
        {
	        "browserName": "chrome",
	        "platform": "CATALINA",
	        "version": "latest"
        }
    ],
    "run_settings": {
        "cypress_project_dir": ".../cypress/cypress-example-kitchensink",
        "build_name": "cypress-build",
        "npm_dependencies": {},
        "package_config_options": {},
        "start_tunnel": true,
        "local_ports": [8080], // optional: the port used by your app under test
        "realTimeLogs": true,
        "parallel": 2
    },
    "tunnel_settings": {
        "verbose": false
    }
}

Setup the Example

Next, you'll need to start up the kitchen-sink webserver.
Simply go to the directory of the example, and run this command:

npm start

By default this app uses localhost:8080 for its web server. That's the reason why we added 8080 to the local_ports configuration above.
It allows the CLI to access this webserver.

Run the tests

You can now run the tests:

testingbot-cypress run

The test results, together with a video and logs of the tests, will be available in the TestingBot dashboard.