Selettore CSS inserito Selenium

Che cos'è un selettore CSS in Selenium?

A Selettore CSS inserito Selenium È una stringa che identifica un elemento web tramite una combinazione di tag HTML, ID, classe e attributi. I selettori CSS sono leggermente più avanzati rispetto all'individuazione tramite ID o nome, ma rappresentano la strategia più diffusa tra gli esperti. Selenium utenti perché possono raggiungere elementi che non hanno alcun attributo ID o Name.

Selettori CSS in Selenium si presentano in molte forme, ma questa guida si concentra sui cinque modelli più comuni utilizzati in Selenium QUI:

• Etichetta e documento d'identità
• Etichetta e classe
• Etichetta e attributo
• Tag, classe e attributo
• Testo interno

Quando si utilizza questa strategia in Selenium IDE, anteponi sempre il prefisso Target scatola con “css="come dimostrato in ciascuno degli esempi seguenti.

Perché utilizzare i selettori CSS in Selenium?

I selettori CSS sono la strategia di localizzazione preferita per molti Selenium Gli ingegneri dell'automazione sono apprezzati perché sanno bilanciare velocità, flessibilità e leggibilità. Le moderne applicazioni web spesso utilizzano ID generati dinamicamente o rimuovono completamente gli attributi name, lasciando i selettori CSS come unico modo affidabile per individuare un elemento specifico sulla pagina.

I principali vantaggi dell'utilizzo dei selettori CSS includono:

• Performance: I selettori CSS vengono elaborati dal motore nativo del browser, quindi vengono eseguiti più velocemente rispetto alle equivalenti espressioni XPath, soprattutto nei browser meno recenti come Internet Explorer.
• Flessibilità: Combinano logica basata su tag, classi, attributi e corrispondenze parziali, consentendo ai tester di individuare elementi privi di un ID stabile.
• leggibilità: La sintassi rispecchia il modo in cui gli sviluppatori scrivono già le regole CSS, il che riduce i tempi di apprendimento sia per i tecnici del controllo qualità che per i team di front-end.
• Stabilità tra browser diversi: I selettori CSS si comportano in modo coerente su Chrome, Firefox, Edge e Safari, riducendo i fallimenti dei test instabili.

Tag e ID – Selettore CSS

Questo esempio utilizza la casella di testo Email nella pagina di accesso di Facebook. L'elemento ha un ID di "email", ed era già stato consultato nella sezione "Individuazione tramite ID". Ora lo stesso elemento viene preso di mira utilizzando un Selenium Selettore CSS con l'attributo ID.

Sintassi

css=tag#id

• tag = il tag HTML dell'elemento a cui si accede
• # = il simbolo di cancelletto, che deve essere sempre presente quando si utilizza un Selenium Selettore CSS con ID
• id = l'ID dell'elemento a cui si accede

Tieni presente che l'ID è sempre preceduto da un cancelletto (#).

Passo 1) Accedere a www.facebook.comUtilizzando gli strumenti per sviluppatori del browser (o uno strumento meno recente come Firebug), esamina la casella di testo "Email o telefono".

Nota che il tag HTML è “ingresso" e il suo ID è "email“. Il selettore CSS completo diventa quindi “css=input#email".

Passo 2) Accedere "css=input#email" nel Target scatola di Selenium IDE e fare clic sul pulsante Trova. Selenium L'IDE evidenzia l'elemento corrispondente sulla pagina.

Tag e classe – Selettore CSS

Un selettore CSS in Selenium che utilizza un tag HTML e un nome di classe segue la stessa idea di tag e ID, ma un punto (.) sostituisce il segno di cancelletto.

Sintassi

css=tag.class

• tag = il tag HTML dell'elemento a cui si accede
• . = il punto, che deve essere sempre presente quando si utilizza un selettore CSS con classe
• class = la classe dell'elemento a cui si accede

