Come trovare gli elementi tramite il selettore CSS in Selenium

I selettori CSS sono un potente strumento per individuare gli elementi su una pagina Web durante l'automazione dei test del browser con Selenium. L'uso dei selettori CSS ti consente di indirizzare gli elementi in modo preciso e flessibile. In questa guida completa, tratteremo tutto ciò che devi sapere per diventare un professionista nella ricerca di elementi tramite il selettore CSS in Selenium.

Un'introduzione ai selettori CSS

I selettori CSS ti consentono di selezionare elementi HTML in base a ID, classe, attributo, posizione nell'albero DOM e altro. Ecco alcuni dei selettori CSS più comunemente usati:

Selettore ID – Seleziona un elemento in base al suo ID univoco. Per esempio #main-header selezionerà l'elemento con id="main-header".
Selettore di classe – Seleziona gli elementi in base al nome della classe. Per esempio .article selezionerà tutti gli elementi con class="articolo".
Selettore di attributi – Seleziona gli elementi in base a un determinato attributo o valore dell'attributo. Per esempio input[type="text"] selezionerà tutti gli elementi di input con type="text".
Selettore discendente – Seleziona gli elementi che sono discendenti di un altro elemento specificato. Per esempio div p selezionerà tutti gli elementi p all'interno degli elementi div.
Selettore bambino – Seleziona gli elementi che sono figli diretti di un altro elemento specificato. Per esempio div > p selezionerà p elementi che sono figli diretti di div.
Selettore del fratello adiacente – Seleziona l'elemento fratello che segue immediatamente un altro elemento. Per esempio h2 + p selezionerà l'elemento p che viene immediatamente dopo un elemento h2.
Selettore generale dei fratelli – Seleziona tutti gli elementi fratelli che seguono un altro elemento. Per esempio h2 ~ p selezionerà tutti gli elementi p che seguono un elemento h2.

Questi sono solo alcuni esempi dei numerosi tipi di selettori CSS. Puoi combinare più selettori per indirizzare gli elementi in un modo molto specifico.

Trovare gli elementi tramite il selettore CSS in Selenium

Selenium fornisce due metodi principali per trovare elementi utilizzando i selettori CSS:

driver.find_element_by_css_selector()

Questo metodo restituirà il primo elemento corrispondente.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

Questo metodo restituirà un elenco di tutti gli elementi corrispondenti.

elements = driver.find_elements_by_css_selector(‘.article‘)

Quando si utilizzano questi metodi, si passa il selettore CSS come stringa. Ecco alcuni esempi di come individuare gli elementi con selettori diversi:

Per ID:

