Il selettore CSS di un elemento permette di identificare quest’ultimo all’interno di una pagina HTML.
Può essere utilizzato per diversi scopi, come applicare una regola CSS per questioni estetiche, manipolare il DOM tramite JavaScript, o effettuare delle assunzioni (i.e. “Expectations”) durante l’esecuzione di tests End-To-End.
In questo articolo ti mostrerò le funzionalità di Chrome DevTools che permettono di ottenere il selettore CSS di un determinato elemento.
Indice
Cosa è il Chrome DevTools
Chrome DevTools è un set di strumenti per web developers inclusi con il browser Google Chrome.
Attraverso di esso è possibile eseguire molteplici operazioni sul DOM ed ottenere diverse informazioni sulla pagina web visualizzata.
Puoi accedere al Chrome DevTools in diversi modi:
- Utilizzando il tasto destro su un punto qualunque della pagina, cliccando su “Ispeziona”
- Premendo sulla tastiera il tasto F12
- Utilizzando il menu posto in alto a destra (icona con 3 puntini), Altri strumenti, Strumenti per sviluppatori
Puoi trovare un esempio pratico di utilizzo di questo strumento nell’articolo Eseguire codice JavaScript su qualunque pagina web.
Come trovare il selettore CSS di un elemento
Per ottenere il apri Chrome DevTools, clicca sull’icona in alto a sinistra raffigurante un riquadro con sopra il puntatore del mouse, quindi clicca l’elemento della pagina di cui vuoi ottenere il selettore CSS.
Si evidenzierà la parte di DOM corrispondente all’elemento selezionato.
Clicca tasto destro sulla parte evidenziata, Copia, Copia Selettore.
Nel caso dell’esempio mostrato nella GIF animata, il selettore ottenuto è il seguente:
#post-1348 > div.post-inner.thin > div > h2:nth-child(3)
Altre informazioni oltre al selettore CSS
Analogamente a quanto fatto per trovare il selettore CSS dell’elemento, è possibile ottenere altre informazioni, come il codice JavaScript per ottenere il riferimento all’elemento o il selettore XPath.
Ottenere il codice JavaScript
Per ottenere il codice JavaScript dovrai cliccare con il tasto destro sulla parte del DOM evidenziata, Copia, Copia percorso JS.
Nel caso di quando mostrato nella GIF, si ottiene il seguente codice:
document.querySelector("#post-1348 > div.post-inner.thin > div > h2:nth-child(3)")
Trovare selettore XPath
Puoi trovare il selettore XPath cliccando con il tasto destro sulla parte del DOM evidenziata, Copia, Copia XPath.
Nel caso di quando mostrato nella GIF, si ottiene il seguente selettore:
//*[@id="post-1348"]/div[1]/div/h2[1]
Conclusioni
In questo articolo hai visto come ottenere diverse informazioni utili riguardo ad un elemento della pagina web che stai visualizzando, come il selettore CSS, il codice JavaScript per avere una referenza all’elemento ed il selettore XPath.
