DOM Path Finder ti permette di passare il cursore su qualsiasi elemento della pagina per rivelare il suo selettore CSS univoco, un selettore breve, l'XPath e uno snippet querySelector pronto da incollare. Clicca per bloccare l'elemento, poi naviga con i pulsanti Genitore/Figlio/Fratello. Essenziale per chi usa Selenium, Puppeteer, Playwright e Cypress.
Scrivere test di automazione, web scraper o bookmarklet significa scrivere selettori — ma capire quale sia il selettore stabile e univoco per un elemento specifico è noioso. Apri DevTools, ispezioni, tasto destro, copi il selettore e speri che il risultato sia davvero univoco e stabile. DOM Path Finder riduce tutto questo a un solo clic. Attiva lo strumento e passa il cursore su qualsiasi elemento della pagina: si evidenzierà in viola man mano che ti sposti. Clicca per bloccarlo e il pannello si riempirà con quattro formati di selettore: un selettore CSS univoco basato sul percorso, un selettore breve (tag + classi o id), un XPath assoluto e uno snippet document.querySelector('...') già pronto da incollare in uno script. Una volta bloccato l'elemento, puoi navigare l'albero DOM con i pulsanti Genitore / Primo Figlio / Fratello Precedente / Fratello Successivo senza perdere la selezione. Gli attributi data-testid vengono rilevati e messi in evidenza quando presenti — ideali per chi usa Playwright/Cypress con questi attributi come ancore. Lo strumento mostra anche tag, id, classi, dimensioni e proprietà display/position per un contesto rapido.
Muovi il mouse sulla pagina per vedere gli elementi evidenziarsi in viola. Clicca per bloccare — niente bisogno dell'Inspector di DevTools.
Percorso CSS univoco, selettore breve, XPath assoluto e snippet querySelector incapsulato. Scegli quello più adatto al tuo strumento di lavoro.
Una volta bloccato l'elemento, usa i pulsanti Genitore / Primo Figlio / Precedente / Successivo per spostarti nel DOM senza dover riselezionare.
Ogni selettore ha il proprio pulsante Copia. Prendi il formato di cui il tuo script ha bisogno e incollalo direttamente nel test o nello scraper.
Mostra tag, id, classi, dimensioni, display e posizione — una panoramica rapida senza dover ispezionare di nuovo.
Se l'elemento ha un id, il CSS univoco usa #id. Se è presente un data-testid, viene messo in evidenza per l'uso con Playwright/Cypress.
Seleziona l'elemento da testare, copia il suo selettore e incollalo nel codice del test — niente più tentativi a caso per trovare percorsi univoci.
Trova il selettore strutturale per gli elementi di una lista sul sito da analizzare. Usa il selettore breve o basato sul percorso a seconda delle esigenze di stabilità.
Blocca un elemento e copia il suo percorso per capire perché il CSS non viene applicato — il selettore univoco mostra la posizione completa dell'elemento nell'albero.
Copia lo snippet document.querySelector(...) già incapsulato direttamente nella Console di DevTools per un debug interattivo rapido.
Durante un audit di accessibilità, usa l'XPath per fornire elementi ad axe-core o ad altri strumenti di accessibilità che si aspettano riferimenti XPath.
Clicca sull'icona Path Finder nel dock di DevSuite Pro. Lo strumento si attiva immediatamente in modalità selezione.
Muovi il mouse sulla pagina — ogni elemento si evidenzia in viola al passaggio. Scorri la pagina se necessario per trovare il tuo obiettivo.
Clicca sull'elemento che desideri. Il selettore si ferma e il pannello si riempie con formati di selettore, contesto e pulsanti di copia.
Usa i pulsanti Genitore/Figlio/Fratello per affinare la selezione, oppure clicca su Seleziona Elemento per ricominciare la selezione al passaggio del cursore.
Clicca su Copia accanto al formato che ti serve (CSS, XPath o querySelector). Incollalo direttamente nel tuo test, scraper o nella console.
Installa DevSuite Pro gratuitamente e sblocca più di 64 strumenti per sviluppatori per il tuo browser.
