DOM Path Finder vă permite să treceți cu mouse-ul peste orice element al paginii pentru a-i afla selectorul CSS unic, selectorul scurt, XPath-ul și un fragment querySelector gata de lipit. Faceți clic pentru a bloca elementul, apoi navigați cu butoanele Parent/Child/Sibling. Esențial pentru utilizatorii Selenium, Puppeteer, Playwright și Cypress.
Scrierea de teste automate, web scraper-e sau bookmarklet-uri presupune scrierea de selectori — dar găsirea unui selector stabil și unic pentru un anumit element este obositoare. Deschideți DevTools, inspectați, dați clic dreapta, copiați selectorul și sperați că rezultatul este cu adevărat unic și stabil. DOM Path Finder reduce totul la un singur clic. Activați instrumentul și treceți cu mouse-ul peste orice element al paginii — acesta se evidențiază cu mov pe măsură ce vă mișcați. Faceți clic pentru a-l bloca, iar panoul se va umple cu patru formate de selector: un selector CSS unic bazat pe cale, un selector scurt (tag + clase sau id), un XPath absolut și un fragment document.querySelector('...') gata împachetat, pregătit pentru a fi lipit într-un script. Odată blocat, puteți naviga în arborele DOM cu butoanele Parent / First Child / Prev Sibling / Next Sibling fără a pierde selecția. Atributele data-testid sunt detectate și prioritizate atunci când există — ideal pentru cei care lucrează cu Playwright/Cypress și le folosesc drept ancore. Instrumentul afișează, de asemenea, tag-ul, id-ul, clasele, dimensiunile și proprietățile display/position pentru context rapid.
Mișcați mouse-ul peste pagină pentru a vedea elementele evidențiate cu mov. Faceți clic pentru a bloca — fără a mai fi nevoie de DevTools Inspector.
Cale CSS unică, selector scurt, XPath absolut și fragment querySelector împachetat. Alegeți formatul potrivit pentru instrumentele dumneavoastră.
Odată blocat elementul, folosiți butoanele Parent / First Child / Prev / Next pentru a vă deplasa prin DOM fără a relua selecția.
Fiecare selector are propriul buton de copiere. Preluați formatul de care are nevoie scriptul dumneavoastră și lipiți-l direct în test sau scraper.
Afișează tag-ul, id-ul, clasele, dimensiunile, display-ul și poziția — o privire de ansamblu rapidă, fără a fi nevoie de o nouă inspecție.
Dacă elementul are un id, selectorul CSS unic folosește #id. Dacă există un data-testid, acesta este scos în evidență pentru utilizare cu Playwright/Cypress.
Selectați elementul testat, copiați-i selectorul și lipiți-l în codul de test — fără a mai ghici căi unice.
Găsiți selectorul structural pentru elementele unei liste de pe site-ul vizat. Folosiți selectorul scurt sau pe cel bazat pe cale, în funcție de cât de stabil trebuie să fie.
Blocați un element și copiați-i calea pentru a investiga de ce nu se aplică un stil CSS — selectorul unic arată poziția exactă a elementului în arbore.
Copiați fragmentul document.querySelector(...) gata împachetat direct în consola DevTools pentru depanare interactivă rapidă.
Când auditați accesibilitatea, folosiți XPath pentru a furniza elemente către axe-core sau alte instrumente de a11y care așteaptă referințe XPath.
Faceți clic pe pictograma Path Finder din dock-ul DevSuite Pro. Instrumentul se activează imediat în modul de selecție.
Mișcați mouse-ul peste pagină — fiecare element se evidențiază cu mov pe măsură ce treceți peste el. Derulați pagina dacă este nevoie pentru a găsi elementul dorit.
Faceți clic pe elementul dorit. Selecția se oprește, iar panoul se umple cu formatele de selector, context și butoane de copiere.
Folosiți butoanele Parent/Child/Sibling pentru a rafina selecția, sau faceți clic pe Pick Element pentru a relua selecția prin hover.
Faceți clic pe Copy lângă formatul de care aveți nevoie (CSS, XPath sau querySelector). Lipiți direct în test, scraper sau consolă.
Instalează DevSuite Pro gratuit și deblochează peste 64 de instrumente pentru dezvoltatori în browserul tău.
