CDPSession
Низькорівневий канал Playwright для надсилання raw Chrome DevTools Protocol methods; доступний лише для Chromium-based browsers.
Як Playwright взаємодіє з браузером через протокол →Відеобібліотека
Знайди точне пояснення
Пошук у нотатках курсу Java з переходом на потрібну секунду.
Терміни, нюанси та джерела
Діагностувати hydration під Slow 3G
Увімкни Slow 3G у DevTools, одразу взаємодій із видимим control і перевір, чи handler уже підключений. Якщо дія губиться, зафіксуй product-side умову готовності без sleep у тесті.
Проблему відтворено або виключено на сповільненій мережі.
Відокремлено browser load, видимість control і завершення hydration.
Запропоновано disabled state до готовності, якщо handler підключається пізніше.
Що змінилося після запису
У підсумку відео звучить широке формулювання, що Playwright працює через DevTools protocol.
Raw CDPSession у public API підтримується лише для Chromium-based browsers; це формулювання не можна узагальнювати на Firefox і WebKit.
Як знайти керівний стан у DevTools
Щоб зрозуміти, чому UI різниться, потрібно дивитися не лише на сторінку. У DevTools варто перевірити `Network`, cookies, `localStorage` і `sessionStorage` та знайти дані, які визначають активну компанію або роль. У прикладі різницю задає `companyId`: конкретний ID відкриває корпоративний контекст, а відсутнє значення — free-проєкти. Це дає точну підказку, який стан треба підготувати перед тестом.
Пошук за HTML tag
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
HTML-структура та основи селекторів
Перед автоматизацією сценарій треба пройти вручну з відкритими DevTools. HTML — це мова розмітки, де документ складається з елементів, тегів, атрибутів і їхніх значень. Для пошуку елементів використовуються `id`, `name`, стабільні `data-*` атрибути, CSS або XPath. У відео перевага надається компактним CSS-селекторам; XPath залишається для випадків, де CSS не виражає потрібний зв’язок.
Network analysis: cookies, forms і redirects
Відео досліджує login flow у DevTools: initial cookies, form fields, origin/referer, anti-CSRF values, `302` redirects і callback. Це корисно для debugging та розуміння state machine. Але browser login scraping крихкий: UI form, cookies, CAPTCHA і hidden fields можуть змінитися без API notice. Для production test client треба використати supported OAuth/OIDC library і documented endpoints, а не копіювати browser internals.
Що тестувати і де знайти contract
Дані, які бачить користувач, приходять з backend services, тому UI scenario часто можна розкласти на більш швидкі API checks. Спочатку треба з’ясувати API maturity: чи є specification, чи вона актуальна, як frontend реально викликає endpoints. Якщо documentation немає або їй не можна довіряти, browser DevTools/Network дає фактичні URL, method, headers, payload і response. Це джерело для discovery, але не заміна погодженого contract.
Дослідження API, frontend і авторизації
Перед автоматизацією API потрібно дослідити, як із ним працює frontend. Network tab дає фактичні requests навіть тоді, коли документації немає або вона застаріла. На прикладі sign-in показано `POST` зі status `302`, що може свідчити про Backend for Frontend або gateway із власною логікою. Форма відправляє email, password, ознаку remember me і authenticity token. Якщо API не має окремого login endpoint, автотест може завантажити HTML, витягнути токен і відтворити `application/x-www-form-urlencoded` request. У відео натомість використовується задокументований API token/login flow. Автор окремо показує, що payload може бути form data або JSON.
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 та процес, що виконує команди.
Введення даних і кліки
Для текстового поля Selenide може одразу викликати `setValue(...)`: окремий попередній click зазвичай не потрібен. CSS-селектори та текстові значення передаються як Java `String` у подвійних лапках. Для checkbox і submit button застосовується `click()`, а атрибут можна вибрати через `[name='value']`. DevTools має підтвердити, що селектор знаходить саме очікуваний елемент і бажано лише один раз.