Робота з селекторами XPATH

XPATH – це дуже потужний тип селектора, що надає ширший функціонал порівняно з простішими селекторами CSS і MATCH (охоплює їх можливості + додатково пропонує власні конструкції).

Спадковість елементів

В XPATH спадковість елементів вказується за допомогою використання подвійного та одинарного слешу:

• Подвійний слеш //: Використовується для пошуку елементів у будь-якому місці документа, незалежно від їхнього розташування відносно поточного елемента. Це означає, що за допомогою подвійного слешу можна знайти елементи не тільки в середині батьківського елемента, але й глибоко вглиб дерева елементів документа.
• Одинарний слеш /: Використовується для пошуку елементів, що знаходяться безпосередньо в середині батьківського елемента. Це означає, що за допомогою одинарного слешу можна звертатися лише до прямих нащадків поточного елемента у його вузлі DOM.

Створення XPATH-селекторів

Пошук за тегом: Наприклад, //div знайде всі елементи <div> на сторінці.

Пошук за класом або ідентифікатором: Наприклад, //div[@class='example'] знайде всі елементи <div> з класом “example”.

Комбінований пошук: Можна комбінувати різні умови, наприклад, //div[@class='example']//p знайде всі елементи <p>, що знаходяться всередині елементів <div> з класом “example”.

Пошук за текстом: Наприклад, //*[text()='Привіт'] знайде всі елементи з текстом “Привіт” (між відкриттям і закриттям тегу). Наприклад: <span>Привіт</span>

Додаткові конструкції

Ви можете комбінувати умови за допомогою операторів “and”, “or” і “not”. Наприклад:

• //div[@class='example' and @id='demo'] – знайде всі елементи <div> з класом “example” і ідентифікатором “demo”.
• //div[@class='example' or @id='demo'] – знайде всі елементи <div> з класом “example” або ідентифікатором “demo”.
• //div[not(@class='example')] – знайде всі елементи <div>, які не мають класу “example”.

Функція “contains” дозволяє знайти елементи, які містять певний текст у своєму вмісті. Наприклад:

• //div[contains(text(), 'Привіт')] – знайде всі елементи <div>, всередині яких хоча б 1 раз зустрічається слово “Привіт”.

Важлива примітка: Один і той самий селектор можна записати двома способами: @class='container' або contains(@class,'container'). Але між цими способами є важлива різниця:

• @class='container': Цей вираз знаходить елементи, у яких атрибут class має точно визначене значення “container” і нічого більше.
• contains(@class,'container'): Цей вираз знаходить елементи, у яких атрибут class містить підстроку “container”, незалежно від того, чи є там ще якийсь текст, чи ні.

Ви можете використовувати числові значення для вибору конкретного елемента за його позицією. Наприклад:

• (//div[@class='example'])[1] – знайде перший елемент <div> з класом “example”.

Ви можете комбінувати різні умови разом для складних виборів елементів. Наприклад:

• //div[contains(@class, 'container') and not(@id='sidebar')] – знайде всі елементи <div> з класом, що містить “container”, але не мають ідентифікатора “sidebar”.

Пам’ятайте:

При створенні складних XPATH-селекторів важливо використовувати дужки для явного визначення порядку операцій (та і просто для власної зручності). Особливо, коли ви комбінуєте різні умови за допомогою логічних операторів, таких як “and”, “or”, “not”.