Playwright 1.59. Першоквітневий жарт чи нове майбутнє?

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Вітаю. З вами Артур !

Playwright релізнув нову версію 1.59. І спочатку я подумав шо це першоквітневий жарт але не — спробувавши фічі трошки пріколовся. Дійсно прикольні штуки, які можна використовувати для більшого контролю та обсервабіліті. Звісно, великий уклон робиться все більше і більше на агентік-девелопмент режим, і команда плейрайту робить все щоб цих агентів можно було все краще і краще контроліровать та перевіряти їх дії. Дуже цікавий напрямок як на мене.

Тож, погнали подивимось шо там вони нам принесли.

🎬 Screencast

Новий API page.screencast надає вам можливості програмно управлять відеозаписом та додатковими повідомленнями під час дії над сторінкою. Наприклад:

• запис відео (screencast recordings)
• анотації дій (action annotations) — хто шо зробив, куда клікнув
• візуальних оверлеїв (visual overlays) — плашка кастомна з текстом там або чимось ще
• захоплення кадрів у реальному часі (real-time frame capture) — ну тут понятно все
• відео-підтверджень від агентів (agentic video receipts) — контролюй шо там твій агент робить краще

Screencast recordings

Це по суті можливість запису відео з точним контролем старту/стопу(шоб не весь тест записувати а наприклад тіки кусочок) як альтернатива recordVideo:

await page.screencast.start({ path: 'video.webm' });
// робимо якусь магію
await page.screencast.stop();

Анотації дій

Оце доволі прікольна штука. Мені сподобалось. Ти можеш включить візуальних анотації того, що саме ти робиш(клік, філл, і тд):

await page.screencast.showActions({ position: 'top-right' });

screencast.showActions() має такі параметри:

• position (top-left, top, top-right, bottom-left, bottom, bottom-right)
• duration (мс на одну анотацію)
• fontSize (px)

Анотації також можна увімкнути через конфіг тестів:

export default defineConfig({
  use: {
    video: {
      mode: 'on',
      show: {
        actions: { position: 'top-left' },
        test: { position: 'top-right' },
      },
    },
  },
});

Візуальні оверлеї

Додавання заголовків розділів і кастомного HTML поверх сторінки:

await page.screencast.showChapter('Додавання Магії', {
  description: 'Клікаю та дивуюсь',
  duration: 1000,
});
await page.screencast.showOverlay('<div style="color: red">ВЕДУ ЗАПИС ДРУЖЕ</div>');

Захоплення кадрів у реальному часі

Стрім JPEG-кадрів для кастомної обробки (thumbnail, live preview, AI vision):

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

Відео-підтвердження від агентів

Агенти можуть створювати відео-доказ виконаної роботи:

await page.screencast.start({ path: 'receipt.webm' });
await page.screencast.showActions({ position: 'top-right' });
await page.screencast.showChapter('Перевірка твого магчного сценарію', {
  description: 'Роблю якусь страшну штуку',
});
await page.locator('#blabla').fill('alohamora');
await page.locator('#stick').click();
await expect(page.locator('.mamamia')).toContainText('сезам отрился');
await page.screencast.showChapter('Готово', {
  description: 'магія успішно виконана',
});
await page.screencast.stop();

Відео-демка як це все виглядає

🔗 Сумісність

Новий API browser.bind() дозволяє підключатися до браузера з різних клієнтів тіпа playwright-cli, @playwright/mcp і т.д.

Стартоні браузер(привʼяжи сессію)

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

Підключення через CLI

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

Підключення через MCP

Підключення через Playwright API

const browser = await chromium.connect(endpoint);

WebSocket режим

const { endpoint } = await browser.bind('my-session', {
  host: 'localhost',
  port: 0,
});

(ендпоінт ws:// URL)

Відв’язка

browser.unbind();

📊 Observability

Команда:

playwright-cli show

відкриває Dashboard:

• показує всі браузери
• дозволяє бачити роботу агентів
• дає доступ до сесій
• дозволяє відкривати DevTools

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

🐛 CLI debugger для агентів

Агент може запустити команду npx playwright test —debug=cli для автоматичного фіксу тестів в агентоному режимі. Шось тіпа:

playwright-cli attach <session-id>
playwright-cli --session <session-id> step-over

і це дозволить покроково дебажити тести.

📋 CLI аналіз trace

Агент може запустити npx playwright trace open trace.zip шоб проаналізіровать трейси та флекі тести.

Можливості:

• перегляд дій
• аналіз помилок
• перегляд snapshot’ів

🔍 Snapshots і Locators

Нові можливості:

• page.ariaSnapshot() — знімок accessibility-дерева
• locator.normalize() — нормалізація локаторів — поверне більш красівий локатор вам
• page.pickLocator() — інтерактивний вибір локатора — запускаєте тест і автоматично інтерактивний режим відркиється де можна поклікати на елементи та обрати то шо вам треба.

🆕 Нові API

Screencast

page.screencast надає можливості:

• запису відео
• стрімінгу кадрів у реальному часі
• керування оверлеями

Методи:

• screencast.start() і screencast.stop() - для запису та захоплення кадрів
• screencast.showActions() і screencast.hideActions() - для анотацій дій
• screencast.showChapter() і screencast.showOverlay() - для візуальних оверлеїв
• screencast.showOverlays() і screencast.hideOverlays() - для керування видимістю оверлеїв

Storage, Console та Errors

• browserContext.setStorageState() — очищає cookies, localStorage та IndexedDB для всіх origin і встановлює новий стан сховища (без необхідності створювати новий контекст)
• page.clearConsoleMessages() і page.clearPageErrors() - очищають збережені повідомлення та помилки
• Опція filter у page.consoleMessages() і page.pageErrors() - визначає, які повідомлення повертати
• consoleMessage.timestamp() — повертає часову мітку повідомлення в мілісекундах

Інше

• browserContext.debugger — програмне керування дебагером Playwright
• browserContext.isClosed() — перевірка, чи закритий контекст
• request.existingResponse() — повертає відповідь без очікування
• response.httpVersion() — повертає HTTP-версію відповіді
• Події cdpSession.on('event') і cdpSession.on('close') - для CDP-сесій
• Опція live у tracing.start() - оновлення трасування в реальному часі
• Опція artifactsDir у browserType.launch() - налаштування директорії для артефактів

🛠️ Інші покращення

• UI Mode отримав опцію показу лише тести, на які вплинули зміни в коді
• UI Mode і Trace Viewer мають покращену фільтрацію дій
• HTML Reporter показує список запусків з одного worker’а
• HTML Reporter дозволяє фільтрувати кроки тестів для швидкого пошуку

Новий режим trace:

• retain-on-failure-and-retries — записує trace для кожного запуску тесту та зберігає всі trace у разі помилки; корисно для порівняння успішного і flaky запуску

⚠️ Breaking Changes

• Видалено підтримку macOS 14 для WebKit. Рекомендується оновити версію macOS або використовувати старішу версію Playwright.
• Видалено пакет @playwright/experimental-ct-svelte.

🌐 Версії браузерів

• Chromium 147.0.7727.15
• Mozilla Firefox 148.0.2
• WebKit 26.4

Ця версія також протестована з наступними стабільними каналами:

• Google Chrome 146
• Microsoft Edge 146

Всім гарного дня, стабільних тестів та буду радий бачити у своїй групі, щоб слідкувати за оновленнями світу розробки та тестування!