Skip to main content

Using TypeScript Tests

If you wrote your automated tests using TypeScript in Puppeteer, you need to transpile your Typescript files to Javascript before running them with saucectl. Cypress, Playwright, and TestCafe support TypeScript out of the box.

What You'll Need#

Refer to the requirements listed on the Installation page.

The Problem#

Consider the tests directory structure below:

.โ””โ”€โ”€ tests/    โ”œโ”€โ”€ test.one.spec.ts    โ”œโ”€โ”€ test.two.spec.ts    โ”œโ”€โ”€ test.three.spec.ts    โ””โ”€โ”€ tsconfig.json

The Solution#

  1. Ensure you already have typescript installed:

    npm install -g typescript
  2. Review your tsconfig.json to ensure you've set the compilerOptions appropriately.

  3. Run the TypeScript compiler like so:

    tsc --project ./tests/tsconfig.json

    Below is a default output example:

    โ””โ”€โ”€ tests/    โ”œโ”€โ”€ test.one.spec.ts    โ”œโ”€โ”€ test.one.spec.js    โ”œโ”€โ”€ test.two.spec.ts    โ”œโ”€โ”€ test.two.spec.js    โ”œโ”€โ”€ test.three.spec.ts    โ”œโ”€โ”€ test.three.spec.js    โ””โ”€โ”€ tsconfig.json

    WARNING: the TypeScript compiler will behave in a non-deterministic manner if the tsconfig.json is poorly configured.

    For more information on how to properly configure tsconfig.json please visit the documentation.

  4. Next, edit the suites fields in .sauce/config.yml in order to ignore the .ts files and instead place the .js files inside the Testrunner Toolkit container:

    suites:  - name: "basic test"    testMatch: 'tests/*.js'

    By default saucectl will pickup any .js files located in the designated directory, however with the suites field you can set more granular control with regular expressions.

  5. Finally, run saucectl to execute your transpiled tests:

    saucectl run

Sample Repos#

If you would like to see sample tests and configuration files for particular frameworks, you can clone one of our demo repositories for use as a template: