XPath Helper це браузерне розширення, яке показує XPath-запит для будь-якого елемента сторінки без відкриття панелі розробника. Інструмент народився з відкритого проєкту xpaf на Google Code. Звідти й пішла базова механіка з консоллю нагорі сторінки та підсвіченням елемента під курсором миші. За роки на основі цього коду зʼявилися десятки клонів з майже однаковою назвою, різними розробниками, різною політикою оновлень і подекуди навіть різним набором прав доступу до сторінки. Плутанина між оригіналом і форками стала окремою проблемою для тих, хто просто шукає робочий інструмент для щоденних задач, а не хоче витрачати вечір на порівняння карток у крамниці розширень.
Що таке XPath Helper і навіщо він потрібен
Головне завдання розширення просте: навести курсор на елемент сторінки і одразу отримати рядок XPath, який його однозначно визначає. Це економить час порівняно з ручним написанням запиту через вкладку Elements у DevTools, де доводиться копіювати шлях по частинах і перевіряти кожен рівень вкладеності окремо. Автоматизаторам, тестувальникам на Selenium і Playwright, а також розробникам скраперів доводиться щодня звіряти локатори з реальною розміткою сторінки. Саме тут невеликий інструмент показує свою практичну цінність, адже позбавляє від рутинного переключення між вкладками браузера. Для новачків у тестуванні це ще й спосіб швидко зрозуміти, як саме побудована розмітка сторінки, без потреби вручну розбирати кожен рівень вкладеності елементів.
Як розширення генерує запит під курсором
Після встановлення на сторінці зʼявляється гаряча клавіша, зазвичай Ctrl Shift X, яка відкриває вузьку консоль угорі вікна. Досить утримувати Shift і водити мишею по елементах. У лівому полі консолі рядок XPath оновлюється в реальному часі. Праворуч показуються результати запиту разом із кількістю знайдених вузлів у документі. Запит можна редагувати вручну прямо в консолі, і результати одразу перерахуються під новий текст без перезавантаження сторінки. Панель консолі можна відсунути вбік, якщо вона перекриває потрібну частину інтерфейсу сайту.
Встановлення і перший запуск у Chrome
Розширення встановлюється зі сторінки Chrome Web Store через кнопку додавання. Після встановлення потрібно перезавантажити вже відкриті вкладки або перезапустити браузер повністю. Це не забаганка розробника, а особливість архітектури content scripts, які не підключаються до сторінок, завантажених ще до встановлення розширення. Іконка зʼявляється у панелі розширень праворуч від адресного рядка. Клік по ній відкриває або закриває консоль так само, як і поєднання клавіш на клавіатурі. Якщо іконка сірого кольору й не реагує на клік одразу після встановлення, це майже завжди означає, що відкриту вкладку сайту ще не перезавантажили після встановлення.
Пастка з тегом tbody у таблицях
Один нюанс регулярно збиває з пантелику новачків у автоматизації тестування. Коли Chrome рендерить елемент table, він додає в DOM неявний тег tbody, навіть якщо його немає у вихідному HTML коді сторінки. XPath Helper бачить уже готове дерево DOM після рендерингу, тому в згенерованому запиті цей тег теж зʼявляється поруч з іншими вузлами. Якщо скопійований локатор вставити в тестовий фреймворк і запустити проти вихідного HTML без браузерного рендерингу, запит просто не знайде елемент. Причину такої розбіжності варто пам’ятати заздалегідь, бо інакше пошук помилки в скрипті займе набагато більше часу, ніж написання самого тесту.
Плутанина назв на Chrome Web Store
Пошук у крамниці розширень видає одразу кілька продуктів з майже ідентичною назвою від різних розробників, і це не випадковість. Ідентифікатор колишньої класичної сторінки XPath Helper зараз належить розширенню під назвою XPath Tester. Новий власник офіційно описує свій продукт як незалежний форк відкритого проєкту xpaf і прямо зазначає у описі, що не повʼязаний з іншими XPath-розширеннями в крамниці. Оригінальна назва в певний момент звільнилася, і на неї заявили права інші команди розробників. Перед встановленням варто дивитися не лише на назву, а й на кількість користувачів, дату останнього оновлення та опис від розробника у картці розширення.
Коли інструмент справді корисний для Selenium і Playwright
У щоденній роботі тестувальника типовий сценарій виглядає так. Відкрити сторінку, навести курсор на кнопку чи поле форми, скопіювати запропонований XPath і одразу вставити його в тестовий скрипт. Для простих статичних елементів такий шлях працює швидко і без зайвих кроків. Складніше з динамічним контентом, коли розмітка сторінки змінюється після кожного оновлення чи A/B тесту. Згенерований абсолютний шлях ламається при найменшій зміні структури батьківських елементів, тому команди QA часто доопрацьовують такий локатор вручну перед тим, як додати його в репозиторій тестів.
Обмеження розширення, про які варто знати
XPath Helper генерує здебільшого абсолютний шлях від кореня документа. Це не короткий відносний запит за атрибутами на кшталт id чи data-testid, який набагато стійкіший до змін верстки. Абсолютна адресація робить локатори крихкими: одна вставлена або видалена обгортка в розмітці ламає весь ланцюжок запиту. Розширення також не вміє записувати послідовність дій користувача і не генерує CSS-селектори. Для складніших сценаріїв автоматизації доводиться підключати додаткові інструменти або редагувати запит вручну після копіювання.
Альтернативи з ширшим набором функцій
ChroPath і SelectorsHub пропонують не лише абсолютний, а й відносний XPath, а також CSS-селектори з підсвіченням усіх збігів одразу кількома кольорами на сторінці. SelectorsHub додатково вміє генерувати локатори для сучасних фреймворків, зокрема Playwright і Cypress, а не лише для класичного Selenium WebDriver. Вибір між інструментами зазвичай залежить від задачі. Якщо достатньо швидкого абсолютного шляху для одноразової перевірки, простий інструмент виграє за швидкістю. Якщо потрібна стабільніша відносна адресація для довготривалого набору тестів, варто одразу братися за складніший інструмент. Різниця стає особливо відчутною в проєктах, де фронтенд оновлюється щотижня, а тестовий набір налічує сотні сценаріїв, і кожен зламаний локатор означає години на діагностику замість реальної розробки.
| Інструмент | Тип XPath | CSS-селектор |
|---|---|---|
| XPath Helper | абсолютний | ні |
| ChroPath | абсолютний і відносний | так |
| SelectorsHub | абсолютний і відносний | так |
Приватність і права доступу розширення
Класична версія розширення не збирає й не передає дані на зовнішні сервери. Уся обробка XPath-запитів відбувається локально в браузері користувача без звернень до стороннього API. Права доступу, які запитує розширення при встановленні, стосуються читання вмісту відкритої вкладки. Без цього права консоль просто не змогла б підсвічувати елементи на сторінці чи рахувати кількість збігів. Перед встановленням будь-якого форка варто перевірити розділ про приватність на сторінці крамниці. Різні збірки під схожими назвами можуть відрізнятися політикою обробки даних, і сліпо довіряти назві тут не варто. У картці розширення в крамниці зазвичай видно окремий пункт про те, чи продають дані третім сторонам, чи використовують їх для визначення кредитоспроможності користувача, і цей пункт вартий кількох секунд перевірки перед встановленням.
Базовий синтаксис XPath для тих, хто тільки починає
Запит виду
//div[@class=”card”]
знаходить усі елементи div з точним значенням атрибута class. Подвійний слеш на початку означає пошук по всьому документу серед вузлів будь-якого рівня вкладеності. Функція contains дозволяє шукати частковий збіг у тексті чи атрибуті. Наприклад, //button[contains(text(), “Купити”)] знайде кнопку незалежно від зайвих пробілів навколо тексту всередині елемента. Індекс у квадратних дужках після назви тега, скажімо //li[3], вказує на третій елемент списку серед однакових сусідів на тому самому рівні. Ці кілька конструкцій закривають більшість практичних задач без глибокого занурення в повну специфікацію XPath 1.0.
Для щоденної роботи з локаторами XPath Helper лишається зручним стартовим інструментом завдяки простоті використання. Він не вимагає навчання і одразу показує результат прямо під курсором миші. Для проєктів із частими змінами розмітки варто дивитися в бік відносних селекторів і інструментів на кшталт SelectorsHub, які менше ламаються після оновлень фронтенду. Вибір конкретного розширення зрештою залежить від масштабу проєкту і від того, як часто змінюється верстка сайту, з яким доводиться працювати.
