DOM Path Finder et permet passar el cursor per sobre de qualsevol element d'una pàgina per revelar-ne el selector CSS únic, un selector curt, l'XPath i un fragment querySelector a punt per enganxar. Fes clic per bloquejar l'element i navega amb els botons Parent/Child/Sibling. Essencial per a usuaris de Selenium, Puppeteer, Playwright i Cypress.
Escriure proves d'automatització, scrapers web o bookmarklets implica escriure selectors — però esbrinar un selector estable i únic per a un element concret és tediós. Obres les DevTools, inspecciones, fas clic dret, copies el selector i esperes que el resultat sigui realment únic i estable. DOM Path Finder ho redueix a un sol clic. Activa l'eina i passa el cursor per sobre de qualsevol element de la pàgina — s'il·luminarà en morat mentre et mous. Fes clic per bloquejar-lo, i el panell s'omplirà amb quatre formats de selector: un selector CSS únic basat en la ruta, un selector curt (etiqueta + classes o id), un XPath absolut i un fragment document.querySelector('...') preembolcallat a punt per enganxar en un script. Un cop bloquejat, pots navegar per l'arbre DOM amb els botons Parent / First Child / Prev Sibling / Next Sibling sense perdre el focus. Els atributs data-testid es detecten i es prioritzen quan hi són presents — ideal per a qui utilitza Playwright/Cypress amb aquests atributs com a ancoratges. L'eina també mostra l'etiqueta, l'id, les classes, la mida delimitadora i les propietats de display/position per tenir context ràpidament.
Mou el ratolí per la pàgina per veure els elements il·luminar-se en morat. Fes clic per bloquejar — no cal l'Inspector de les DevTools.
Ruta CSS única, selector curt, XPath absolut i fragment querySelector embolcallat. Tria el que millor s'adapti a les teves eines.
Un cop bloquejat, utilitza els botons Parent / First Child / Prev / Next per moure't per l'arbre DOM sense tornar a seleccionar.
Cada selector té el seu propi botó Copy. Agafa el format que necessiti el teu script i enganxa'l directament a la prova o al scraper.
Mostra etiqueta, id, classes, mida, display i position — visió ràpida sense tornar a inspeccionar.
Si l'element té un id, el CSS únic utilitza #id. Si hi ha un data-testid, es mostra per a ús amb Playwright/Cypress.
Selecciona l'element sota prova, copia'n el selector i enganxa'l al codi de la prova — mai més hauràs d'endevinar rutes úniques.
Troba el selector estructural dels elements d'una llista a l'objectiu del scraping. Usa el selector curt o el basat en ruta segons les teves necessitats d'estabilitat.
Bloqueja un element i copia'n la ruta per investigar per què el CSS no s'aplica — el selector únic mostra la ubicació completa de l'element a l'arbre.
Copia el fragment document.querySelector(...) ja embolcallat directament a la consola de les DevTools per a depuració interactiva ràpida.
Quan auditis l'accessibilitat, utilitza l'XPath per alimentar elements a axe-core o altres eines d'a11y que esperen referències XPath.
Fes clic a la icona Path Finder al dock de DevSuite Pro. L'eina s'activa immediatament en mode de selecció.
Mou el ratolí per la pàgina — cada element s'il·lumina en morat en passar-hi per sobre. Desplaça't segons calgui per trobar el teu objectiu.
Fes clic a l'element que vulguis. El selector s'atura i el panell s'omple amb els formats de selector, el context i els botons de còpia.
Utilitza els botons Parent/Child/Sibling per refinar la selecció, o fes clic a Pick Element per tornar a activar la selecció amb el cursor.
Fes clic a Copy al costat del format que necessitis (CSS, XPath o querySelector). Enganxa'l directament a la teva prova, scraper o consola.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 64 eines de desenvolupador per al teu navegador.
