TypeScript

Введение​

Playwright поддерживает TypeScript «из коробки». Вам нужно только написать тесты на TypeScript, и Playwright прочитает их, преобразует в JavaScript и запустит.

Обратите внимание, что Playwright не проверяет типы и запустит тесты даже при наличии некритических ошибок компиляции TypeScript. Мы рекомендуем запускать компилятор TypeScript вместе с Playwright. Например, в действиях GitHub:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    ...
    - name: Run type checks
      run: npx tsc -p tsconfig.json --noEmit
    - name: Run Playwright tests
      run: npx playwright test

Для локального разработки вы можете запустить tsc в режиме наблюдения следующим образом:

npx tsc -p tsconfig.json --noEmit -w

tsconfig.json​

Playwright будет подбирать tsconfig.json для каждого загружаемого исходного файла. Обратите внимание, что Playwright поддерживает только следующие параметры tsconfig: allowJs, baseUrl, paths и references.

Мы рекомендуем настроить отдельный tsconfig.json в каталоге тестов, чтобы вы могли изменить некоторые параметры конкретно для тестов. Вот пример структуры каталогов.

src/
    source.ts

tests/
    tsconfig.json  # test-specific tsconfig
    example.spec.ts

tsconfig.json  # generic tsconfig for all typescript sources

playwright.config.ts

Сопоставление путей tsconfig​

Playwright поддерживает сопоставление путей, объявленное в tsconfig.json. Убедитесь, что baseUrl также задан.

Вот пример tsconfig.json, который работает с Playwright:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myhelper/*": ["packages/myhelper/*"] // This mapping is relative to "baseUrl".
    }
  }
}

Теперь вы можете импортировать, используя сопоставленные пути:

import { test, expect } from '@playwright/test';
import { username, password } from '@myhelper/credentials';

test('example', async ({ page }) => {
  await page.getByLabel('User Name').fill(username);
  await page.getByLabel('Password').fill(password);
});

Разрешение tsconfig​

По умолчанию Playwright будет искать ближайший tsconfig для каждого импортированного файла, поднимаясь по структуре каталогов и ища tsconfig.json или jsconfig.json. Таким образом, вы можете создать файл tests/tsconfig.json, который будет использоваться только для ваших тестов, и Playwright автоматически его найдёт.

# Playwright will choose tsconfig automatically
npx playwright test

В качестве альтернативы вы можете указать единственный файл tsconfig в командной строке, и Playwright будет использовать его для всех импортированных файлов, а не только файлов тестов.

# Pass a specific tsconfig
npx playwright test --tsconfig=tsconfig.test.json

Вы можете указать один файл tsconfig в конфигурационном файле, который будет использоваться для загрузки файлов тестов, отчётчиков и т. п. Однако он не будет использоваться при загрузке собственной конфигурации Playwright или любых файлов, импортированных из неё.

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

export default defineConfig({
  tsconfig: './tsconfig.test.json',
});

Ручная компиляция тестов с использованием TypeScript​

Иногда Playwright Test не сможет правильно преобразовать ваш код TypeScript, например, когда вы используете экспериментальные или очень новые возможности TypeScript, обычно настроенные в tsconfig.json.

В этом случае вы можете выполнить свою компиляцию TypeScript перед отправкой тестов в Playwright.

Сначала добавьте файл tsconfig.json в каталог тестов:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "commonjs",
        "moduleResolution": "Node",
        "sourceMap": true,
        "outDir": "../tests-out",
    }
}

В package.json, добавьте две скрипта:

{
  "scripts": {
    "pretest": "tsc --incremental -p tests/tsconfig.json",
    "test": "playwright test -c tests-out"
  }
}

Скрипт pretest запускает typescript для тестов. Скрипт test запустит тесты, которые были сгенерированы в каталог tests-out. Аргумент -c настраивает тестовый запуск на поиск тестов внутри каталога tests-out.

Затем npm run test скомпилирует тесты и запустит их.