Nevermind

Новое поколение E2E-тестирования: руководство по Playwright

3 мин

1. Трудности сквозного тестирования

Сквозные тесты (End-to-End, E2E) — последняя линия защиты качества приложения. Они имитируют действия реального пользователя — нажатия, ввод и переходы — и проверяют, что весь сценарий приложения работает без сбоев. Однако E2E-тесты известны своей «хрупкостью» и «нестабильностью»:

  • Асинхронность: во время выполнения сценария элементы DOM могут ещё не загрузиться, из-за чего тест завершается ошибкой. Разработчикам приходится вручную добавлять множество wait и sleep, а тесты становятся ненадёжными.
  • Кроссбраузерная совместимость: добиться стабильного выполнения тестов во всех основных браузерах — Chrome, Firefox и Safari — очень трудно.
  • Сложная отладка: когда тест падает в среде CI/CD, воспроизвести и найти проблему сложно из-за отсутствия снимков состояния и сетевых журналов.

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

2. Что такое Playwright?

Playwright — разработанная Microsoft библиотека Node.js для автоматизации браузеров Chromium (Chrome и Edge), Firefox и WebKit (Safari). Её создали ключевые участники команды, которая ранее разработала Google Puppeteer. Playwright можно считать духовным наследником Puppeteer, но с более современным и мощным устройством.

3. Основные преимущества Playwright

a. Настоящее кроссбраузерное тестирование

Это самое заметное преимущество Playwright. Единый API позволяет писать тесты для всех трёх основных браузерных движков. Благодаря этому легко находить и исправлять ошибки, которые проявляются только в определённом браузере, например Safari.

b. Автоматическое ожидание (Auto-Waits)

Playwright решает проблему асинхронности на фундаментальном уровне. Перед выполнением действия, например page.click(), он автоматически проводит ряд проверок доступности элемента для взаимодействия:

  • Ждёт появления элемента в DOM.
  • Ждёт, пока элемент станет видимым.
  • Ждёт, пока анимация перестанет перекрывать элемент.
  • Ждёт, пока элемент сможет принимать события.

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

c. Мощные сопутствующие инструменты

  • Codegen (генератор кода): революционная возможность. Можно выполнить pnpm exec playwright codegen example.com, и Playwright откроет окно браузера. Все действия в нём будут автоматически записаны и преобразованы в код теста. Это значительно снижает порог входа в E2E-тестирование.

  • Trace Viewer (просмотр трассировки): «машина времени» Playwright. При падении теста можно создать полный файл трассировки. Открыв его в Trace Viewer, можно:

    • Просмотреть снимок DOM на каждом шаге теста.
    • Просмотреть полный журнал сетевых запросов.
    • Просмотреть сообщения и ошибки console.
    • Перемещаться по временной шкале и наглядно видеть, как страница менялась до и после каждого действия.

Благодаря этому отлаживать падения в CI стало проще, чем когда-либо.

4. Простой пример теста

API Playwright устроен очень понятно.

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

test('页面应有正确的标题', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 断言页面的 title 包含 "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('点击 "Get started" 链接应跳转到介绍页', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 通过角色和名称定位并点击链接
  await page.getByRole('link', { name: 'Get started' }).click();

  // 断言 URL 包含 "intro"
  await expect(page).toHaveURL(/.*intro/);
});

Заключение

Благодаря превосходной кроссбраузерной поддержке, надёжному автоматическому ожиданию и непревзойдённым средствам отладки — особенно Trace Viewer — Playwright устанавливает новый стандарт E2E-тестирования современных Web-приложений. Он не только повышает стабильность и надёжность тестов, но и значительно улучшает процесс их написания с помощью таких средств, как Codegen. Если вашему проекту нужен современный и мощный инструмент автоматизации тестирования, Playwright определённо заслуживает места среди основных кандидатов.

Testing Playwright E2E Automation