How do I configure TypeScript for Playwright tests?

Answer

Setting up TypeScript Configuration for Playwright Tests

First, create a tsconfig.json file in your tests directory with the following content:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  }
}

These options configure the TypeScript compiler to target ECMAScript 6, use the CommonJS module system, resolve modules using Node.js, generate source maps for debugging, and output compiled files to the dist directory.

Next, add two scripts to your package.json:

{
  "scripts": {
    "pretest": "tsc --incremental --project tests",
    "test": "playwright test --config=playwright.config.ts"
  }
}

The pretest script compiles your TypeScript files in the tests directory using the tsconfig.json you created earlier. The test script runs the Playwright test with the configuration specified in the playwright.config.ts file.

In your playwright.config.ts file, import defineConfig from @playwright/test and configure the web server:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'npm run start-server',
    url: 'https://ray.run',
    timeout: 120000,
    reuseExistingServer: true
  }
});

This configuration starts a web server using the npm run start-server command, sets the server URL to https://ray.run, allows a maximum of 120 seconds for the server to start, and reuses an existing server instance if available.

Finally, run npm run test to build your TypeScript code and run it with the Playwright Test runner. You've now successfully configured TypeScript for your Playwright tests!