Iskalnik DOM poti omogoča, da s premikom miške nad poljubnim elementom na strani razkrijete njegov edinstveni CSS selektor, kratki selektor, XPath in pripravljen odlomek querySelector za lepljenje. Kliknite za zaklep elementa, nato pa se premikajte z gumbi Parent/Child/Sibling. Nepogrešljivo za uporabnike orodij Selenium, Puppeteer, Playwright in Cypress.
Pisanje avtomatiziranih testov, spletnih pobiralnikov (scraperjev) ali zaznamkov (bookmarkletov) pomeni pisanje selektorjev — a ugotavljanje stabilnega, edinstvenega selektorja za določen element je zamudno. Odprete DevTools, pregledate element, kliknete z desno tipko, kopirate selektor in upate, da je rezultat res edinstven in stabilen. Iskalnik DOM poti to spremeni v en sam klik. Aktivirajte orodje in premaknite miško nad poljuben element na strani — ta se ob premikanju obarva vijolično. Kliknite za zaklep, plošča pa se napolni s štirimi oblikami selektorja: edinstvenim CSS selektorjem na osnovi poti, kratkim selektorjem (oznaka + razredi ali id), absolutnim XPath ter vnaprej zavitim odlomkom document.querySelector('...'), pripravljenim za lepljenje v skripto. Ko je element zaklenjen, se lahko po DOM drevesu premikate z gumbi Parent / First Child / Prev Sibling / Next Sibling, ne da bi izgubili fokus. Atributi data-testid so zaznani in imajo prednost, kadar so prisotni — idealno za uporabnike Playwright/Cypress, ki jih uporabljajo kot sidra. Orodje prikaže tudi oznako, id, razrede, velikost okvirja in lastnosti display/position za hiter vpogled v kontekst.
Premaknite miško nad stran, da vidite elemente osvetljene vijolično. Kliknite za zaklep — brez potrebe po DevTools Inspectorju.
Edinstvena CSS pot, kratki selektor, absoluten XPath in zaviti odlomek querySelector. Izberite tisto, kar ustreza vašemu orodju.
Ko je element zaklenjen, uporabite gumbe Parent / First Child / Prev / Next za premikanje po DOM-u brez ponovnega izbiranja.
Vsak selektor ima svoj gumb za kopiranje. Pridobite obliko, ki jo potrebuje vaša skripta, in jo prilepite neposredno v test ali pobiralnik.
Prikazuje oznako, id, razrede, velikost, display in position — hiter pregled brez ponovnega pregledovanja.
Če ima element id, edinstveni CSS uporabi #id. Če je prisoten data-testid, je izpostavljen za uporabo s Playwright/Cypress.
Izberite testirani element, kopirajte njegov selektor in ga prilepite v testno kodo — brez ugibanja edinstvenih poti.
Poiščite strukturni selektor za elemente seznama na ciljni strani za pobiranje podatkov. Uporabite kratek ali na poti temelječ selektor glede na potrebo po stabilnosti.
Zaklenite element in kopirajte njegovo pot, da raziščete, zakaj se CSS ne uporablja — edinstveni selektor prikaže polno lokacijo elementa v drevesu.
Kopirajte vnaprej zaviti odlomek document.querySelector(...) neposredno v konzolo DevTools za hitro interaktivno odpravljanje težav.
Pri presoji dostopnosti uporabite XPath za posredovanje elementov orodjem axe-core ali drugim orodjem za dostopnost, ki pričakujejo XPath reference.
Kliknite ikono Path Finder v vrstici DevSuite Pro. Orodje se takoj aktivira v načinu izbiranja.
Premaknite miško po strani — vsak element se ob prehodu obarva vijolično. Po potrebi pomikajte stran, da najdete želeni cilj.
Kliknite želeni element. Izbirnik se ustavi, plošča pa se napolni z oblikami selektorja, kontekstom in gumbi za kopiranje.
Uporabite gumbe Parent/Child/Sibling za natančnejšo izbiro ali kliknite Pick Element za nov začetek izbiranja.
Kliknite Copy ob obliki, ki jo potrebujete (CSS, XPath ali querySelector). Prilepite neposredno v test, pobiralnik ali konzolo.
Namestite DevSuite Pro brezplačno in odklenite več kot 64 orodij za razvijalce za svoj brskalnik.
