Тестирование E2E с Playwright: автоматизация сложных сценариев

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

Почему Playwright?

Playwright это фреймворк от Microsoft, который за последние годы стал золотым стандартом в автоматизации E2E. Вот его ключевые преимущества:

• Поддержка всех современных браузеров: Chromium, Firefox, WebKit.
• Высокая скорость выполнения тестов благодаря параллелизму и отсутствию зависимостей от WebDriver.
• Встроенные моки и перехват сетевых запросов.
• Кросс-платформенность: работает на Windows, macOS, Linux.

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

Работа с моками: как имитировать API и базы данных

Моки (mock) это заглушки, которые заменяют реальные сервисы во время тестирования. Они нужны, чтобы:

1. Изолировать тесты от внешних зависимостей.
2. Эмулировать ошибки сервера или медленные ответы.
3. Тестировать edge-кейсы (например, пустые ответы API).

Пример: мокинг API-запроса

Допустим, мы тестируем страницу профиля пользователя, которая загружает данные через API /api/user. Вот как подменить реальный ответ:

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

test('Загрузка профиля с моком API', async ({ page }) => {
  // Перехватываем запрос к API
  await page.route('**/api/user', async route => {
    // Возвращаем кастомный JSON
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        name: 'Иван Иванов',
        email: 'test@example.com'
      }),
    });
  });

  await page.goto('https://yourapp.com/profile');
  await expect(page.getByText('Иван Иванов')).toBeVisible();
});

Что здесь происходит:

• page.route() перехватывает запросы, соответствующие паттерну **/api/user.
• route.fulfill() возвращает кастомный ответ, минуя реальный сервер.

Имитация ошибок сервера

Чтобы проверить, как приложение реагирует на 500-е ошибки:

await page.route('**/api/products', async route => {
  await route.fulfill({
    status: 500,
    body: 'Internal Server Error',
  });
});

Скриншоты: автоматизация визуального тестирования

Визуальное тестирование это сверка интерфейса с эталонным изображением. Playwright делает это в 3 шага:

1. Создание эталона: await expect(page).toHaveScreenshot('reference.png');
2. Сравнение: При повторном запуске фреймворк автоматически сравнит текущий скриншот с сохраненным.
3. Анализ отклонений: Playwright подсветит различия и сохранит артефакты.

Настройка гибких скриншотов

Чтобы игнорировать динамические элементы (например, таймеры), используйте маски:

await expect(page).toHaveScreenshot({
  mask: [page.locator('.timer')],
  maxDiffPixels: 100, // Допустимое количество пикселей для различий
});

Совет: Для CI/CD настройте артефакты — сохраняйте скриншоты при падении тестов:

test.afterEach(async ({ page }, testInfo) => {
  if (testInfo.status === 'failed') {
    await page.screenshot({ path: `screenshots/${testInfo.title}.png` });
  }
});

Кросс-браузерное тестирование

Playwright позволяет запускать тесты на Chromium, Firefox и WebKit без изменения кода. Вот как настроить конфигурацию:

В playwright.config.ts:

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

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

npx playwright test --workers 3

Сравнение производительности

Рекомендации:

• Для ускорения CI используйте Chromium как основной браузер, а Firefox и WebKit — для регрессионных проверок.
• Если тест падает только в WebKit, проверьте поддержку CSS-свойств или API.

Playwright или Cypress или Selenium: что выбрать?

Приведу субъективное сравнение (основано на опыте 20+ проектов):

Вывод: Playwright лучший выбор для сложных E2E-сценариев, особенно если нужна бесплатная кросс-браузерность и моки. Cypress подходит для небольших проектов с упором на разработчика, Selenium — для легаси-систем.

Рекомендации для разработчиков

1. Избегайте жестких таймаутов. Вместо page.waitForTimeout(5000) используйте:
   typescript

   await page.waitForSelector('.element', { state: 'visible', timeout: 10000 });

2. Используйте Page Object Model для удобства поддержки:
   typescript

   class LoginPage {
     constructor(private page: Page) {}
     username = this.page.locator('#username');
     password = this.page.locator('#password');
     async login(user: string, pass: string) {
       await this.username.fill(user);
       await this.password.fill(pass);
     }
   }

3. Тестируйте мобильные устройства через эмуляцию:
   typescript

   await page.emulateMedia({ colorScheme: 'dark' });
   await page.emulateVisionDeficiency('blurredVision');

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

Если у вас есть вопросы или хотите поделиться своим опытом, то пишите в комментариях.