Rayrun

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!

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].