Огляд інструментів, які записують браузерні дії та генерують Playwright-локатори або код: сторонні Chrome extensions, офіційний Playwright Codegen і Chrome DevTools Recorder. Головний висновок — генератори прискорюють старт, але їхній результат потрібно перевіряти й спрощувати вручну.
Після цього уроку ви зможете
Пояснити різницю між стороннім browser extension, Playwright Codegen і Chrome DevTools Recorder.
Запустити playwright codegen, записати короткий flow і вибрати Python/pytest target.
Згенерувати locator або assertion через Inspector та перевірити його у власному test.
Розпізнати generated code, який ігнорує DOM context, accessibility або project conventions.
Замість ручного написання кожного кроку можна спробувати browser extensions, які записують дії та експортують код. У Chrome Web Store є кілька інструментів: Playwright CRX, recorder-плагіни, locator assistants і генератори.
Playwright CRX у демонстрації працює нестабільно: sidebar відкривається, але запис падає або зависає після взаємодії зі сторінкою. Плагін підтримує різні формати експорту, зокрема Python/pytest, але сам факт наявності формату не гарантує працездатного сценарію. Якщо інструмент поводиться так само нестабільно локально, його краще видалити, а не будувати на ньому процес.
Locator Assistant дає змогу вибрати елемент на сторінці й отримати варіант Python-локатора, наприклад get_by_role(...) або get_by_text(..., exact=True).
Інструмент може допомогти згадати синтаксис, але взаємодія не завжди зручна: вибір елемента потрібно щоразу запускати заново, підсвічування може бути неочевидним, а вбудована перевірка іноді не знаходить елемент, для якого сам плагін щойно згенерував локатор. Результат слід вставити в DevTools або тест і перевірити незалежно.
Інший recorder записує кроки login-сценарію та дозволяє обрати мову експорту. Згенерований приклад містить goto, fill і click, але не враховує дубльовані #content-mobile та #content-desktop блоки на сторінці Testomat.io. Через це локатор поля може знайти кілька вузлів і впасти у strict mode.
Генератор бачить окрему дію, але не обов’язково розуміє контекст DOM або усталену архітектуру тестів. Код є чернеткою, а не готовим тестом.
Уточнення
Generated code — лише draft
Recorder не знає командного locator contract і може пропустити responsive duplicates або accessible semantics. Кожен generated locator та assertion потрібно переглянути й запустити.
Плагін, що аналізує всю сторінку, швидко створює десятки локаторів і методів. У демонстрації результат надмірний: зайві imports, асинхронний API, складні обгортки та невдалі перевірки на кшталт is_element_visible.
Статична перевірка видимості дає гіршу діагностику й не використовує автоматичне очікування Playwright. Для тесту краще залишати дії простими, а очікуваний стан виражати через expect. Велика кількість автоматично згенерованого коду збільшує обсяг підтримки, не гарантуючи стабільності.
Відкриваються окремий браузер і вікно Playwright Inspector. У меню target потрібно обрати Python і pytest. Після цього навігація, заповнення полів та кліки записуються як Python-код.
Офіційний Codegen стабільніший за перевірені сторонні extensions, але його локатори теж не завжди оптимальні. Наприклад, вони можуть бути задовгими або не враховувати доменні домовленості про data-testid.
Що змінилося після запису
Codegen нині пріоритезує role, text і test id
АктуальноПоточний Playwright Codegen намагається вибрати resilient locator, пріоритезуючи role, text і test id, та уточнює locator, якщо match не унікальний. Generated result усе одно потребує review.
Перевірено 2026-07-31
Термін
Playwright Codegen
Офіційний test generator, який відкриває browser і Playwright Inspector, записує actions та пропонує locators і assertions.
Приклад коду
Запуск офіційного Codegen
playwright codegen https://testomat.io
Відкриває browser та Inspector для запису flow; target Python/pytest обирається в Inspector.
Очікуваний результат: Відкриваються browser і Inspector, а interactions з’являються як generated code.
У Codegen можна перемкнутися з повного запису на Pick Locator і вибирати окремі елементи. Режими assertions генерують перевірки видимості, тексту або значення:
```python expect(page.get_by_text("Invalid email or password")).to_be_visible() ```
або перевірки вмісту контейнера через to_contain_text. Практичний цикл: записати короткий сценарій, скопіювати код у PyCharm, запустити його, а потім прибрати зайві дії та виправити локатори. Саме так автор свого часу використовував recorder для вивчення Playwright API.
Термін
Pick Locator
Режим Inspector для вибору element, preview locator, ручного refinement і копіювання locator у code.
Термін
generated assertion
Перевірка видимості, тексту або значення, яку Codegen додає через Inspector; вона залишається чернеткою до review і test run.
Практика
Порівняти recorder output із ручним locator
Записати login flow через Codegen без реальних credentials.
Скопіювати generated code у окремий draft test.
Перевірити кожен locator у DevTools.
Прибрати redundant clicks і замінити ambiguous selectors.
Результат: Фінальний draft коротший за generated output і не містить personal data.
Вбудований Chrome DevTools Recorder записує дії в уже відкритій браузерній сесії. Сценарій можна повторно програти з нормальною або зміненою швидкістю, що корисно і для ручного тестування, і для швидкого заповнення форм.
Recorder експортує сценарій переважно в JavaScript-орієнтовані формати. У демонстрації немає прямого Python-експорту, тому отриманий JSON або JavaScript доведеться конвертувати й обов’язково перевіряти. Перевага інструмента — replay у поточній сесії; недолік — це не готовий Python/pytest-тест.
Що змінилося після запису
Built-in Chrome Recorder export залишається не-Python орієнтованим
АктуальноПоточна Chrome documentation перелічує JSON і Puppeteer-oriented built-in formats; інші formats можуть додаватися Recorder extensions. Прямий built-in Python/pytest export не заявлено.
Перевірено 2026-07-31
Термін
Chrome DevTools Recorder
Вбудована Chrome DevTools panel для запису, replay, редагування, import і export user flows у поточній browser session.
Практика
Перевірити межі Chrome Recorder export
Записати короткий flow у DevTools Recorder.
Переглянути доступні export formats.
Порівняти JSON/Puppeteer output із Python Codegen output.
Результат: Зафіксовано, що built-in Recorder і Playwright Codegen мають різні target formats та use cases.
Під час експерименту на іншому сайті Codegen розпізнає взаємодію всередині iframe і генерує відповідний frame locator. Це ще один аргумент на користь офіційного інструмента як стартової точки.
Підсумок уроку: для Python найпрактичнішим із перевірених варіантів є Playwright Codegen. Сторонні extensions можна досліджувати, але вони нестабільні або генерують зайву структуру. Будь-який recorder допомагає отримати початкові локатори та кроки, проте завершений тест усе одно потребує ручної перевірки, читабельних assertions і локаторів, узгоджених із реальною DOM-структурою.