DOM Path Finder дозволяє навести курсор на будь-який елемент сторінки, щоб побачити його унікальний CSS-селектор, короткий селектор, XPath і готовий до вставки фрагмент querySelector. Клацніть, щоб закріпити елемент, а потім переміщуйтеся кнопками «Батьківський/Дочірній/Сусідній». Незамінний для тих, хто працює з Selenium, Puppeteer, Playwright та Cypress.
Написання автоматизованих тестів, веб-скраперів чи букмарклетів означає написання селекторів — а підібрати стабільний, унікальний селектор для конкретного елемента буває виснажливо. Ви відкриваєте DevTools, оглядаєте елемент, клацаєте правою кнопкою, копіюєте селектор і сподіваєтеся, що результат справді унікальний і стабільний. DOM Path Finder зводить це до одного кліка. Активуйте інструмент і наведіть курсор на будь-який елемент сторінки — під час руху він підсвічується фіолетовим. Клацніть, щоб закріпити його, і панель заповниться чотирма форматами селекторів: унікальним CSS-селектором на основі шляху, коротким селектором (тег + класи або id), абсолютним XPath і готовим фрагментом document.querySelector('...'), який можна одразу вставити у скрипт. Після закріплення можна переміщуватися по дереву DOM кнопками «Батьківський / Перший дочірній / Попередній сусідній / Наступний сусідній», не втрачаючи фокус. Атрибути data-testid виявляються та отримують пріоритет, якщо присутні — ідеально для тих, хто використовує Playwright/Cypress з такими прив'язками. Інструмент також показує тег, id, класи, розміри та властивості display/position для швидкого контексту.
Проведіть курсором по сторінці, щоб побачити фіолетову підсвітку елементів. Клацніть, щоб закріпити — DevTools Inspector не потрібен.
Унікальний CSS-шлях, короткий селектор, абсолютний XPath і обгорнутий фрагмент querySelector. Виберіть той, що підходить під ваші інструменти.
Після закріплення використовуйте кнопки «Батьківський / Перший дочірній / Попередній / Наступний», щоб рухатися по DOM без повторного вибору.
Кожен селектор має власну кнопку копіювання. Візьміть потрібний скрипту формат і вставте прямо в тест або скрапер.
Показує тег, id, класи, розмір, display і position — швидкий огляд без повторного інспектування.
Якщо елемент має id, унікальний CSS-селектор використовує #id. Якщо присутній data-testid, він виводиться окремо для Playwright/Cypress.
Виберіть елемент, що тестується, скопіюйте його селектор і вставте у код тесту — більше не потрібно вгадувати унікальні шляхи.
Знайдіть структурний селектор для елементів списку на цільовій сторінці. Використовуйте короткий або шлях-селектор залежно від потреб у стабільності.
Закріпіть елемент і скопіюйте його шлях, щоб з'ясувати, чому CSS не застосовується — унікальний селектор показує повне розташування елемента в дереві.
Скопіюйте готовий фрагмент document.querySelector(...) прямо в консоль DevTools для швидкого інтерактивного налагодження.
Під час аудиту доступності використовуйте XPath, щоб передати елементи в axe-core чи інші інструменти a11y, які очікують посилання XPath.
Натисніть іконку Path Finder у боковій панелі DevSuite Pro. Інструмент одразу активується в режимі вибору.
Проведіть курсором по сторінці — кожен елемент підсвічується фіолетовим під час наведення. За потреби прокрутіть, щоб знайти потрібну ціль.
Клацніть на потрібному елементі. Вибір зупиняється, і панель заповнюється форматами селекторів, контекстом і кнопками копіювання.
Використайте кнопки «Батьківський/Дочірній/Сусідній», щоб уточнити вибір, або натисніть «Вибрати елемент», щоб почати вибір наведенням заново.
Натисніть «Копіювати» біля потрібного формату (CSS, XPath або querySelector). Вставте прямо у тест, скрапер чи консоль.
Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника
