Chrome DevTools Recorder
Вбудована Chrome DevTools panel для запису, replay, редагування, import і export user flows у поточній browser session.
4. Playwright плагіни та codegen →Відеобібліотека
Знайди точне пояснення
Пошук у нотатках курсу Python мануфактура та спільних матеріалах з переходом на потрібну секунду.
Терміни, нюанси та джерела
CDPSession
Низькорівневий канал Playwright для надсилання raw Chrome DevTools Protocol methods; доступний лише для Chromium-based browsers.
Як Playwright взаємодіє з браузером через протокол →Recorder panel: Record and measure user flow
Пояснює record, replay, import і export user flows у DevTools.
4. Playwright плагіни та codegen → Першоджерело ↗Діагностувати hydration під Slow 3G
Увімкни Slow 3G у DevTools, одразу взаємодій із видимим control і перевір, чи handler уже підключений. Якщо дія губиться, зафіксуй product-side умову готовності без sleep у тесті.
Проблему відтворено або виключено на сповільненій мережі.
Відокремлено browser load, видимість control і завершення hydration.
Запропоновано disabled state до готовності, якщо handler підключається пізніше.
Зробити Login locator однозначним
Знайти всі збіги тексту Login у DevTools.
Побудувати locator з role/name або стабільним attribute.
Перевірити, що locator знаходить рівно один видимий element.
Дія не потребує .first або випадкового індексу.
Перевірити межі Chrome Recorder export
Записати короткий flow у DevTools Recorder.
Переглянути доступні export formats.
Порівняти JSON/Puppeteer output із Python Codegen output.
Зафіксовано, що built-in Recorder і Playwright Codegen мають різні target formats та use cases.
Як знайти керівний стан у DevTools
Щоб зрозуміти, чому UI різниться, потрібно дивитися не лише на сторінку. У DevTools варто перевірити `Network`, cookies, `localStorage` і `sessionStorage` та знайти дані, які визначають активну компанію або роль. У прикладі різницю задає `companyId`: конкретний ID відкриває корпоративний контекст, а відсутнє значення — free-проєкти. Це дає точну підказку, який стан треба підготувати перед тестом.
Chrome DevTools Recorder
Вбудований Chrome DevTools Recorder записує дії в уже відкритій браузерній сесії. Сценарій можна повторно програти з нормальною або зміненою швидкістю, що корисно і для ручного тестування, і для швидкого заповнення форм. Recorder експортує сценарій переважно в JavaScript-орієнтовані формати. У демонстрації немає прямого Python-експорту, тому отриманий JSON або JavaScript доведеться конвертувати й обов’язково перевіряти. Перевага інструмента — replay у поточній сесії; недолік — це не готовий Python/pytest-тест.
DOM breakpoints і практична перевірка cookies
Альтернативний спосіб — DevTools breakpoint `Break on subtree modifications` на контейнері. Після Save браузер зупиниться на зміні DOM; покрокове продовження дозволяє знайти проміжні стани `Saving` і `Saved` та побудувати locator. Для перевірки cookie тест ставиться на паузу, у DevTools відкривається Application → Cookies, виконується наступний крок і reload. Так видно, що feature flag дійсно додано до правильного домену до того, як на нього покладатиметься assertion.
Пошук за HTML tag
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
Швидкий шлях від DOM до локатора
У браузерних DevTools вмикається режим вибору елемента на сторінці. Після кліку потрібний вузол одразу знаходиться в HTML, де можна перевірити унікальність майбутнього селектора. У прикладі селектор має знаходити рівно один елемент. Ручний процес — скопіювати значення, повернутися в PyCharm і загорнути його в `page.locator(...)` — повторюється багато разів. Це хороший кандидат для локального шаблону: структура виклику стабільна, а змінюється лише селектор.
Навіщо розуміти селектори та DOM
Надійні локатори спрощують не лише написання нового тесту, а й пошук дублювань та рефакторинг наявного набору. Без розуміння HTML одна й та сама кнопка швидко отримує кілька різних локаторів у різних тестах. DOM розглядається як дерево. Кореневий `<html>` містить `<head>` і `<body>`, а вкладені елементи утворюють гілки на різних рівнях. DevTools дає змогу розгортати й згортати ці гілки та бачити, до якого блоку належить потрібний елемент.
Playwright Locator Assistant
Locator Assistant дає змогу вибрати елемент на сторінці й отримати варіант Python-локатора, наприклад `get_by_role(...)` або `get_by_text(..., exact=True)`. Інструмент може допомогти згадати синтаксис, але взаємодія не завжди зручна: вибір елемента потрібно щоразу запускати заново, підсвічування може бути неочевидним, а вбудована перевірка іноді не знаходить елемент, для якого сам плагін щойно згенерував локатор. Результат слід вставити в DevTools або тест і перевірити незалежно.
Accessibility tree, локалізація і стабільність атрибутів
Chrome DevTools дозволяє подивитися accessibility tree й accessible name, навіть якщо значення неочевидне з HTML. Текстові locators зручні, доки labels, placeholders і переклади стабільні. Для багатомовного продукту або content, який окремо змінює контент-команда, стабільний `data-testid` часто кращий. Атрибути можуть рендеритися по-різному залежно від frontend framework, а generated classes та IDs змінюватися між builds, тому вибір залежить від реального контракту команди.
Перевіряємо готовність, а не ідеальність анімації
Не потрібно перевіряти кожен кадр анімації. Достатньо спостережуваного переходу: loader зник, skeleton замінився карткою, назва продукту видима, критична дія доступна. Уповільнення мережі в DevTools допомагає знайти реальні проміжні стани й вибрати правильний сигнал. Підсумкове правило: `isLoaded` описує те, що користувач очікує побачити перед продовженням роботи, і те, без чого тест не може виконувати наступну дію стабільно.
Дії, browser protocol і порівняння з WebDriver
[Дивитися з 09:10](https://www.youtube.com/watch?v=6QdvE9DHOIY&t=550s). Для `click`, `dblclick`, `fill`, evaluate та інших actions у команду входять target locator, parent frame і options. Browser-side automation layer виконує пошук у правильному контексті та повертає результат або error. На прикладі Chromium автор пояснює роль Chrome DevTools Protocol і показує інструмент командного рядка, який також керує browser через локальний service. Для порівняння Selenium client зазвичай спілкується з browser-specific WebDriver через W3C WebDriver protocol, а driver уже координує browser. В обох випадках test code не клікає DOM напряму: між ним і browser є protocol та процес, що виконує команди.