♨️ HOT стрім #18 🚀 огляд 1.59 Playwright

Огляд нових функцій у релізі Playwright 1.59 (та 1.59.1)

1. Розширені можливості скрінкастів (Screencast)

• Назва: Програмний контроль запису скрінкастів.
• Опис: Нова API дозволяє запускати (startScreencast) та зупиняти (stopScreencast) запис відео безпосередньо в коді тесту, а не з моменту запуску браузера.
• Приклад використання: Запис можна обмежити лише критичними діями, пропускаючи довгі пре-кондишени.
• Важливість: Скорочує розмір артефактів, полегшує аналіз падінь, дозволяє інтегрувати запис у складні сценарії (наприклад, створення відео для баг-репорту у момент падіння кроку).

2. Анотації дій на відео (Action Annotations)

• Назва: Візуальні підписи дій на записах скрінкастів.
• Опис: Під час запису відео тепер можна вмикати накладення тексту, яке показує, яку дію виконує тест (клік, введення тексту тощо). Також можна додавати власні HTML-анотації (overlay).
• Приклад використання: Під час скрінкасту відображаються спливаючі підказки, наприклад, "click 'Submit'".
• Важливість: Робить відеозаписи набагато інформативнішими, що спрощує дебагінг для інженерів, які не знайомі з кодом. Підписи можна інтегрувати з іменами методів page object.

3. Захват кадрів у реальному часі (Real-Time Frame Capture)

• Назва: Callback для отримання кадрів відео під час їх генерації.
• Опис: Нова функція дозволяє отримувати кадри скрінкасту в реальному часі та передавати їх у callback-функцію для подальшої обробки.
• Приклад використання: Стрімінг кадрів у AI-модель для миттєвого візуального аналізу або порівняння з еталоном.
• Важливість: Відкриває широкі можливості для інтеграції з AI (computer vision, автоматичний аналіз стану UI) та створення інтерактивних дашбордів для моніторингу паралельних тестів.

4. Прив'язка браузера для зовнішніх клієнтів (Browser Bind)

• Назва: Можливість підключитися до запущеного браузера.
• Опис: Метод browser.bind() робить запущений екземпляр браузера доступним для підключення зовнішніх інструментів через WebSocket або named pipe (наприклад, Playwright CLI, MCP-клієнти, AI-агенти).
• Приклад використання: AI-агент може підключитися до браузера під час виконання тесту, щоб допомогти в аналізі або виконати додаткові дії.
• Важливість: Дозволяє створювати потужні сценарії спільної роботи "людина-скрипт-AI" в одному сеансі браузера, спрощує інтеграцію з інструментами на основі AI.

5. Покращена CLI утиліта playwright show

• Назва: Інтерактивний перегляд сесій браузера.
• Опис: Нова команда playwright show (або npx playwright@latest show) відкриває UI, де можна переглядати всі активні сесії браузера, запущені через Playwright, і взаємодіяти з ними.
• Приклад використання: Моніторинг тестів, що виконуються у фоновому режимі, або скреперів.
• Важливість: Надає зручний інструмент для налагодження та спостереження за паралельними процесами.

6. Генерація трейсів для AI (playwright trace)

• Назва: Трейси, оптимізовані для аналізу AI.
• Опис: Нова команда playwright trace генерує артефакт трейсу, багатий на контекст (скріншоти, мережеві запити, дії), який можна передавати AI-агентам для аналізу падінь та генерації фіксів.
• Приклад використання: AI-агент отримує ZIP-архів трейсу, щоб зрозуміти контекст падіння тесту та запропонувати виправлення.
• Важливість: Надає AI-системам набагато більше інформації, ніж просто скріншот чи лог, що підвищує ефективність автоматичного виправлення тестів.

7. Синтаксис using для автоматичного управління ресурсами

• Назва: Автоматичне звільнення ресурсів.
• Опис: Підтримка нового синтаксису using у JavaScript, який автоматично викликає метод [Symbol.dispose]() об'єкта при виході з блоку коду. Багато API Playwright тепер повертають такі disposable об'єкти.
• Приклад використання: using response = await page.request.get(...) - після виходу з блоку ресурс автоматично очиститься.
• Важливість: Спрощує управління ресурсами, запобігає витокам пам'яті, аналогічно with у Python або using у C#.

8. Покращення для локаторів (locator)

• Назва: Інтерактивний вибір та оптимізація локаторів.
• Опис:
  • .pickLocator(): Запускає інтерактивний режим у браузері для вибору елемента та отримання його локатора під час виконання тесту.
  • .optimize(): Намагається автоматично покращити селектор локатора, зробивши його надійнішим.
• Приклад використання: Виклик locator.pickLocator() у коді для паузи тесту та вибору елемента курсором.
• Важливість: Пришвидшує процес написання та налагодження тестів, допомагає створювати стабільніші селектори.

9. Нові методи для роботи зі станом сховища та консоллю

• Назва: Динамічне оновлення стану сховища та очищення консолі.
• Опис:
  • browserContext.setStorageState(): Дозволяє змінити cookies, localStorage, sessionStorage вже існуючого контексту (раніше можна було задати тільки при створенні).
  • page.consoleMessages() та page.clearConsole(): Нові методи для отримання списку повідомлень консолі та її очищення.
• Приклад використання: Швидке перемикання між тестовими користувачами без перезапуску браузера.
• Важливість: Підвищує гнучкість тестів, дозволяє ефективніше тестувати сценарії з різними користувачами та перевіряти логи консолі.

10. Покращення UI Mode та Trace Viewer

• Назва: Фільтрація тестів за змінами та збереження трейсів.
• Опис:
  • UI Mode: З'явилася опція "Show only affected tests", яка фільтрує тести, показуючи лише ті, на які вплинули зміни у вихідному коді (порівнює з git).
  • Trace Viewer: Новий режим retain-on-failure зберігає трейси як для провалених, так і для успішних спроб запуску тесту (ретраїв).
• Приклад використання: У UI Mode видно лише тести, які були змінені після останнього коміту.
• Важливість: Значно покращує developer experience, допомагає швидко ізолювати проблеми та аналізувати різницю між успішними та невдалими виконаннями.

11. Programmable Debugger API

• Назва: API для програмного керування дебагером.
• Опис: З'явився новий API, який дозволяє через код керувати виконанням тесту в дебагері (зупиняти, робити кроки тощо).
• Приклад використання: Інтеграція з AI-системами для покрокового аналізу виконання тесту.
• Важливість: Відкриває можливості для створення складних налагоджувальних інструментів та інтеграцій.

12. Інші покращення та виправлення

• Метод page.snapshot() для зняття повного знімка сторінки (швидший доступ, ніж через page.locator('body')).
• Підтримка macOS 14.
• Видалення експериментальної підтримки Component Testing.
• Виправлення помилок (наприклад, приховання консольного вікна).

Загальний висновок: Реліз 1.59 зосереджений на трьох ключових напрямках: надання потужних інструментів для інтеграції з AI (скрінкасти, трейси, прив'язка браузера), значне покращення developer experience (UI Mode, нові API) та оновлення мовних можливостей (синтаксис using). Це демонструє активний розвиток Playwright як інструменту номер один для сучасної веб-автоматизації.