DOM Path Finder võimaldab liikuda mistahes elemendi kohale, et paljastada selle unikaalne CSS-selektor, lühike selektor, XPath ja kopeerimisvalmis querySelector-lõik. Klõpsa elemendi lukustamiseks ja liigu seejärel Parent/Child/Sibling nuppudega. Hädavajalik Selenium, Puppeteer, Playwright ja Cypressi kasutajatele.
Automatiseeritud testide, veebikaabitsate või bookmarklettide kirjutamine tähendab selektorite kirjutamist — kuid stabiilse ja unikaalse selektori leidmine konkreetse elemendi jaoks on tüütu. Avad DevToolsi, inspekteerid, teed paremklõpsu, kopeerid selektori ja loodad, et tulemus on tegelikult unikaalne ja stabiilne. DOM Path Finder muudab selle üheks klõpsuks. Aktiveeri tööriist ja liigu hiirega mistahes elemendi kohale — see tõstetakse liikumisel lillaga esile. Klõpsa lukustamiseks ja paneel täitub nelja selektorivormingu: unikaalse tee-põhise CSS-selektori, lühikese selektori (tag + klassid või id), absoluutse XPathi ning valmis document.querySelector('...') lõiguga, mis on skripti kleepimiseks valmis. Kui element on lukustatud, saad liikuda DOM-puus Parent / First Child / Prev Sibling / Next Sibling nuppudega fookust kaotamata. Data-testid atribuudid tuvastatakse ja seatakse esikohale, kui need on olemas — ideaalne Playwright/Cypressi kasutajatele, kes kasutavad neid ankrutena. Tööriist näitab ka silti, id-d, klasse, piirdekasti suurust ning display/position omadusi kiireks kontekstiks.
Liiguta hiirt üle lehe, et näha elementide lilla esiletõstmist. Klõpsa lukustamiseks — DevTools Inspectorit pole vaja.
Unikaalne CSS-tee, lühike selektor, absoluutne XPath ja mähitud querySelector-lõik. Vali see, mis su tööriistadega sobib.
Kui element on lukustatud, kasuta Parent / First Child / Prev / Next nuppe, et liikuda DOM-is uuesti valimata.
Igal selektoril on oma kopeerimisnupp. Hangi vorming, mida su skript vajab, ja kleebi otse testi või kaabitsasse.
Kuvab siltd, id, klassid, suuruse, display ja positsiooni — kiire ülevaade ilma uuesti inspekteerimata.
Kui elemendil on id, kasutab unikaalne CSS #id-d. Kui olemas on data-testid, tuuakse see esile Playwright/Cypressi kasutamiseks.
Vali testitav element, kopeeri selle selektor ja kleebi oma testikoodi — enam pole vaja unikaalseid teid ära arvata.
Leia kaabitsa sihtmärgil olevate loendielementide struktuurne selektor. Kasuta lühikest või tee-põhist selektorit vastavalt stabiilsusvajadusele.
Lukusta element ja kopeeri selle tee, et uurida, miks CSS ei rakendu — unikaalne selektor näitab elemendi täielikku asukohta puus.
Kopeeri valmis mähitud document.querySelector(...) lõik otse DevTools Console'i kiireks interaktiivseks silumiseks.
Ligipääsetavuse auditeerimisel kasuta XPathi, et sisestada elemendid axe-core'i või teistesse a11y-tööriistadesse, mis ootavad XPath-viiteid.
Klõpsa DevSuite Pro dokis Path Finder ikoonil. Tööriist aktiveerub kohe valikurežiimis.
Liiguta hiirt üle lehe — iga element tõstetakse üleliikumisel lillaga esile. Keri vajadusel, et leida oma sihtmärk.
Klõpsa soovitud elemendil. Valija peatub ja paneel täitub selektorivormingute, konteksti ja kopeerimisnuppudega.
Kasuta Parent/Child/Sibling nuppe valiku täpsustamiseks või klõpsa Pick Element, et alustada hiirega valimist uuesti.
Klõpsa Copy vajaliku vormingu kõrval (CSS, XPath või querySelector). Kleebi otse oma testi, kaabitsasse või konsooli.
Paigaldage DevSuite Pro tasuta ja avage 64+ arendustööriista oma brauserile.
