---
title: Cypress Typescript Tutorial | TestingBot
description: Learn how to use Typescript and Cypress to run end-to-end tests in the
  cloud.
source_url:
  html: https://testingbot.com/support/web-automate/cypress/typescript
  md: https://testingbot.com/support/web-automate/cypress/typescript.md
---

# 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](https://github.com/testingbot/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:

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

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

```javascript
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:

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

```console
testingbot-cypress init
```

You can now edit the `testingbot.json` file.

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

Make sure to specify the same typescript dependency in `npm_dependencies` as the one in your `package.json`. This will instruct TestingBot to use the same Typescript version for running your tests.

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

```console
testingbot-cypress run
```

The test results, together with a video and logs of the tests, will be available in the [TestingBot dashboard](https://testingbot.com/members).

### Looking for more help?

Have questions or need more information? Reach out via email or Slack.

[Email us](https://testingbot.com/contact/new) [Join our Slack](https://join.slack.com/t/testingb0t/shared_invite/zt-3bcw9xch-jk19~6XPs_xBrsAgAedkCw)