javascript

Вышел Playwright 1.59: как тестировщикам с пользой применить каждую новую фичу

  • среда, 15 апреля 2026 г. в 00:00:10
https://habr.com/ru/articles/1022960/

Playwright 1.59 — не очередное инкрементальное обновление. Это заявка на то, куда движется автоматизация тестирования, и это направление глубоко агентное. Если вы ждали, когда инструменты догонят AI-driven воркфлоу, о которых все говорят, этот релиз закрывает разрыв.

Разберём каждую крупную фичу и, что важнее, как каждую из них можно применить немедленно.

🎬 Screencast API: тесты теперь показывают, что делают

Главная фича релиза — новый page.screencast API. Это не просто запись видео под новым именем. Это единый интерфейс для захвата происходящего на странице с встроенным контекстом.

Что нового

API даёт пять возможностей в одном месте: запись скринкастов с контролем start/stop, аннотации действий с подсветкой элементов, визуальные оверлеи для заголовков глав и кастомного HTML, захват кадров в реальном времени для стриминга JPEG-фреймов во внешние инструменты, и агентные видео-квитанции как визуальное подтверждение автоматизированной работы.

Как это использовать

Замените ненадёжные скриншоты при падении на целевые скринкасты. Вместо одного замороженного кадра в момент поломки оберните критичные флоу в запись скринкаста:

await page.screencast.start({ path: 'checkout-flow.webm' });
await page.screencast.showActions({ position: 'top-right' });
// Шаги теста оформления заказа
await page.locator('#add-to-cart').click();
await page.locator('#checkout').click();
await expect(page.locator('.order-confirmation')).toBeVisible();
await page.screencast.stop();

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

Используйте главы для длинных E2E-флоу. Если тест покрывает весь путь пользователя (логин, просмотр, корзина, оформление, подтверждение), главы позволяют сегментировать запись:

await page.screencast.showChapter('Authentication', {
  description: 'Logging in with test credentials',
  duration: 1000,
});
// шаги логина...

await page.screencast.showChapter('Product Selection', {
  description: 'Adding items to cart',
  duration: 1000,
});
// шаги покупки...

Когда вы или стейкхолдер просматриваете видео, главы работают как оглавление. Больше не нужно перематывать 45-секундное видео в поисках момента, где всё пошло не так.

Передавайте кадры в AI vision модели. Колбэк onFrame открывает категорию тестирования, которая раньше была неудобной: визуальная валидация через AI.

await page.screencast.start({
  onFrame: ({ data }) => sendToVisionModel(data),
  size: { width: 800, height: 600 },
});

Так можно построить тест, который отвечает на вопрос «эта страница выглядит сломанной?» без пиксельных скриншотных ассертов.

Собирайте агентные видео-квитанции для CI. Если вы запускаете AI-генерацию тестов или self-healing тесты, агент теперь может создать видео-прохождение с комментариями того, что именно он сделал:

await page.screencast.start({ path: 'receipt.webm' });
await page.screencast.showActions({ position: 'top-right' });
await page.screencast.showChapter('Verifying checkout flow', {
  description: 'Added coupon code support per ticket #1234',
});
await page.locator('#coupon').fill('SAVE20');
await page.locator('#apply-coupon').click();
await expect(page.locator('.discount')).toContainText('20%');
await page.screencast.showChapter('Done', {
  description: 'Coupon applied, discount reflected in total',
});
await page.screencast.stop();

Такое видео просматривается быстрее, чем текстовые логи. Прикрепите к артефактам CI — стейкхолдеры, которые никогда не прочитают лог теста, точно посмотрят 30-секундное аннотированное видео.

🔗 Browser Bind API: один браузер, несколько клиентов

Новый browser.bind() API позволяет сделать работающий браузер доступным для нескольких клиентов одновременно: playwright-cli, @playwright/mcp или других потребителей Playwright API.

Что нового

Можно привязать браузерную сессию с именем, а затем подключиться к ней откуда угодно:

const { endpoint } = await browser.bind('my-session', {
  workspaceDir: '/my/project',
});

Из CLI:

playwright-cli attach my-session
playwright-cli -s my-session snapshot

Из MCP-сервера:

@playwright/mcp --endpoint=my-session

Несколько клиентов могут подключаться одновременно. Привязка через WebSocket поддерживается через параметры host и port.

Как это использовать

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

Шаринг состояния браузера между инструментами. Настройте аутентификацию в одном клиенте, затем подключитесь из другого для запуска тестов в авторизованной сессии. Это убирает оверхед «залогиниться заново» при переключении между ручным исследованием и автоматизированным тестированием.

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

