DOM Path Finder omogućuje vam da lebdenjem mišem preko bilo kojeg elementa na stranici otkrijete njegov jedinstveni CSS selektor, kratki selektor, XPath i gotov querySelector isječak spreman za zalijepiti. Kliknite za zaključavanje elementa, a zatim se krećite pomoću gumba Parent/Child/Sibling. Neophodan za korisnike Seleniuma, Puppeteera, Playwrighta i Cypressa.
Pisanje automatiziranih testova, web scrapera ili bookmarkleta uvijek podrazumijeva pisanje selektora — no pronalaženje stabilnog, jedinstvenog selektora za određeni element zna biti zamorno. Otvarate DevTools, inspektirate, desni klik, kopirate selektor i nadate se da je rezultat doista jedinstven i stabilan. DOM Path Finder to svodi na jedan klik. Aktivirajte alat i pređite mišem preko bilo kojeg elementa na stranici — dok se krećete, element se boji ljubičasto. Kliknite za zaključavanje, a panel se popunjava s četiri formata selektora: jedinstvenim CSS selektorom baziranim na putanji, kratkim selektorom (tag + klase ili id), apsolutnim XPath-om i unaprijed umotanim document.querySelector('...') isječkom spremnim za zalijepiti u skriptu. Nakon zaključavanja, možete se kretati DOM stablom pomoću gumba Parent / First Child / Prev Sibling / Next Sibling bez gubitka fokusa. Data-testid atributi se otkrivaju i prioritiziraju kada postoje — idealno za Playwright/Cypress korisnike koji ih koriste kao sidra. Alat također prikazuje tag, id, klase, veličinu okvira i display/position svojstva za brzi kontekst.
Pomaknite miš preko stranice kako biste vidjeli elemente istaknute ljubičasto. Kliknite za zaključavanje — bez potrebe za DevTools Inspectorom.
Jedinstveni CSS put, kratki selektor, apsolutni XPath i umotani querySelector isječak. Odaberite ono što odgovara vašem alatu.
Nakon zaključavanja, koristite gumbe Parent / First Child / Prev / Next za kretanje kroz DOM bez ponovnog biranja.
Svaki selektor ima vlastiti gumb Copy. Dohvatite format koji vam treba i zalijepite izravno u test ili scraper.
Prikazuje tag, id, klase, veličinu, display i position — brzi pregled bez ponovnog inspektiranja.
Ako element ima id, jedinstveni CSS koristi #id. Ako postoji data-testid, prikazuje se za upotrebu s Playwright/Cypress.
Odaberite element koji testirate, kopirajte njegov selektor i zalijepite u kôd testa — bez nagađanja jedinstvenih putanja.
Pronađite strukturni selektor za stavke popisa na ciljanoj stranici za scraping. Koristite kratki ili selektor baziran na putanji ovisno o potrebnoj stabilnosti.
Zaključajte element i kopirajte njegovu putanju kako biste istražili zašto se CSS ne primjenjuje — jedinstveni selektor prikazuje potpunu lokaciju elementa u stablu.
Kopirajte unaprijed umotani document.querySelector(...) isječak izravno u DevTools konzolu za brzo interaktivno otklanjanje grešaka.
Prilikom provjere pristupačnosti koristite XPath za dostavljanje elemenata u axe-core ili druge alate za pristupačnost koji očekuju XPath reference.
Kliknite ikonu Path Finder u DevSuite Pro doku. Alat se odmah aktivira u načinu biranja.
Pomaknite miš preko stranice — svaki element se boji ljubičasto dok prelazite preko njega. Pomičite se prema potrebi kako biste pronašli cilj.
Kliknite element koji želite. Biranje prestaje, a panel se popunjava formatima selektora, kontekstom i gumbima za kopiranje.
Koristite gumbe Parent/Child/Sibling za usavršavanje odabira ili kliknite Pick Element za ponovno pokretanje biranja lebdenjem.
Kliknite Copy pored formata koji vam treba (CSS, XPath ili querySelector). Zalijepite izravno u test, scraper ili konzolu.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
