Selettore CSS inserito Selenium

Cos'è un selettore CSS?

Selettori CSS in Selenium sono modelli di stringa utilizzati per identificare un elemento in base a una combinazione di tag HTML, id, classe e attributi. Individuazione tramite selettori CSS in Selenium è più complicato dei metodi precedenti, ma è la strategia di localizzazione avanzata più comune Selenium utenti perché può accedere anche a quegli elementi che non hanno ID o nome.

Selettori CSS in Selenium hanno molti formati, ma ci concentreremo solo su quelli più comuni. I diversi tipi di localizzatore CSS in Selenium IDE

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

Quando utilizziamo questa strategia, anteponiamo sempre il Target box con “css=" come verrà mostrato negli esempi seguenti.

tag e ID – Selettore CSS

Di nuovo, in questo esempio useremo la casella di testo Email di Facebook. Come puoi ricordare, ha un ID di "email" e vi abbiamo già avuto accesso nella sezione "Localizzazione tramite ID". Questa volta, useremo un Selenium Selettore CSS con ID per accedere allo stesso elemento.

Sintassi

css=tag#id

tag = il tag HTML dell'elemento a cui si accede
# = il segno del cancelletto. Questo dovrebbe essere sempre presente quando si utilizza a 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 Firebug, esamina la casella di testo "Email o telefono".

A questo punto, prendi nota che il tag HTML è “input” e il suo ID è “email”. Quindi la nostra sintassi sarà “css=input#email”.

Passo 2) Inserisci “css=input#email” nel Target scatola di Selenium IDE e fare clic sul pulsante Trova. Selenium L'IDE dovrebbe essere in grado di evidenziare quell'elemento.

tag e classe – Selettore CSS

Selettore CSS inserito Selenium l'utilizzo di un tag HTML e un nome di classe è simile all'utilizzo di un tag e di un ID, ma in questo caso viene utilizzato un punto (.) anziché un cancelletto.

Sintassi

css=tag.class

tag = il tag HTML dell'elemento a cui si accede
. = il segno del punto. Questo dovrebbe essere sempre presente quando si utilizza un selettore CSS con classe
class = la classe dell'elemento a cui si accede

Passo 1) Vai alla pagina dimostrativa https://demo.guru99.com/test/facebook.html e usa Firebug per ispezionare la casella di testo "Email or Phone". Nota che il suo tag HTML è "input" e la sua classe è "inputtext".

Passo 2) In Selenium IDE, inserisci "css=input.inputtext" nel file Target casella e fare clic su Trova. Selenium L'IDE dovrebbe essere in grado di riconoscere la casella di testo E-mail o Telefono.

Tieni presente che quando più elementi hanno lo stesso tag HTML e lo stesso nome, verrà riconosciuto solo il primo elemento nel codice sorgenteUtilizzando Firebug, esamina la casella di testo Password su Facebook e nota che ha lo stesso nome della casella di testo Email o Telefono.

Il motivo per cui nell'illustrazione precedente è stata evidenziata solo la casella di testo Email o Telefono è che si trova per prima nel codice sorgente della pagina Facebook.

tag e attributo – Selettore CSS

Questa strategia utilizza il tag HTML e un attributo specifico dell'elemento a cui accedere.

Sintassi

css=tag[attribute=value]

tag = il tag HTML dell'elemento a cui si accede
[ e ] = parentesi quadre all'interno delle quali verrà inserito un attributo specifico e il suo valore corrispondente
attributo = l'attributo da utilizzare. È consigliabile utilizzare un attributo univoco per l'elemento come un nome o un ID.
valore = il valore corrispondente dell'attributo scelto.

Passo 1) Accedere a Mercury Pagina di registrazione dei tour https://demo.guru99.com/test/newtours/register.php e ispeziona la casella di testo "Cognome". Prendi nota del suo tag HTML ("input" in questo caso) e del suo nome ("lastName").

Passo 2) In Selenium IDE, inserisci "css=input[nome=cognome]" nel file Target casella e fare clic su Trova. Selenium L'IDE dovrebbe riuscire ad accedere correttamente alla casella Cognome.

Quando più elementi hanno lo stesso tag e attributo HTML, verrà riconosciuto solo il primo. Questo comportamento è simile all'individuazione degli elementi utilizzando i selettori CSS con lo stesso tag e classe.

tag, classe e attributo: selettore CSS

Sintassi

css=tag.class[attribute=value]

tag = il tag HTML dell'elemento a cui si accede
. = il segno del punto. Questo dovrebbe essere sempre presente quando si utilizza un selettore CSS con classe
class = la classe dell'elemento a cui si accede
[ e ] = parentesi quadre all'interno delle quali verrà inserito un attributo specifico e il suo valore corrispondente
attributo = l'attributo da utilizzare. È consigliabile utilizzare un attributo univoco per l'elemento come un nome o un ID.
valore = il valore corrispondente dell'attributo scelto.

Passo 1) Vai alla pagina dimostrativa https://demo.guru99.com/test/facebook.html e usa Firebug per ispezionare le caselle di input 'Email or Phone' e 'Password'. Prendi nota del loro tag HTML, della classe e degli attributi. Per questo esempio, selezioneremo i loro attributi 'tabindex'.

Passo 2) Accederemo prima alla casella di testo "Email o telefono". Quindi, useremo un valore tabindex pari a 1. Inserisci "css=input.inputtext[tabindex=1]" in Selenium IDE Target casella e fare clic su Trova. La casella di input "Email o telefono" dovrebbe essere evidenziata.

Passo 3) Per accedere alla casella di immissione della password, basta sostituire il valore dell'attributo tabindex. Inserire "css=input.inputtext[tabindex=2]" nel Target casella e fare clic sul pulsante Trova. Selenium L'IDE deve essere in grado di identificare correttamente la casella di testo Password.

testo interno – Selettore CSS

Come avrai notato, alle etichette HTML raramente vengono forniti attributi id, nome o classe. Quindi, come possiamo accedervi? La risposta è attraverso l’uso dei loro testi interiori. I testi interni sono gli effettivi modelli di stringhe che l'etichetta HTML mostra sulla pagina.

Sintassi

css=tag:contains("inner text")

tag = il tag HTML dell'elemento a cui si accede
testo interno = il testo interno dell'elemento

Passo 1) Accedere a Mercury Home page dei tour https://demo.guru99.com/test/newtours/ e usa Firebug per indagare sull'etichetta "Password". Prendi nota del suo tag HTML (che in questo caso è "font") e nota che 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 dovrebbe essere in grado di accedere all'etichetta Password come mostrato nell'immagine seguente.

Passo 3) Questa volta sostituisci il testo interno con "Boston" in modo che il tuo Target diventerà ora “css=font:contains(“Boston”)”. Fai clic su Trova. Dovresti notare che l'etichetta “Boston to San Francisco” diventa evidenziata. Questo ti mostra che Selenium L'IDE può accedere ad un'etichetta lunga anche se hai appena indicato la prima parola del suo testo interno.

Sommario

Sintassi per la localizzazione tramite utilizzo del selettore CSS

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]