Відеобібліотека
Пошук у нотатках курсу Python мануфактура та спільних матеріалах з переходом на потрібну секунду.
Знайдіть у власному тесті інтерактивний елемент, який зараз шукається за CSS-класом або вкладеною структурою.
Перевірте його role та accessible name у Accessibility Tree.
Замініть локатор на get_by_role(..., name=...) і запустіть цільовий тест.
Локатор однозначно знаходить потрібний елемент, а тест проходить без nth(), first або прив’язки до CSS оформлення.
CSS selector, який відбирає elements за наявністю або значенням attribute, включно з exact і substring matching operators.
3. Селектори та пошук елементів →Порівнює id shorthand, substring match і комбінування tag, classes та attribute.
Кожен selector знаходить лише intended element у відповідному DOM fixture.
3. Селектори та пошук елементів →Є нормативним джерелом синтаксису CSS selectors та attribute matching.
3. Селектори та пошук елементів → Першоджерело ↗Вибрати одну важливу дію в UI.
Написати user-facing locator, test id locator і короткий CSS fallback.
Змінити translation та experiment variant.
Обрати найстабільніший locator і зафіксувати його contract.
Обраний locator залишається однозначним у контрольованих variants, а причина вибору описана одним абзацом.
HTML-вузол має тег, атрибути та вкладений вміст. Атрибут `class` може містити кілька класів, розділених пробілами. CSS надає короткий синтаксис: ```css #search /* елемент з id="search" */ .demo /* елемент із класом demo */ input#search /* input з id="search" */ ``` Текстові локатори краще будувати засобами Playwright, а не намагатися кодувати складний пошук тексту в CSS.
Один елемент можна знайти різними еквівалентними способами: ```css #search [id="search"] input#search ``` Якщо простого атрибута недостатньо, умови комбінуються: ```css a.common-btn.primary[href*="new"] ``` `href` часто стабільний, бо відповідає маршруту застосунку. Водночас найкоротший селектор не завжди найкращий: трохи довший вираз може краще пояснювати на code review, яку саме кнопку він описує. Пріоритет — однозначність і читабельність, а не мінімальна кількість символів.
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
За стандартом `id` має бути унікальним, але деякі frontend-фреймворки генерують до стабільної частини випадковий суфікс. Повне значення такого `id` може змінитися після нового deployment або навіть між сесіями. CSS дозволяє шукати за точним значенням або за стабільним фрагментом: ```css [id="sort-block-123"] [id*="sort-block"] [class*="text-area"] ``` Оператор `*=` означає «атрибут містить цей текст». Частковий збіг має бути достатньо специфічним, інакше локатор знайде кілька елементів.
Тест відкриває URL через `driver.get(config.url)`, знаходить поля email і password та вводить значення через `send_keys()`. Кнопка входу знаходиться за CSS-селектором з атрибутом `value`, після чого викликається `click()`. На відміну від Playwright locators, у Selenium базовими операціями є `find_element()` і `find_elements()`. Перша повертає перший знайдений елемент або кидає `NoSuchElementException`, друга — колекцію всіх збігів. Якщо селектор неунікальний, `find_element()` може мовчки обрати не той вузол, тому локатор треба перевіряти на реальній сторінці. Тип пошуку задається явно, наприклад `By.CSS_SELECTOR`. Якщо CSS-селектор усередині Python-рядка містить подвійні лапки, зовнішній рядок зручніше обгорнути одинарними, щоб не псувати синтаксис зайвим escaping.
Якщо стабільного test ID або accessible name немає, припустимий короткий CSS selector через зрозумілий parent і тип дочірнього елемента. Locator повинен читатися; складний вираз варто сховати за змінною з предметною назвою. Не слід використовувати generated hashes, випадкові class names, positional indexes або повні DOM paths. Якщо ID має стабільний префікс і випадковий suffix, можна шукати за контрольованим частковим збігом.
Коли одного класу недостатньо, селектор можна зробити однозначнішим, поєднавши клас з атрибутом посилання: ```css a.login-item[href="/users/sign_in"] ``` Це означає: знайти один елемент `<a>`, який одночасно має клас `login-item` і заданий `href`. Наприкінці уроку пропонується самостійно потренувати пошук інших елементів, але не копіювати довгі згенеровані CSS/XPath-ланцюжки без перевірки їхньої стабільності.
Елемент за class шукається через `.class-name` або attribute selector на кшталт `[class*='class-name']`. Два classes одного елемента записуються без пробілу: `.first.second`. Tag та `id` або attribute також можна комбінувати, наприклад `turbo-frame#global_search_results`. Якщо attribute value містить пробіл або спеціальні символи, його треба брати в лапки. У Java-рядку single quotes всередині CSS зменшують кількість escaping.
Пробіл між двома CSS-селекторами знаходить descendant на будь-якій глибині. `>` обмежує пошук direct child на наступному рівні DOM. Кілька attributes одного елемента можна послідовно додати без пробілів, щоб звузити результат до елемента, який одночасно відповідає всім умовам.
CSS-селектори залишаються основним варіантом. XPath потрібен у Selenium для окремих випадків пошуку за текстом або зв’язком parent/child, але швидко ускладнюється: видимий текст може бути розбитий між кількома DOM-вузлами. Стійкі `data-testid`, `id` або `name` краще узгодити з frontend-командою, ніж будувати крихкий XPath навколо layout. Це не «деталь тестів», а тестований контракт між UI та автоматизацією. Рекомендований у відео компроміс: Page Object зберігає locator tuples, а спільні `click`/`type` helpers автоматично чекають релевантний стан. Поряд із цим кожен тест повинен відновлювати потрібний стан, бо локальний success не гарантує стабільність у повному suite.