Selectors Level 4
Є нормативним джерелом синтаксису CSS selectors та attribute matching.
3. Селектори та пошук елементів → Першоджерело ↗Відеобібліотека
Знайди точне пояснення
Пошук у нотатках курсу Python мануфактура та спільних матеріалах з переходом на потрібну секунду.
Терміни, нюанси та джерела
Вибір mobile automation strategy
Оберіть один власний mobile flow і визначте, що має перевірятися на backend, native component та system E2E levels.
Складіть мінімальну device matrix із поясненням кожного device та OS version.
Назвіть accessibility attributes, яких бракує для стабільних selectors.
Односторінкова strategy з test levels, device matrix і переліком testability changes.
Порівняти recorder output із ручним locator
Записати login flow через Codegen без реальних credentials.
Скопіювати generated code у окремий draft test.
Перевірити кожен locator у DevTools.
Прибрати redundant clicks і замінити ambiguous selectors.
Фінальний draft коротший за generated output і не містить personal data.
Classes і комбінування ознак
Елемент за 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.
Пошук за HTML tag
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
Навіщо розуміти селектори та DOM
Надійні локатори спрощують не лише написання нового тесту, а й пошук дублювань та рефакторинг наявного набору. Без розуміння HTML одна й та сама кнопка швидко отримує кілька різних локаторів у різних тестах. DOM розглядається як дерево. Кореневий `<html>` містить `<head>` і `<body>`, а вкладені елементи утворюють гілки на різних рівнях. DevTools дає змогу розгортати й згортати ці гілки та бачити, до якого блоку належить потрібний елемент.
Інкапсуляція та automation objects
Інкапсуляція ховає складну реалізацію за невеликою public operation. У тестовому проєкті це API clients, database helpers, Page Objects і data objects. Зовнішньому коду важливо знати, яку дію викликати, а не повторювати connection setup, headers, selectors або permission checks.
`id`, attributes і частковий збіг
`#search` знаходить елемент з `id="search"`. Довільний attribute записується у квадратних дужках: `[name='viewport']`. Коли значення має стабільну частину та змінний hash, оператор `*=` дає пошук за підрядком. Це корисно для generated attributes у frontend frameworks, але стабільна частина має бути досить специфічною, щоб не отримати кілька збігів.
Новий сценарій: логін і пошук проєкту
Створюється тест, який авторизується в застосунку й шукає проєкт «Python Manufacture». Спочатку кроки пишуться прямо в тесті: відкрити сторінку входу, заповнити email і пароль, натиснути Sign in, знайти поле пошуку. Паралельно досліджується DOM: візуальна фільтрація не обов’язково видаляє непотрібні картки — застосунок може лише приховувати їх через CSS. Через це перевірка має враховувати не тільки наявність вузла в DOM, а й його видимість.
Playwright Locator Assistant
Locator Assistant дає змогу вибрати елемент на сторінці й отримати варіант Python-локатора, наприклад `get_by_role(...)` або `get_by_text(..., exact=True)`. Інструмент може допомогти згадати синтаксис, але взаємодія не завжди зручна: вибір елемента потрібно щоразу запускати заново, підсвічування може бути неочевидним, а вбудована перевірка іноді не знаходить елемент, для якого сам плагін щойно згенерував локатор. Результат слід вставити в DevTools або тест і перевірити незалежно.
Швидкий шлях від DOM до локатора
У браузерних DevTools вмикається режим вибору елемента на сторінці. Після кліку потрібний вузол одразу знаходиться в HTML, де можна перевірити унікальність майбутнього селектора. У прикладі селектор має знаходити рівно один елемент. Ручний процес — скопіювати значення, повернутися в PyCharm і загорнути його в `page.locator(...)` — повторюється багато разів. Це хороший кандидат для локального шаблону: структура виклику стабільна, а змінюється лише селектор.
Native tests і внесок у testability
Для важливих або частих перевірок радиться розглянути native інструменти: XCTest/XCUITest на iOS та Espresso або зручнішу обгортку Kakao на Android. Такі тести ближчі до застосунку, швидше виконуються і зрозуміліші mobile developers, які можуть запускати їх локально та в CI. Автоматизатор має покращувати testability самого продукту: додавати або просити додати стабільні `accessibilityIdentifier`, `accessibilityLabel`, Android `resource-id` і content descriptions. Native selectors, predicates і class chains зазвичай кращі за XPath. Якщо команда контролює source code, стабільний атрибут дешевший за постійне ускладнення locator-а в зовнішньому test suite.
Descendants, direct children і кілька attributes
Пробіл між двома CSS-селекторами знаходить descendant на будь-якій глибині. `>` обмежує пошук direct child на наступному рівні DOM. Кілька attributes одного елемента можна послідовно додати без пробілів, щоб звузити результат до елемента, який одночасно відповідає всім умовам.