Run Cypress tests recorded with Chrome DevTools

Requirements

Before you can get started, make sure to follow these requirements:

• You need to be using Chrome 89 or higher. Previous versions do not come with the Recorder feature.
• Install the Chrome Extension Cypress Chrome Recorder
• TestingBot's Cypress CLI is installed, through npm install testingbot-cypress-cli.

Record your actions in Chrome

Enable Recorder in Chrome

First, we'll need to enable the recorder in Chrome. Please follow these steps:

1. Open Chrome and click the More options icon, then select Developer Tools from the More Tools option.
2. Once you're in the Developer Tools, click the More options (a vertical ellipses icon) and select Recorder from the More Tools option.
3. A Recorder tab will appear, with a button Create a new recording. You are now ready to start recording.

Record Actions in Chrome

We can now start recording a user flow in Chrome. Proceed with the following steps to start recording.

1. In Recorder, click the Start new recording button.
2. Enter a name in the RECORDING NAME input field.
3. Click the Start a new recording button at the bottom of the panel.
4. Perform various actions in Chrome while the recording is recording.
5. When you are finished, click the End recording button.

Export recorded Actions

Click the Export icon and select the Export as a Cypress Test script option. Save the exported file to your local disk, in a file called cdp-testingbot.cy.js in a folder cypress/e2e/. It should contain code similar to the code below.

describe("cdp-testingbot", () => {
  it("test with cdp on testingbot", () => {
    cy.viewport(1280, 824);
    cy.visit("https://testingbot/");
  });
});

Next, create a file cypress.config.js with the following content:

module.exports = {
  'projectId': '4b7344',
  e2e: {},
}

Run the recorded Cypress actions on TestingBot

To start running the test on TestingBot, you first need to create a testingbot.json file.

$ testingbot-cypress init

Please add the key and secret you obtained from the TestingBot member dashboard in the testingbot.json file.

Before you can run your tests, you need to specify on which browser (version) and platform you'd like to test.

You can specify the browsers you want to use in the testingbot.json file:

{
    "auth": {
        "key": "TESTINGBOT_KEY",
        "secret": "TESTINGBOT_SECRET"
    },
    "browsers": [
        {
	        "browserName": "chrome",
	        "platform": "WIN10",
	        "version": "latest"
	    }
    ],
    "run_settings": {
        "cypress_project_dir": "folder-here",
        "build_name": "cypress-recorded-actions",
        "npm_dependencies": {},
        "package_config_options": {},
        "realTimeLogs": true
    }
}

Make sure to change the cypress_project_dir to the folder that contains your cypress.config.js file.

Next, you can start running the tests.

$ testingbot-cypress run

Test results will appear in your console and on the TestingBot dashboard.