DOM Path Finder вам омогућава да пређете курсором преко било ког елемента на страници да бисте открили његов јединствени CSS селектор, кратки селектор, XPath и спреман querySelector исечак за налепљивање. Кликните да закључате елемент, а затим се крећите помоћу дугмади Parent/Child/Sibling. Незаменљив за кориснике Selenium, Puppeteer, Playwright и Cypress алата.
Писање аутоматизованих тестова, веб 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 инспектором.
Јединствена CSS путања, кратки селектор, апсолутни XPath и умотан querySelector исечак. Изаберите онај који одговара вашим алатима.
Када је елемент закључан, користите дугмад Parent / First Child / Prev / Next за кретање кроз DOM без поновног бирања.
Сваки селектор има своје дугме за копирање. Преузмите формат који вам треба и налепите директно у ваш тест или scraper.
Приказује таг, id, класе, димензије, display и position — брз преглед без поновног инспектовања.
Ако елемент има id, јединствени CSS селектор користи #id. Ако постоји data-testid, он се истиче ради коришћења у Playwright/Cypress тестовима.
Изаберите елемент који тестирате, копирајте његов селектор и налепите у код теста — без нагађања јединствених путања.
Пронађите структурни селектор за ставке листе на циљаном сајту. Користите кратки или селектор заснован на путањи, зависно од потребне стабилности.
Закључајте елемент и копирајте његову путању да истражите зашто се CSS не примењује — јединствени селектор показује потпуну позицију елемента у стаблу.
Копирајте унапред умотан document.querySelector(...) исечак директно у DevTools конзолу за брзо интерактивно дебаговање.
Приликом провере приступачности, користите XPath да проследите елементе у axe-core или друге a11y алате који очекују XPath референце.
Кликните на икону Path Finder у DevSuite Pro доку. Алат се одмах активира у режиму бирања.
Померајте миш преко странице — сваки елемент се истиче љубичасто док прелазите преко њега. Скролујте по потреби да пронађете циљни елемент.
Кликните на жељени елемент. Бирање се зауставља и панел се попуњава форматима селектора, контекстом и дугмадима за копирање.
Користите дугмад Parent/Child/Sibling да прецизирате избор, или кликните Pick Element да поново активирате бирање преласком курсора.
Кликните Copy поред формата који вам треба (CSS, XPath или querySelector). Налепите директно у ваш тест, scraper или конзолу.
Instalirajte DevSuite Pro besplatno i otključajte 64+ alata za programere za svoj pretraživač.