driver.find_element_by_css_selector(‘#signup-form‘)

Per classe:

driver.find_element_by_css_selector(‘.footer-links‘)

Per attributo:

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

Discendente:

driver.find_element_by_css_selector(‘div#content p.summary‘)

Bambino:

driver.find_element_by_css_selector(‘ul.menu > li.active‘)

Fratello adiacente:

driver.find_element_by_css_selector(‘h1 + p.intro‘)

Fratello generale:

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

Come puoi vedere, i selettori CSS ti offrono molte opzioni per indirizzare gli elementi in diversi modi.

Suggerimenti per scrivere selettori CSS efficaci

Ecco alcuni suggerimenti da seguire quando si scrivono selettori CSS per trovare elementi in Selenium:

Sii il più specifico possibile: utilizza ID, classe, attributi e selettori multipli insieme per individuare con precisione gli elementi. Ciò evita corrispondenze false positive.
Preferire la classe al nome del tag – I nomi dei tag come div, p, a, ecc. non sono molto distintivi. Le classi consentono un targeting più specifico.
Utilizza attributi univoci come nome o titolo: gli attributi nome e titolo in genere hanno valori univoci che possono individuare un singolo elemento.
Utilizza i selettori fratelli con attenzione: i selettori fratelli adiacenti e generali possono corrispondere a più elementi del previsto se non scritti correttamente.
Evitare selettori nidificati complessi: il concatenamento di molti selettori discendenti può rendere i selettori inclini a rompersi. Prova a limitare ciascun selettore a 3-4 livelli concatenati.
Suddividi i selettori lunghi in più righe: i selettori CSS non devono essere a riga singola. Suddividerli in più righe può migliorare la leggibilità.

Seguire questi suggerimenti ti aiuterà a scrivere selettori CSS robusti e gestibili per automatizzare i test web.

Esempi comuni e casi d'uso

Ora diamo un'occhiata ad alcuni esempi comuni di come i selettori CSS vengono utilizzati per il web scraping e il test del browser con Selenium:

Selezione dei collegamenti di navigazione

Per selezionare i collegamenti di navigazione principali, possiamo utilizzare un selettore di classi:

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

Selezione dei campi del modulo

Possiamo selezionare i campi di input del modulo in base al tag di input e all'attributo type:

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

Selezione di righe e colonne della tabella

I selettori CSS semplificano il targeting di righe e celle specifiche in una tabella HTML:

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

Selezione degli elementi figlio

Per selezionare solo i figli div diretti di un contenitore, possiamo utilizzare il selettore figlio:

children = driver.find_elements_by_css_selector(‘#container > div‘)

Selezione degli elementi in base al testo

Possiamo abbinare parzialmente il testo del collegamento utilizzando il selettore *:

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

Questi esempi dimostrano come i selettori CSS possono essere utilizzati in scenari di automazione dei test reali.

Utilizzo dei selettori CSS in altre lingue

Gli esempi finora hanno utilizzato Python, ma i selettori CSS possono essere utilizzati in qualsiasi collegamento linguistico per Selenium:

Java

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

JavaScript

// $ 
const element = await driver.$(‘div.main #login-form‘);

Indipendentemente dalla lingua utilizzata, i selettori CSS forniscono un modo potente e flessibile per indirizzare gli elementi.

Individuazione degli elementi in base al nome della classe

Un caso d'uso comune è l'individuazione degli elementi in base al nome della classe. Ecco alcuni suggerimenti per la selezione per classe in Selenium:

Abbina il nome esatto della classe – driver.find_element_by_class_name(‘primary-btn‘)
Utilizza un selettore di classi CSS – driver.find_element_by_css_selector(‘.primary-btn‘)
Corrispondenza parziale di più classi – driver.find_element_by_css_selector(‘.primary.btn‘)
Abbina il discendente alla classe – driver.find_element_by_css_selector(‘div .primary-btn‘)
Utilizza più classi per l'unicità: driver.find_element_by_css_selector(‘.primary-btn.large‘)

La corrispondenza per nome di classe è molto utile, ma assicurati di scegliere come target classi univoche sulla pagina.

Ricerca di elementi per nome tag

Individuare gli elementi in base al nome del tag HTML è un'altra attività comune di Selenium. Ecco alcuni esempi:

Trova la prima istanza del nome del tag:

element = driver.find_element_by_tag_name(‘button‘)

Trova tutte le istanze del nome del tag:

buttons = driver.find_elements_by_tag_name(‘button‘)

Combina con il selettore CSS:

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

Poiché i nomi dei tag piacciono <div> ed <span> sono comuni, prova a utilizzare anche ID, classi o attributi per identificare in modo univoco l'elemento.

Ricerca di elementi per nome o ID

Se gli elementi hanno attributi id o name, l'opzione più semplice è l'individuazione per nome o ID.

Trova per ID preciso:

element = driver.find_element_by_id(‘signup-form‘)

Trova per nome esatto:

element = driver.find_element_by_name(‘email‘)

I localizzatori di ID e nome corrisponderanno solo ai valori esatti degli attributi. Ciò li rende molto specifici ma anche inclini a rompersi se gli ID o i nomi cambiano.

Ricerca di elementi tramite XPath e selettore CSS

XPath è l'altra strategia di localizzazione degli elementi comuni in Selenium. Quindi quando dovresti usare i selettori XPath e CSS?

Ecco alcune differenze:

leggibilità – I selettori CSS sono più leggibili e più facili da comprendere per la maggior parte degli sviluppatori.
Assistenza – I selettori CSS sono meno fragili e inclini a modifiche interrotte rispetto agli XPath lunghi e complessi.
Capabilities – XPath può accedere ad alcune proprietà dell'elemento che i selettori CSS non possono, come il contenuto del testo.
Prestazione – I selettori CSS sono più veloci da abbinare ai browser rispetto ai complessi XPath.

In generale, preferisci i selettori CSS per manutenibilità e prestazioni. Utilizza XPath solo quando necessario per accedere a qualcosa che non è possibile con i CSS.

Migliori pratiche quando si utilizzano i selettori CSS

Ecco alcune best practice da seguire quando si individuano gli elementi con i selettori CSS:

Privilegiare l'unicità rispetto alla complessità – Se possibile, evitare lunghe catene di selettori nidificati.
Utilizza ID e classi rispetto ai nomi dei tag e alla nidificazione.
Prova ad abbinare 3 o meno livelli concatenati: più livelli aumentano la fragilità.
Evita i selettori universali come * – Questi sono soggetti a corrispondenze false positive.
Suddividi i selettori lunghi in più righe: migliora la leggibilità.
Memorizza nella cache i selettori comunemente utilizzati: salva le ricerche ripetute dei selettori.
Utilizza nomi di selettori descrittivi: aiuta a chiarire l'intento ed evita stringhe magiche.

Seguire queste migliori pratiche aiuterà a scrivere selettori CSS robusti, leggibili e affidabili per l'automazione di Selenium.

Suggerimenti per il debug dei selettori CSS

Il debug dei selettori CSS è una competenza essenziale per l'automazione dei test. Ecco alcuni suggerimenti per la risoluzione dei problemi:

Utilizza gli strumenti di sviluppo del tuo browser per testare i selettori: Chrome DevTools fornisce un comodo ispettore degli elementi.
Stampa e controlla gli elementi corrispondenti – Dopo l'esecuzione find_elements(), stampa i risultati per vedere cosa è stato abbinato.
lotta NoSuchElementException – Avvolgi trova in un blocco try/eccetto per catturare quando un elemento non viene trovato.
Genera XPath dall'elemento di destinazione: molti browser consentono di copiare XPath, il che può aiutare a creare il selettore CSS.
Semplifica selettori complessi: prova a rimuovere attributi/classi/annidamenti finché il selettore non funziona.
Utilizza attese esplicite se necessario: le pagine dinamiche potrebbero richiedere attese affinché i selettori diventino disponibili.
Convalida la precisione del selettore: assicurati che il selettore stia effettivamente trovando l'elemento desiderato, non solo un elemento qualsiasi.

Prendersi il tempo per eseguire attentamente il debug dei selettori ripagherà attraverso test più stabili.

Conclusione

Questa guida copre tutti gli aspetti chiave del posizionamento degli elementi tramite il selettore CSS in Selenium:

Sintassi e tipi del selettore CSS
Utilizzo con selenio find_element metodi
Scrittura di selettori precisi e manutenibili
Casi d'uso comuni ed esempi
Confronto con XPath
Debug e best practice

I selettori CSS forniscono un modo potente e flessibile per indirizzare gli elementi per il web scraping e l'automazione dei test. Padroneggiando le tecniche mostrate qui, puoi scrivere script di automazione robusti resistenti ai cambiamenti nell'interfaccia utente dell'applicazione. L'uso corretto dei selettori CSS è un'abilità indispensabile per qualsiasi ingegnere esperto di Selenium.