Passo 1) Apri la pagina demo https://demo.guru99.com/test/facebook.html e ispeziona la casella di testo “Email o telefono”. Nota che il tag HTML è “ingresso" e la sua classe è "testo di input".

Passo 2) In Selenium IDE, inserisci “css=input.testoinput"Nel Target casella e fare clic su Trova. Selenium L'IDE riconosce la casella di testo Email o Telefono.

Tieni presente che quando più elementi condividono lo stesso tag HTML e la stessa classe, viene riconosciuto solo il primo elemento corrispondente nel codice sorgente. Esaminate la casella di testo Password nella stessa pagina e noterete che condivide la stessa classe della casella di testo Email o Telefono.

Nell'illustrazione precedente è stata evidenziata solo la casella di testo Email o Telefono perché compare per prima nel codice sorgente della pagina.

Tag e attributi – Selettore CSS

Questa strategia combina un tag HTML con uno specifico attributo appartenente all'elemento a cui si desidera accedere.

Sintassi

css=tag[attribute=value]

• tag = il tag HTML dell'elemento a cui si accede
• [ e ] = parentesi quadre che racchiudono l'attributo e il suo valore corrispondente
• attributo = l'attributo da utilizzare. Scegline uno univoco per l'elemento, come nome o ID.
• valore = il valore corrispondente dell'attributo scelto.

Passo 1) Passare alla Mercury Pagina di registrazione per i tour https://demo.guru99.com/test/newtours/register.php Esaminate la casella di testo “Cognome”. Notate il tag HTML (“input”) e l’attributo name (“lastName”).

Passo 2) In Selenium IDE, inserisci “css=input[nome=cognome]"Nel Target casella e fare clic su Trova. Selenium L'IDE individua correttamente il campo Cognome.

Quando più elementi condividono lo stesso tag HTML e lo stesso attributo, viene riconosciuto solo il primo. Il comportamento è identico a quello dell'individuazione di elementi con lo stesso tag e la stessa classe.

Tag, classe e attributo – Selettore CSS

Sintassi

css=tag.class[attribute=value]

• tag = il tag HTML dell'elemento a cui si accede
• . = il punto, che deve essere sempre presente quando si utilizza un selettore CSS con classe
• class = la classe dell'elemento a cui si accede
• [ e ] = parentesi quadre che racchiudono un attributo specifico e il suo valore corrispondente
• attributo = l'attributo da utilizzare. Scegline uno univoco per l'elemento, come nome o ID.
• valore = il valore corrispondente dell'attributo scelto.

Passo 1) Apri la pagina demo https://demo.guru99.com/test/facebook.html e ispeziona le caselle di input “Email o telefono” e “Password”. Prendi nota del loro tag HTML, della classe e degli attributi. Questo esempio utilizza il “tabindex” attributo.

Passo 2) Accedere prima alla casella di testo “Email o telefono” utilizzando un valore tabindex di 1. Inserire “css=input.inputtext[tabindex=1]"In Selenium IDE Target Seleziona la casella e fai clic su Trova. Il campo Email o Telefono verrà evidenziato.

Passo 3) Per selezionare la casella di input della password, è sufficiente sostituire il valore tabindex. Inserire “css=input.inputtext[tabindex=2]"Nel Target casella e fare clic su Trova. Selenium L'IDE individua correttamente la casella di testo della password.

Testo interno – Selettore CSS

Alle etichette HTML raramente vengono assegnati attributi id, name o class. Quindi come si accede a essi in SeleniumLa risposta si trova nel loro testo interno. I testi interni sono le stringhe di testo effettive che l'etichetta HTML visualizza sulla pagina.

Sintassi

css=tag:contains("inner text")

• tag = il tag HTML dell'elemento a cui si accede
• testo interno = il contenuto testuale visibile dell'elemento

Passo 1) Passare alla Mercury Home page dei tour https://demo.guru99.com/test/newtours/ Esaminate l'etichetta "Password". Notate il suo tag HTML ("font" in questo caso) e osservate che l'elemento non ha attributi class, id o name.

