Skip to main content

TypeScript

Введение​

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

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

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  # tsconfig, специфичный для тестов
    example.spec.ts

tsconfig.json  # общий tsconfig для всех исходников TypeScript

playwright.config.ts

Маппинг путей в tsconfig​

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

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

tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@myhelper/*": ["packages/myhelper/*"] // Это отображение относительно "baseUrl".
    }
  }
}

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

example.spec.ts
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 автоматически выберет tsconfig
npx playwright test

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

# Указать конкретный tsconfig
npx playwright test --tsconfig=tsconfig.test.json

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

playwright.config.ts
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 соберет тесты и запустит их.