📊 Dashboard: наблюдение за агентами

Запустите playwright-cli show, чтобы открыть дашборд со списком всех привязанных браузеров, их статусами и возможностью взаимодействия.

Как это использовать

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

Включение в ежедневный воркфлоу. Установите переменную окружения PLAYWRIGHT_DASHBOARD=1, чтобы видеть все браузеры @playwright/test в дашборде. Локальные запуски тестов превращаются в нечто, что можно наблюдать и дебажить визуально, вместо чтения терминального вывода.

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

🐛 CLI Debugger для агентов: --debug=cli

Кодинг-агенты теперь могут запустить npx playwright test --debug=cli для подключения и отладки тестов через playwright-cli. Это сделано специально для агентных воркфлоу, где AI чинит падающие тесты.

Как это использовать

Пошаговая отладка через AI-агента. Когда тест ломается, агент может подключиться к дебаггеру, пройти тест строка за строкой, инспектировать состояние страницы на каждом шаге и разобраться в проблеме — полностью из командной строки, без GUI.

$ npx playwright test --debug=cli
### Debugging Instructions
- Run "playwright-cli attach tw-87b59e" to attach to this test

$ playwright-cli attach tw-87b59e
$ playwright-cli --session tw-87b59e step-over

Self-healing тестовые пайплайны. Скомбинируйте --debug=cli с healer-агентом из npx playwright init-agents. Когда тест падает в CI, healer может подключиться через CLI debug, понять причину падения и предложить фикс, без участия человека.

📋 CLI Trace Analysis: трейсы без GUI

Агенты теперь могут запустить npx playwright trace для анализа Playwright Traces прямо из командной строки.

Как это использовать

Анализ падений в headless CI-окружениях. Больше не нужно скачивать trace-файлы и открывать их в браузере. Агент (или скрипт) может распарсить трейс, извлечь нужную информацию и либо починить тест, либо создать детальный баг-репорт.

Интеграция трейс-данных в пайплайн отчётности. Извлекайте тайминги, сетевые запросы и последовательности действий из трейсов программно. Стройте кастомные дашборды или передавайте данные в инструмент тестовой аналитики.

Полный цикл

Вот где 1.59 раскрывается по-настоящему, когда все фичи объединяются в единый воркфлоу:

  1. Запуск тестов с PLAYWRIGHT_DASHBOARD=1 для визуального мониторинга.

  2. При падении теста healer-агент подключается через --debug=cli.

  3. Агент анализирует трейс через npx playwright trace.

  4. Чинит тест и запускает заново.

  5. Записывает скринкаст-квитанцию прошедшего теста с аннотациями глав.

  6. Видео-квитанция прикрепляется к артефактам CI для ревью человеком.

Это тот самый маховик автоматизации тестирования, который включает Playwright 1.59. Тестировщик сдвигается с позиции «пишет и дебажит тесты» на позицию «проверяет доказательства от агента и принимает стратегические решения по покрытию».

Кому это полезнее всего

QA Lead и SDET, строящие фреймворки автоматизации: Screencast API и Browser Bind дают инфраструктурные возможности, которые раньше приходилось писать самим.

Команды, использующие AI-assisted тестирование: CLI-дебаггер и анализ трейсов спроектированы специально для агентных воркфлоу.

Все, кто мучается с диагностикой падений тестов: скринкаст-записи с аннотациями действий заменяют игру в угадывание «что случилось?» визуальными доказательствами.

Стейкхолдеры, которые не читают тестовые отчёты: 30-секундное аннотированное видео стоит тысячи строк лога.

Как начать

Обновитесь до Playwright 1.59:

npm install -D @playwright/test@latest
npx playwright install

Начните со Screencast API — у него самый низкий порог входа и самый высокий немедленный эффект. Запишите самый критичный E2E-флоу, добавьте несколько маркеров глав, включите аннотации действий и покажите видео команде. После первой реакции захочется инструментировать всё остальное.

Затем исследуйте browser.bind() и дашборд. Эти фичи фундаментально меняют взаимодействие с тестовой инфраструктурой: от пассивного чтения логов к активному наблюдению и вмешательству в работающие тесты.

Будущее тестирования — наблюдаемое, объяснимое и визуальное. Playwright 1.59 сделал это будущее доступным уже сейчас.

Подписывайтесь на наш Telegram-канал. Там мы публикуем полезные подборки от инженеров и делимся инсайтами.