Не публікуйте дані робочого проєкту
Перед запитанням або прикладом приберіть domains, secrets, персональні дані й identifiers зі screenshots, HTML та endpoint fragments.
Практика курсу на YOY, домашні завдання та формат ПМП →Відеобібліотека
Знайди точне пояснення
Пошук у нотатках курсу Java з переходом на потрібну секунду.
Терміни, нюанси та джерела
HTML-структура та основи селекторів
Перед автоматизацією сценарій треба пройти вручну з відкритими DevTools. HTML — це мова розмітки, де документ складається з елементів, тегів, атрибутів і їхніх значень. Для пошуку елементів використовуються `id`, `name`, стабільні `data-*` атрибути, CSS або XPath. У відео перевага надається компактним CSS-селекторам; XPath залишається для випадків, де CSS не виражає потрібний зв’язок.
AI sidebar і робота з HTML-контекстом
Ще один експеримент — sidebar, який об’єднує кілька LLM interfaces і передає їм виділений на сторінці текст або HTML fragment. Для automation engineer це скорочує шлях від inspect element до prompt: можна вибрати DOM block і попросити запропонувати locator або page object. Це не замінює перевірку selector-а. Згенерований варіант треба оцінити за semantics, uniqueness і stability у реальному DOM, але інструмент прибирає кілька механічних copy/paste дій.
Пошук за HTML tag
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
Консольний звіт і робота з підказками
До тестового запуску підключається розширення текстового звіту Selenide. Воно виводить у консоль таблицю дій, їхній статус і час виконання; для поточної навчальної задачі такого звіту достатньо, щоб бачити, на якій команді зупинився тест і скільки вона тривала. Selenide також може зберігати скріншот і HTML сторінки після помилки. Ці артефакти доповнюють консольний звіт: скріншот показує видимий стан, а HTML допомагає перевірити фактичну структуру й атрибути елементів. Під час написання нового тесту Full Line completion пропонує продовження на основі наявного проєкту. Викладач радить залишити стандартні налаштування, користуватися запропонованим shortcut і за потреби приймати лише відповідну частину підказки, а не весь рядок.
AI як помічник для конкретного selector
HTML конкретного елемента можна передати моделі й попросити locator для Playwright або Selenium, уточнивши правила про allowed attributes і partial match. Це швидше за вивчення синтаксису складного XPath, але результат треба перевірити на сторінці. Ще надійніше — мати read access до frontend source, знайти компонент і додати стабільний атрибут у тому самому delivery process.
Підсумок і практика іменування
Заняття підсумовує перехід від простого KISS-тесту, доповненого YAGNI, DRY і DAMP, до Page Object-структури з очікуваннями та двома способами перевірок: очікувати значення безпосередньо в об'єкті сторінки або повернути дані в тест для окремого порівняння. Для іменування класів, методів, змінних і тестів радять використовувати терміни, уже закладені розробниками: назви з URL, HTML та мережевих запитів, а також фактичні дії користувача. Наступні тести пропонується одразу писати через Page Object і вдосконалювати назви практикою.
План заняття і задача з iframe
Заняття охоплює AI-підказки коду, звіти й скріншоти Selenide, fluent interface, Application object та налаштування `Configuration`. Практичний сценарій — відкрити проєкт у Testomat.io, перейти до README, увімкнути редагування, змінити текст у редакторі та зберегти його. Редактор вбудований через `iframe`, тобто містить окремий HTML-документ. Selenium і Selenide не починають автоматично виконувати команди всередині такого документа: як і для нової вкладки або alert, потрібно спочатку перемкнути контекст, а після роботи повернутися до зовнішньої сторінки.
Звідки брати назву Page Object
Першим джерелом назви сторінки є route: кореневий шлях підказує home page, а змістовний path — конкретний екран. Якщо це SPA або URL не змінюється, наступним джерелом стає видима назва сторінки: `h1`, `h2`, title чи інший семантичний заголовок. Коли framework генерує сторінку переважно з `div`, треба орієнтуватися на мову продукту та стабільні атрибути DOM. Мета — щоб назва в automation-коді відповідала тому, як екран уже називають користувачі й розробники.
Дослідження 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.
Навіщо потрібні колекції елементів
Колекція потрібна, коли один конкретний елемент складно знайти напряму або коли однакову перевірку треба виконати для групи елементів. Практичний підхід — знайти всі відповідні елементи, відфільтрувати їх за критерієм і далі працювати з результатом. Selenide за замовчуванням працює з колекцією динамічно: під час наступної перевірки він може знову виконати пошук за селектором, а не покладатися на раз назавжди зафіксований список DOM-вузлів. У демонстрації розглядаються варіанти пошуку всіх елементів, зокрема `$$` і `$$x`; для XPath є окремий короткий запис. Пошук колекції варто починати зі структури HTML: визначити контейнер і повторювані елементи на кшталт `ul` та `li`. Семантичні теги полегшують читання сторінки не лише тесту, а й accessibility-інструментам; якщо селектор неминуче неочевидний, йому дають предметну назву.