Настройка TypeScript для Playwright проектов

Playwright — это мощная библиотека для автоматизации тестирования веб-приложений, которая поддерживает работу с браузерами на разных платформах. Для написания тестов в Playwright часто используется JavaScript, но TypeScript предоставляет дополнительные преимущества: строгую типизацию, автодополнение и улучшенную поддержку IDE. Чтобы настроить TypeScript для работы с Playwright, необходимо пройти несколько шагов.

Шаг 1. Установка Node.js и Playwright

Перед тем как настроить TypeScript, необходимо убедиться, что в системе установлен Node.js. На официальном сайте Node.js можно скачать и установить последнюю версию. Для проверки установки используйте команду:

node -v

После установки Node.js можно установить Playwright. Для этого выполняется команда:

npm install playwright

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

Шаг 2. Установка TypeScript и необходимые пакеты

Следующий шаг — установка TypeScript и связанных с ним пакетов. Для этого нужно выполнить несколько команд:

npm install typescript @types/node ts-node
  • TypeScript — сам язык программирования.
  • @types/node — набор типов для Node.js, который помогает TypeScript корректно работать с API Node.js.
  • ts-node — инструмент для запуска TypeScript файлов без предварительной компиляции.

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

Шаг 3. Настройка tsconfig.json

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

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

Разбор настроек:

  • target: определяет стандарт JavaScript, в который TypeScript будет компилировать код. ES6 рекомендуется для современных проектов.
  • module: определяет систему модулей, используемую в проекте. Для Playwright чаще всего используется commonjs.
  • moduleResolution: указывает, как TypeScript будет разрешать модули. В большинстве случаев используется node.
  • strict: включает строгую типизацию, которая помогает выявлять потенциальные ошибки на этапе компиляции.
  • esModuleInterop: включает поддержку импорта ES-модулей.
  • skipLibCheck: ускоряет компиляцию, исключая проверку типов в библиотеках.
  • forceConsistentCasingInFileNames: гарантирует, что имена файлов используются в одном регистре, что полезно при работе с системами, чувствительными к регистру.
  • outDir: указывает, куда будет компилироваться исходный код.
  • rootDir: указывает на корневую директорию исходных файлов.

Шаг 4. Написание и запуск тестов

После того как проект настроен, можно приступать к написанию тестов. Обычно файлы с тестами размещаются в каталоге src. Например, простейший тест на проверку загрузки страницы с использованием Playwright и TypeScript может выглядеть так:

import { chromium } from 'playwright';

describe('Тестирование Playwright с TypeScript', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('Должен открыть главную страницу', async () => {
    await page.goto('https://example.com');
    const title = await page.title();
    expect(title).toBe('Example Domain');
  });
});

В этом примере используется стандартная структура для тестирования в Jest, где до и после выполнения тестов открывается и закрывается браузер. Также используется expect, чтобы проверить, что название страницы соответствует ожидаемому значению.

Шаг 5. Запуск тестов с использованием ts-node

Для запуска тестов с TypeScript используется ts-node, который позволяет исполнять .ts файлы напрямую. Для этого можно добавить в файл package.json команду для запуска тестов:

{
  "scripts": {
    "test": "ts-node src/test.ts"
  }
}

Теперь тесты можно запустить с помощью команды:

npm test

Шаг 6. Настройка тестового фреймворка (Jest)

Для полноценного тестирования с Playwright и TypeScript лучше использовать тестовый фреймворк, например, Jest. Это позволит организовать тесты, выполнять их параллельно, а также использовать такие возможности, как мокирование и ассерты.

Для установки Jest и интеграции с TypeScript выполните команду:

npm install jest @types/jest ts-jest

Затем добавьте конфигурацию для Jest в файл jest.config.js:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

Теперь можно писать тесты в файлах с расширением .test.ts и запускать их с помощью команды:

npm run test

Шаг 7. Добавление типовых определений для Playwright

Playwright уже предоставляет типы для TypeScript, что позволяет получить автодополнение и статическую типизацию при работе с API библиотеки. Убедитесь, что типы Playwright корректно установлены, если они не были автоматически добавлены:

npm install --save-dev @types/playwright

Это обеспечит доступ к типам и улучшит качество кода, позволяя TypeScript проверять типы при компиляции.

Шаг 8. Использование других инструментов для улучшения разработки

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

  • ESLint — для статического анализа кода и соблюдения код-стайла.
  • Prettier — для автоматического форматирования кода.
  • Playwright Test Runner — специализированный инструмент для запуска тестов Playwright. Он поддерживает встроенные ассерты, отчёты и другие полезные функции.

Настройка этих инструментов в проекте позволит значительно повысить качество и удобство разработки.

Заключение

Настройка TypeScript для Playwright-проекта предоставляет множество преимуществ, таких как строгая типизация, автодополнение и улучшенная поддержка IDE. Процесс включает в себя установку и настройку необходимых зависимостей, создание конфигурации TypeScript, а также интеграцию с тестовыми фреймворками. Все эти шаги позволяют организовать надежную и эффективную автоматизацию тестирования веб-приложений с использованием Playwright и TypeScript.

Оглавление