Features
Start a free trial

Cypress Typescript Testing

TestingBot offers a service similar to Cypress Cloud, where you can run Cypress tests on multiple browsers in the cloud, simultaneously. On this page, we will focus on how to run a Cypress test, built with Typescript, on TestingBot's remote browser grid.

Setup Typescript and Cypress

TestingBot provides a ready-to-use Github example: typescript-cypress-testingbot.

To get started, create a new project and add the necessary dependencies:

  • npm init
  • npm install testingbot-cypress-cli typescript cypress --save-dev

  • Next, create a tsconfig.json file with the following contents:

    Copy code
    {
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

  • Let's also create a cypress.conf.ts file (notice the .ts indicating this is a Typescript project).

    Copy code
    const { defineConfig } = require("cypress");

module.exports = defineConfig({
  experimentalWebKitSupport: true,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Typescript Example

Now that everything is set up, we can add a first test. Create a cypress directory, which will contain 2 more directories:

  • e2e
  • support

e2e.cy.ts file

The e2e.cy.ts file in the cypress/e2e directory contains our test logic:

Copy code
describe('TestingBot Demo test', () => {
  beforeEach(() => {
    cy.visit('https://testingbot.com')
  })

  it('Verify title', () => {
    cy.title().should('include', 'TestingBot')
  })
})

e2e.ts file

Another file, e2e.ts, needs to be added in the cypress/support directory, containing:

Copy code

// Import commands.js using ES2015 syntax:
import './commands'

commands.ts can be an empty file for now.

Run the Cypress test

There's one more thing left for us to do. We need to create a testingbot.json file, which needs to contain a couple of things for TestingBot to run your test. To create the file, execute the following command in the base directory of your project:

Copy code
testingbot-cypress init

You can now edit the testingbot.json file.

Copy code
{
    "auth": {
        "key": "TESTINGBOT_KEY",
        "secret": "TESTINGBOT_SECRET"
    },
    "browsers": [
        {
	        "browserName": "chrome",
	        "platform": "VENTURA",
	        "version": "latest"
        }
    ],
    "run_settings": {
        "cypress_project_dir": ".../cypress/cypress-example-kitchensink",
        "build_name": "cypress-build",
        "npm_dependencies": {
        	"typescript": "^5.2.2"
        },
        "package_config_options": {},
        "start_tunnel": false,
        "realTimeLogs": true,
        "parallel": 1
    },
    "tunnel_settings": {
        "verbose": false
    }
}