End-to-end тестирование с Playwright

End-to-end (E2E) тестирование позволяет проверять работу приложения на уровне конечного пользователя, эмулируя реальные сценарии взаимодействия с интерфейсом. В этой главе рассмотрим, как интегрировать фреймворк Playwright для выполнения таких тестов в приложении на базе Svelte.

Зачем использовать Playwright?

Playwright — это инструмент для автоматизации тестирования веб-приложений. Он поддерживает работу с основными браузерами (Chromium, Firefox, WebKit) и позволяет эмулировать различные пользовательские сценарии, такие как клики, ввод текста, навигация по страницам. В отличие от других инструментов, Playwright предоставляет встроенные возможности для тестирования в нескольких браузерах, что гарантирует стабильность и универсальность результатов.

Установка Playwright

Для начала нужно установить Playwright в проект:

npm install -D playwright

Для того чтобы Playwright поддерживал тестирование на всех платформах (Chrome, Firefox, WebKit), можно установить все необходимые бинарники:

npx playwright install

Эта команда скачает и установит браузеры, с которыми будет работать инструмент. После установки можно перейти к написанию тестов.

Настройка тестового окружения

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

Создадим файл для тестов, например, tests/app.spec.ts. В нем и будет описан основной тест для проверки функциональности приложения.

Написание простого теста

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

Пример теста:

import { test, expect } from '@playwright/test';

test('Главная страница загружается корректно', async ({ page }) => {
  // Открываем страницу приложения
  await page.goto('http://localhost:5000');

  // Проверяем наличие важного элемента на странице
  const title = await page.locator('h1').textContent();
  expect(title).toBe('Добро пожаловать в Svelte!');
});

В этом тесте:

  • page.goto('http://localhost:5000') — переходим по адресу, где запущено приложение.
  • page.locator('h1') — находим заголовок <h1>.
  • expect(title).toBe('Добро пожаловать в Svelte!') — проверяем, что текст заголовка соответствует ожидаемому.

Проверка взаимодействия с элементами

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

Пример теста для взаимодействия с кнопкой:

test('Тест на кликабельность кнопки', async ({ page }) => {
  await page.goto('http://localhost:5000');

  // Находим кнопку и кликаем по ней
  const button = page.locator('button');
  await button.click();

  // Проверяем, что после клика текст изменился
  const message = await page.locator('#message').textContent();
  expect(message).toBe('Кнопка была нажата!');
});

Здесь:

  • Мы находим кнопку на странице с помощью page.locator('button').
  • После клика проверяем, что текст элемента с id #message изменился.

Сниппеты для выполнения тестов

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

{
  "scripts": {
    "test": "playwright test"
  }
}

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

npm test

Playwright автоматически выполнит все тесты, расположенные в директории tests, и отобразит отчет в командной строке.

Поддержка многобраузерности

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

Пример теста с использованием разных браузеров:

import { test, expect } from '@playwright/test';

test('Проверка на совместимость с браузерами', async ({ browser }) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:5000');

  const title = await page.locator('h1').textContent();
  expect(title).toBe('Добро пожаловать в Svelte!');
});

Этот тест будет автоматически запускаться в тех браузерах, которые поддерживает Playwright. По умолчанию это Chromium, Firefox и WebKit.

Интеграция с CI/CD

Playwright идеально подходит для интеграции с системами CI/CD. Например, можно добавить шаг для выполнения тестов в GitHub Actions. Для этого нужно создать файл конфигурации .github/workflows/playwright.yml:

name: Playwright Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Установка зависимостей
        run: npm install
      - name: Запуск тестов
        run: npm test

В данном примере CI/CD пайплайн будет автоматически запускать тесты при каждом push’е в репозиторий.

Использование Playwright с различными фреймворками

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

npm install -D jest-playwright-preset

Затем в конфигурации Jest добавьте настройки:

{
  "preset": "jest-playwright-preset"
}

Теперь Playwright будет использоваться внутри Jest, и можно писать тесты с привычным синтаксисом Jest.

Снимки экрана и видео

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

test('Тест с видео и снимками экрана', async ({ page }) => {
  await page.goto('http://localhost:5000');

  // Снимаем скриншот
  await page.screenshot({ path: 'screenshot.png' });

  // Записываем видео
  await page.context().video().saveAs('test-video.mp4');
});

Эти функции полезны для диагностики проблем с интерфейсом при тестировании.

Советы по организации тестов

Для эффективного использования Playwright в проекте важно:

  • Разделить тесты на логические блоки (например, тесты для разных страниц или функциональностей).
  • Использовать вспомогательные функции для повторяющихся действий (например, навигация по странице или заполнение форм).
  • Включить тесты в процесс непрерывной интеграции (CI), чтобы автоматически проверять корректность работы приложения.

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

Оглавление