Відеобібліотека
Пошук у нотатках курсу Python мануфактура та спільних матеріалах з переходом на потрібну секунду.
Автор представляє односторінкову CSS/XPath шпаргалку для подальшого доповнення. Найпростіший CSS-селектор — ім’я tag, наприклад `div`, `script`, `a`, `li` або `form`. Такий запит знаходить усі елементи відповідного tag і зазвичай потребує додаткового звуження. У DevTools search треба відрізняти результати CSS-запиту від звичайного текстового пошуку.
`#search` знаходить елемент з `id="search"`. Довільний attribute записується у квадратних дужках: `[name='viewport']`. Коли значення має стабільну частину та змінний hash, оператор `*=` дає пошук за підрядком. Це корисно для generated attributes у frontend frameworks, але стабільна частина має бути досить специфічною, щоб не отримати кілька збігів.
Елемент за 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 одного елемента можна послідовно додати без пробілів, щоб звузити результат до елемента, який одночасно відповідає всім умовам.
Комбінатор `+` вибирає adjacent sibling: елемент, який розташований одразу після іншого елемента на тому самому DOM-рівні. Це дозволяє знайти input або container відносно стабільного label. Такий локатор залежить від порядку в DOM, тому перед використанням треба перевірити структуру, а не лише візуальне розташування.
Один елемент можна знайти різними еквівалентними способами: ```css #search [id="search"] input#search ``` Якщо простого атрибута недостатньо, умови комбінуються: ```css a.common-btn.primary[href*="new"] ``` `href` часто стабільний, бо відповідає маршруту застосунку. Водночас найкоротший селектор не завжди найкращий: трохи довший вираз може краще пояснювати на code review, яку саме кнопку він описує. Пріоритет — однозначність і читабельність, а не мінімальна кількість символів.
Коли одного класу недостатньо, селектор можна зробити однозначнішим, поєднавши клас з атрибутом посилання: ```css a.login-item[href="/users/sign_in"] ``` Це означає: знайти один елемент `<a>`, який одночасно має клас `login-item` і заданий `href`. Наприкінці уроку пропонується самостійно потренувати пошук інших елементів, але не копіювати довгі згенеровані CSS/XPath-ланцюжки без перевірки їхньої стабільності.