Informazioni sullo strumento
Un buon locator trova esattamente un elemento e continua a trovarlo dopo la prossima modifica della UI. Questo tester ti permette di verificare un locator sul sorgente reale della pagina prima di inserirlo in un test Selenium, Playwright o Cypress. Incolla l’HTML (dai DevTools, “Copy outerHTML”), inserisci un’espressione XPath o un selettore CSS e guarda quanti elementi corrispondono, il markup di ciascuno e la loro posizione in un’anteprima renderizzata. L’anteprima è un frame sandbox con gli script disabilitati. Il cheatsheet mostra gli assi e le funzioni XPath più comuni accanto ai loro equivalenti CSS, quando esistono.
Come si usa
- Incolla l’HTML, oppure clicca “Load sample” per un form di login e una tabella ordini.
- Scrivi un locator. Le espressioni che iniziano con / o ( vengono trattate come XPath, le altre come CSS; usa l’interruttore per forzarne uno.
- Controlla il numero di match: un solo match è ciò che vuoi per il target di un click o di un’asserzione.
- Clicca qualsiasi selettore del cheatsheet per eseguirlo sull’esempio.
XPath & CSS Selector Tester: domande frequenti
Meglio XPath o selettori CSS?
Preferisci CSS o i locator del framework (come getByRole e getByTestId di Playwright) per velocità e leggibilità. Usa XPath quando ti serve qualcosa che il CSS non può esprimere: trovare un elemento per testo con normalize-space(), risalire a un antenato o selezionare una cella rispetto a un’etichetta con following-sibling::.
Perché il mio XPath funziona nella console del browser ma non qui?
I browser supportano solo XPath 1.0, che è anche quello usato da questo strumento. Verifica che l’HTML incollato sia quello effettivamente renderizzato dal browser: il contenuto aggiunto da JavaScript, o dentro un iframe o uno shadow DOM, non è nel sorgente della pagina. Copia l’outerHTML dai DevTools per ottenere il DOM attuale.
Perché contains(@class, "btn") trova troppi elementi?
contains() confronta sottostringhe, quindi trova anche "btn-primary" e "submit-btn". Per corrispondere a un nome di classe intero usa contains(concat(' ', normalize-space(@class), ' '), ' btn ') in XPath, o semplicemente .btn in CSS.