DOM Path Finder ви позволява да задържите курсора над всеки елемент на страницата, за да разкриете неговия уникален CSS селектор, кратък селектор, XPath и готов за поставяне querySelector код. Кликнете, за да заключите елемента, след което навигирайте с бутоните Parent/Child/Sibling. Незаменим за потребители на Selenium, Puppeteer, Playwright и Cypress.
Писането на автоматизирани тестове, web scraper-и или bookmarklet-и означава писане на селектори — но да откриете стабилен, уникален селектор за конкретен елемент е досадна задача. Отваряте DevTools, инспектирате, кликвате с десен бутон, копирате селектора и се надявате резултатът да е наистина уникален и стабилен. DOM Path Finder свежда това до едно кликване. Активирайте инструмента и задръжте курсора над всеки елемент на страницата — той се маркира в лилаво, докато движите курсора. Кликнете, за да го заключите, и панелът се запълва с четири формата на селектор: уникален CSS селектор, базиран на път, кратък селектор (таг + класове или id), абсолютен XPath и предварително обвит фрагмент document.querySelector('...'), готов за поставяне в скрипт. След заключването можете да навигирате в DOM дървото с бутоните Parent / First Child / Prev Sibling / Next Sibling, без да губите фокус. Атрибутите data-testid се засичат и приоритизират, когато присъстват — идеално за Playwright/Cypress, които ги използват като котви. Инструментът също показва таг, id, класове, размер на границите и свойствата display/position за бърз контекст.
Преместете курсора по страницата, за да видите елементите маркирани в лилаво. Кликнете, за да заключите — без нужда от DevTools Inspector.
Уникален CSS път, кратък селектор, абсолютен XPath и обвит querySelector фрагмент. Изберете кой отговаря на вашите инструменти.
След заключване използвайте бутоните Parent / First Child / Prev / Next, за да се придвижвате в DOM без ново избиране.
Всеки селектор има собствен бутон Copy. Вземете формата, от който се нуждае скриптът ви, и го поставете директно в теста или scraper-а.
Показва таг, id, класове, размер, display и position — бърз преглед без ново инспектиране.
Ако елементът има id, уникалният CSS използва #id. Ако присъства data-testid, той се извежда за употреба в Playwright/Cypress.
Изберете тествания елемент, копирайте селектора му и го поставете в кода на теста — без повече гадаене за уникални пътища.
Намерете структурния селектор за елементите в списъка на целевата страница за извличане. Използвайте кратък или базиран на път селектор според нуждите от стабилност.
Заключете елемент и копирайте пътя му, за да проучите защо CSS не се прилага — уникалният селектор показва пълното местоположение на елемента в дървото.
Копирайте предварително обвития фрагмент document.querySelector(...) директно в DevTools Console за бързо интерактивно дебъгване.
При одит на достъпността използвайте XPath, за да подадете елементи към axe-core или други a11y инструменти, които очакват XPath референции.
Кликнете иконата Path Finder в дока на DevSuite Pro. Инструментът се активира веднага в режим на избор.
Преместете курсора по страницата — всеки елемент се маркира в лилаво, докато преминавате над него. Скролирайте при нужда, за да намерите целта си.
Кликнете върху желания елемент. Избирането спира и панелът се запълва с формати на селектори, контекст и бутони за копиране.
Използвайте бутоните Parent/Child/Sibling, за да прецизирате избора, или кликнете Pick Element, за да започнете избиране чрез задържане отново.
Кликнете Copy до нужния ви формат (CSS, XPath или querySelector). Поставете директно в теста, scraper-а или конзолата.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.
