A DOM Path Finderrel az oldal bármely elem fölé húzott egérrel felfedheti annak egyedi CSS-szelektorát, rövid szelektorát, XPath-ját és egy beillesztésre kész querySelector-részletet. Kattintson a rögzítéshez, majd navigáljon a Szülő/Gyermek/Testvér gombokkal. Nélkülözhetetlen Selenium, Puppeteer, Playwright és Cypress felhasználóknak.
Automatizált tesztek, webscraperek vagy bookmarkletek írásakor szelektorokat kell írni — de egy adott elemhez stabil, egyedi szelektort találni fárasztó feladat. Megnyitja a DevToolst, megvizsgálja, jobb klikk, szelektor másolása, és reménykedik, hogy az eredmény valóban egyedi és stabil. A DOM Path Finder ezt egyetlen kattintássá egyszerűsíti. Aktiválja az eszközt, és húzza az egeret bármely elem fölé az oldalon — az elem lila kiemeléssel jelenik meg mozgás közben. Kattintson a rögzítéshez, és a panel megtelik négy szelektorformátummal: egy egyedi útvonal alapú CSS-szelektorral, egy rövid szelektorral (tag + osztályok vagy id), egy abszolút XPath-tal, és egy előre becsomagolt document.querySelector('...') részlettel, amely készen áll a szkriptbe illesztésre. Rögzítés után a DOM-fában navigálhat a Szülő / Első gyermek / Előző testvér / Következő testvér gombokkal a fókusz elvesztése nélkül. A data-testid attribútumokat az eszköz felismeri és előnyben részesíti, ha jelen vannak — ideális azoknak, akik Playwrightben vagy Cypressben ezeket használják horgonyként. Az eszköz emellett megjeleníti a taget, id-t, osztályokat, méretet és a display/position tulajdonságokat gyors kontextusként.
Mozgassa az egeret az oldal fölé, hogy lila kiemeléssel lássa az elemeket. Kattintson a rögzítéshez — nincs szükség DevTools Inspectorra.
Egyedi CSS útvonal, rövid szelektor, abszolút XPath és becsomagolt querySelector részlet. Válassza ki, ami az Ön eszközkészletéhez illik.
Rögzítés után a Szülő / Első gyermek / Előző / Következő gombokkal mozoghat a DOM-ban újbóli kijelölés nélkül.
Minden szelektornak saját Másolás gombja van. Vegye ki a szkriptjéhez szükséges formátumot, és illessze be közvetlenül a tesztjébe vagy scraperébe.
Megjeleníti a taget, id-t, osztályokat, méretet, displayt és positiont — gyors áttekintés újbóli vizsgálat nélkül.
Ha az elemnek van id-je, az egyedi CSS a #id-t használja. Ha van data-testid attribútum, az is megjelenik Playwright/Cypress használatra.
Jelölje ki a tesztelt elemet, másolja ki a szelektorát, és illessze be a tesztkódjába — nincs több találgatás az egyedi útvonalakkal kapcsolatban.
Keresse meg a listaelemek strukturális szelektorát egy scraping célponton. Használjon rövid vagy útvonal alapú szelektort a stabilitási igényektől függően.
Rögzítsen egy elemet, és másolja ki az útvonalát, hogy kiderítse, miért nem érvényesül a CSS — az egyedi szelektor megmutatja az elem teljes helyét a fában.
Másolja ki az előre becsomagolt document.querySelector(...) részletet közvetlenül a DevTools konzolba a gyors, interaktív hibakereséshez.
Akadálymentességi audit során használja az XPath-ot elemek axe-core vagy más akadálymentességi eszközök számára történő megadásához, amelyek XPath-hivatkozásokat várnak.
Kattintson a Path Finder ikonra a DevSuite Pro dokkban. Az eszköz azonnal kijelölő módban aktiválódik.
Mozgassa az egeret az oldal fölé — minden elem lila kiemelést kap, amikor áthalad felette. Görgessen szükség szerint a célelem megtalálásához.
Kattintson a kívánt elemre. A kijelölés leáll, és a panel megtelik szelektorformátumokkal, kontextussal és másoló gombokkal.
Használja a Szülő/Gyermek/Testvér gombokat a kijelölés finomításához, vagy kattintson az Elem kiválasztására a hover-kijelölés újraindításához.
Kattintson a Másolás gombra a kívánt formátum mellett (CSS, XPath vagy querySelector). Illessze be közvetlenül a tesztjébe, scraperébe vagy a konzolba.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
