All topics·Advanced·4 / 24

TypeScript

Playwright transpiles TypeScript automatically — no build step needed. The gotcha: it doesn't type-check. You can have type errors and Playwright will still run the tests. I always add a separate tsc --noEmit step in CI to catch this.

TypeScript works out of the box

Write .ts files, Playwright handles the rest. No ts-jest, no Babel, no build step. Just name the file orders.spec.ts and run npx playwright test.

The important caveat: Playwright transpiles but doesn't type-check. Type errors won't stop tests from running. On CI I run tsc --noEmit before the test step so type errors fail the build.

yaml

# GitHub Actions — перевірка типів перед тестами
steps:
  - name: Type check
    run: npx tsc -p tsconfig.json --noEmit
  - name: Run Playwright tests
    run: npx playwright test

bash

# Локально — watch mode для типів поки пишеш тести
npx tsc -p tsconfig.json --noEmit -w

Separate tsconfig for tests

I keep a separate tests/tsconfig.json so test-specific settings (like allowing any in fixtures or enabling decorators) don't affect the main app config. Playwright picks it up automatically by looking for the nearest tsconfig up the directory tree.

Note: Playwright only reads these options from tsconfig: allowJs, baseUrl, paths, references. Other options like strict or target are ignored for transpilation purposes.

text

src/
  source.ts

tests/
  tsconfig.json     ← тест-специфічний конфіг
  orders.spec.ts
  fixtures.ts

tsconfig.json       ← загальний конфіг застосунку
playwright.config.ts

Path aliases — import fixtures by @fixtures/...

Playwright supports tsconfig paths mapping. I use this to avoid ../../fixtures relative imports — instead I write @fixtures/auth regardless of where the test file is. Add the mapping in the tests tsconfig and Playwright resolves it automatically.

json

// tests/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@fixtures/*": ["./fixtures/*"],
      "@helpers/*": ["./helpers/*"]
    }
  }
}

ts

// Замість: import { test } from '../../fixtures/auth'
import { test } from '@fixtures/auth'
import { createOrder } from '@helpers/orders'

test('create order', async ({ page, loggedInPage }) => {
  // loggedInPage приходить з auth фікстури
})

Point to a specific tsconfig

If the auto-detection isn't picking up the right config, you can specify it explicitly in playwright.config.ts or via CLI flag.

ts

// playwright.config.ts
export default defineConfig({
  tsconfig: './tests/tsconfig.json',
})

bash

# Або через CLI
npx playwright test --tsconfig=tests/tsconfig.json

Take the quiz