Passo 2) Tipo css=font:contains(“Password:”) ai miglioramenti Selenium IDE Target casella e fare clic su Trova. Selenium L'IDE individua l'etichetta Password come mostrato di seguito.

Passo 3) Questa volta, sostituisci il testo interno con “Boston” in modo che Target diventa “css=font:contains(“Boston”)“. Fai clic su Trova. L'etichetta “Da Boston a San Francisco” è evidenziata, a dimostrazione che Selenium IDE è in grado di individuare un'etichetta lunga anche quando viene fornita solo la prima parola del suo testo interno.

Selettore CSS vs XPath in Selenium

Sia i selettori CSS che XPath vengono utilizzati per identificare gli elementi web in SeleniumTuttavia, presentano punti di forza diversi. La tabella seguente confronta le due strategie di localizzazione in base a dimensioni chiave:

Criteri	Selettore CSS	XPath
Velocità	Più veloce, funziona sul motore nativo del browser.	Più lento, soprattutto nei browser meno recenti.
Tipo di viaggio	Solo inoltro (da genitore a figlio)	Avanti e indietro (dal figlio al genitore)
Sintassi	Più brevi e simili alle regole CSS	Espressioni di percorso più lunghe e gerarchiche
Corrispondenza del testo	Limitato alla pseudo-classe :contains()	Funzioni testo forte() e contiene()
migliori per	Layout statici e applicazioni web moderne	Attraversamento complesso del DOM e localizzatori basati su testo

migliori pratiche per la scrittura di selettori CSS in Selenium

Scrivere selettori CSS affidabili va oltre la conoscenza della sintassi. Le seguenti pratiche aiutano i tester a creare selettori CSS stabili e manutenibili. Selenium script che resistono alle modifiche dell'interfaccia utente:

1. Preferisci attributi unici: Scegli sempre gli attributi id, data-test-id o name aggiunti esplicitamente per l'automazione. Questi rimangono stabili anche quando il layout visivo cambia.
2. Evitate selettori eccessivamente annidati: Catene lunghe come div > div > ul > li > a Si rompono facilmente quando gli sviluppatori effettuano il refactoring del markup. Mantieni i selettori il più brevi possibile.
3. Utilizzate con criterio le corrispondenze parziali: Modelli come [class*="btn-primary"] tollerano piccole modifiche al nome della classe, ma potrebbero anche corrispondere a elementi non intenzionali.
4. Evitate i localizzatori basati su indice: Selettori come nth-child(3) sono fragili perché l'aggiunta di un elemento fratello sposta ogni posizione.
5. Convalida i selettori in DevTools: Prima di eseguire a Selenium script, incolla il selettore nella console degli strumenti per sviluppatori di Chrome usando document.querySelector() per confermare che restituisce esattamente un elemento.
6. Combina gli attributi per creare unicità: Quando una classe è condivisa da molti elementi, aggiungi un filtro di attributi come input.form-control[name="email"] per disambiguare l'obiettivo.
7. Documentare e riutilizzare: Centralizzare i selettori all'interno di una classe Page Object in modo che un singolo aggiornamento risolva tutti i test che fanno riferimento allo stesso elemento.

Seguire queste linee guida riduce l'instabilità, migliora la velocità di esecuzione dei test e rende Selenium suite più facili da mantenere nel tempo.

Riepilogo: Guida rapida alla sintassi dei selettori CSS

La tabella seguente consolida ogni Selenium Pattern di selezione CSS trattati in questa guida:

Metodo	Target Sintassi	Esempio
Etichetta e documento d'identità	css=tag#id	css=input#email
Etichetta e classe	css=tag.class	css=input.testoinput
Etichetta e attributo	css=tag[attributo=valore]	css=input[nome=cognome]
Tag, classe e attributo	css=tag.class[attributo=valore]	css=input.inputtext[tabindex=1]
Testo interno	css=tag:contains(“text”)	css=font:contains(“Password:”)

DOMANDE FREQUENTI