How do I configure TypeScript and run tests with Playwright?

Answer

To configure TypeScript for your @playwright/test project, follow these steps:

1. Create a tsconfig.json file

Create a tsconfig.json file inside the tests directory with the following content:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "tests-out"
  },
  "include": ["tests/**/*.ts"]
}

These options help TypeScript compile your code correctly before running it with Playwright.

2. Update package.json scripts

Add pretest and test scripts to your package.json:

"scripts": {
  "pretest": "tsc -p tests",
  "test": "playwright test -c tests-out"
}

The pretest script compiles TypeScript files in the tests directory, while test runs the compiled tests from the tests-out directory.

3. Run tests

Execute your tests with the command:

npm run test

This command builds and runs your TypeScript tests using Playwright.

Remember, Playwright supports TypeScript out of the box, so you can write your tests in TypeScript and Playwright will handle the rest. If you encounter issues, you can manually compile your TypeScript code with Playwright Test.

4. Configure path mapping (optional)

If you use path mapping in your tsconfig.json, ensure the baseUrl is set correctly. After setting up path mapping, you can import using mapped paths.

5. Use custom reporters (optional)

Playwright offers various reporters, such as the junit reporter, or you can create custom reporters by implementing a class with reporter methods from the Reporter API.