Cypress Typescript Testing

Setup Typescript and Cypress

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

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

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

  Copy

  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:

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:

// 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:

testingbot-cypress init

You can now edit the testingbot.json file.

{
    "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
    }
}

Finally, to run the test, you can run the following command:

testingbot-cypress run

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