Localizzatori in Selenium IDE: CSS Selector - DOM - XPath - ID

Sommario:

Anonim

Cosa sono i localizzatori?

Locator è un comando che dice a Selenium IDE su quali elementi della GUI (ad esempio Casella di testo, pulsanti, caselle di controllo ecc.) È necessario operare. L'identificazione degli elementi GUI corretti è un prerequisito per la creazione di uno script di automazione. Ma l'identificazione accurata degli elementi della GUI è più difficile di quanto sembri. A volte, si finisce per lavorare con elementi GUI errati o con nessun elemento! Quindi, Selenium fornisce una serie di localizzatori per individuare con precisione un elemento della GUI

I diversi tipi di CSS Locator in Selenium IDE

Ci sono comandi che non necessitano di un localizzatore (come il comando "apri"). Tuttavia, la maggior parte di loro necessita di localizzatori di elementi nel webdriver Selenium.

La scelta del localizzatore dipende in gran parte dalla tua applicazione sotto test . In questo tutorial, passeremo da Facebook a nuovi tour.demoaut sulla base dei localizzatori supportati da queste applicazioni. Allo stesso modo nel tuo progetto di test, selezionerai uno qualsiasi dei localizzatori di elementi sopra elencati nel webdriver Selenium, in base al supporto dell'applicazione.

Localizzazione per ID

Questo è il modo più comune per individuare gli elementi poiché si suppone che gli ID siano univoci per ogni elemento.

Formato di destinazione: id = id dell'elemento

Per questo esempio, utilizzeremo Facebook come app di test perché Mercury Tours non utilizza attributi ID.

Passaggio 1. Da quando è stato creato questo tutorial, Facebook ha modificato il design della pagina di accesso. Usa questa pagina demo http://demo.guru99.com/test/facebook.html per i test. Controlla la casella di testo "Email o telefono" utilizzando Firebug e prendi nota del suo ID. In questo caso, l'ID è "email".

Passaggio 2. Avvia Selenium IDE e inserisci "id = email" nella casella Target. Fare clic sul pulsante Trova e notare che la casella di testo "Email o telefono" viene evidenziata con il giallo e bordata con il verde, il che significa che Selenium IDE è stato in grado di individuare correttamente quell'elemento.

Localizzazione per nome

La localizzazione degli elementi per nome è molto simile alla localizzazione per ID, tranne per il fatto che usiamo invece il prefisso "name =" .

Formato di destinazione: nome = nome dell'elemento

Nella dimostrazione seguente, ora utilizzeremo Mercury Tours perché tutti gli elementi significativi hanno nomi.

Passaggio 1. Vai a http://demo.guru99.com/test/newtours/ e utilizza Firebug per ispezionare la casella di testo "Nome utente". Prendi nota del suo attributo name.

Qui, vediamo che il nome dell'elemento è "userName".

Passaggio 2. In Selenium IDE, immettere "name = userName" nella casella Target e fare clic sul pulsante Trova. Selenium IDE dovrebbe essere in grado di individuare la casella di testo Nome utente evidenziandola.

Individuazione per nome utilizzando i filtri

I filtri possono essere utilizzati quando più elementi hanno lo stesso nome. I filtri sono attributi aggiuntivi utilizzati per distinguere gli elementi con lo stesso nome.

Formato di destinazione : nome = name_of_the_element filter = value_of_filter

Vediamo un esempio:

Passaggio 1 . Accedi a Mercury Tours utilizzando "tutorial" come nome utente e password. Dovrebbe portarti alla pagina Flight Finder mostrata di seguito.

Passaggio 2. Utilizzando Firebug, notare che i pulsanti di opzione Round Trip e One Way hanno lo stesso nome "tripType". Tuttavia, hanno attributi VALUE diversi, quindi possiamo utilizzarli come filtro.

Passaggio 3.

  • Accederemo prima al pulsante di opzione One Way. Fare clic sulla prima riga nell'Editor.
  • Nella casella di comando di Selenium IDE, inserisci il comando "clic".
  • Nella casella Target, inserisci "name = tripType value = oneway". La parte "value = oneway" è il nostro filtro.

Passaggio 4 . Fare clic sul pulsante Trova e notare che Selenium IDE è in grado di evidenziare il pulsante di opzione One Way con il verde, il che significa che siamo in grado di accedere all'elemento con successo utilizzando il suo attributo VALUE.

Passaggio 5. Premere il tasto "X" sulla tastiera per eseguire questo comando di clic. Si noti che il pulsante di opzione One Way è stato selezionato.

Puoi fare esattamente la stessa cosa con il pulsante di opzione Round Trip, questa volta, utilizzando "name = tripType value = roundtrip" come obiettivo.

Localizzazione tramite testo del collegamento

Questo tipo di localizzatore CSS in Selenium si applica solo ai testi dei collegamenti ipertestuali. Accediamo al collegamento anteponendo al nostro target "link =" e quindi seguito dal testo del collegamento ipertestuale.

Formato di destinazione : link = link_text

In questo esempio, accediamo al link "REGISTER" che si trova nella home page di Mercury Tours.

Passo 1.

  • Innanzitutto, assicurati di essere disconnesso da Mercury Tours.
  • Vai alla home page di Mercury Tours.

Passaggio 2 .

  • Utilizzando Firebug, ispeziona il link "REGISTRA". Il testo del collegamento si trova tra i tag e.
  • In questo caso, il testo del nostro collegamento è "REGISTRATI". Copia il testo del link.

Passaggio 3 . Copia il testo del link in Firebug e incollalo nella casella Target di Selenium IDE. Prefissalo con "link =".

Passaggio 4. Fare clic sul pulsante Trova e notare che Selenium IDE è stato in grado di evidenziare correttamente il collegamento REGISTRA.

Passaggio 5. Per verificare ulteriormente, immettere "clickAndWait" nella casella di comando ed eseguirlo. Selenium IDE dovrebbe essere in grado di fare clic su quel collegamento REGISTRAZIONE con successo e portarti alla pagina di registrazione mostrata di seguito.

Localizzazione tramite CSS Selector

I selettori CSS in Selenium sono modelli di stringhe utilizzati per identificare un elemento in base a una combinazione di tag HTML, id, classe e attributi. La localizzazione da parte dei selettori CSS in Selenium è più complicata dei metodi precedenti, ma è la strategia di localizzazione più comune degli utenti avanzati di Selenium perché può accedere anche a quegli elementi che non hanno ID o nome.

I selettori CSS in Selenium hanno molti formati, ma ci concentreremo solo su quelli più comuni.

  • Tag e ID
  • Etichetta e classe
  • Tag e attributo
  • Tag, classe e attributo
  • Testo interno

Quando si utilizza questa strategia, anteponiamo sempre alla casella Target "css =" come verrà mostrato negli esempi seguenti.

Localizzazione tramite selettore CSS - Tag e ID

Ancora una volta, useremo la casella di testo Email di Facebook in questo esempio. Come puoi ricordare, ha un ID di "email" e abbiamo già avuto accesso nella sezione "Individuazione per ID". Questa volta useremo un selettore CSS selenio con ID per accedere a quello stesso elemento.

Sintassi

Descrizione

css = tag # id
  • tag = il tag HTML dell'elemento a cui si accede
  • # = il segno cancelletto. Dovrebbe essere sempre presente quando si utilizza un selettore CSS Selenium con ID
  • id = l'ID dell'elemento a cui si accede

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

Passaggio 1. Accedi a www.facebook.com. Utilizzando 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".

Passaggio 2. Immettere "css = input # email" nella casella Target di Selenium IDE e fare clic sul pulsante Trova. Selenium IDE dovrebbe essere in grado di evidenziare quell'elemento.

Individuazione tramite selettore CSS - Tag e classe

La localizzazione tramite CSS Selector in Selenium utilizzando un tag HTML e un nome di classe è simile all'utilizzo di un tag e ID, ma in questo caso viene utilizzato un punto (.) Invece di un cancelletto.

Sintassi

Descrizione

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

Passaggio 1. Vai alla pagina demo http://demo.guru99.com/test/facebook.html e utilizza Firebug per controllare la casella di testo "Email o telefono". Si noti che il suo tag HTML è "input" e la sua classe è "inputtext".

Passaggio 2. In Selenium IDE, immettere "css = input.inputtext" nella casella Target e fare clic su Trova. Selenium IDE dovrebbe essere in grado di riconoscere la casella di testo Email o Telefono.

Tieni presente che quando più elementi hanno lo stesso tag HTML e nome, verrà riconosciuto solo il primo elemento nel codice sorgente . Utilizzando Firebug, ispeziona la casella di testo Password in 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 viene prima nella fonte della pagina di Facebook.

Individuazione tramite selettore CSS: tag e attributo

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

Sintassi

Descrizione

css = tag [attributo = valore]
  • 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. Si consiglia di utilizzare un attributo univoco per l'elemento come un nome o un ID.
  • valore = il valore corrispondente dell'attributo scelto.

Passaggio 1. Vai alla pagina di registrazione di Mercury Tours (http://demo.guru99.com/test/newtours/register.php) e controlla la casella di testo "Cognome". Prendi nota del suo tag HTML ("input" in questo caso) e del suo nome ("lastName").

Passaggio 2. In Selenium IDE, immettere "css = input [name = lastName]" nella casella Target e fare clic su Trova. Selenium IDE dovrebbe essere in grado di accedere alla casella Cognome con successo.

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

Individuazione tramite selettore CSS: tag, classe e attributo

Sintassi Descrizione
css = tag.class [attributo = valore]
  • tag = il tag HTML dell'elemento a cui si accede
  • . = il segno del punto. Dovrebbe essere sempre presente quando si utilizza un selettore CSS con la 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. Si consiglia di utilizzare un attributo univoco per l'elemento come un nome o un ID.
  • valore = il valore corrispondente dell'attributo scelto.

Passaggio 1. Vai alla pagina demo http://demo.guru99.com/test/facebook.html e utilizza Firebug per controllare le caselle di immissione "Email o telefono" e "Password". Prendi nota del loro tag HTML, classe e attributi. Per questo esempio, selezioneremo i loro attributi "tabindex".

Passaggio 2. Accederemo prima alla casella di testo "Email o telefono". Pertanto, utilizzeremo un valore tabindex pari a 1. Immettere "css = input.inputtext [tabindex = 1]" nella casella Target dell'IDE di Selenium e fare clic su Trova. La casella di immissione "Email o telefono" dovrebbe essere evidenziata.

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

Localizzazione tramite selettore CSS - testo interno

Come avrai notato, alle etichette HTML raramente vengono assegnati ID, nome o attributi di classe. Quindi, come accedervi? La risposta è attraverso l'uso dei loro testi interni. I testi interni sono i modelli di stringa effettivi che l'etichetta HTML mostra sulla pagina.

Sintassi

Descrizione

css = tag: contiene ("testo interno")
  • tag = il tag HTML dell'elemento a cui si accede
  • testo interno = il testo interno dell'elemento

Passaggio 1. Accedi alla home page di Mercury Tours (http://demo.guru99.com/test/newtours/) e utilizza Firebug per esaminare l'etichetta "Password". Prendi nota del suo tag HTML (che in questo caso è "font") e nota che non ha attributi class, id o name.

Passaggio 2. Digitare css = font: contains ("Password:") nella casella Target di Selenium IDE e fare clic su Trova. Selenium IDE dovrebbe essere in grado di accedere all'etichetta della password come mostrato nell'immagine sottostante.

Passaggio 3. Questa volta, sostituisci il testo interno con "Boston" in modo che il tuo Target ora diventi "css = font: contains (" Boston ")". Fare clic su Trova. Dovresti notare che l'etichetta "Da Boston a San Francisco" viene evidenziata. Questo ti mostra che Selenium IDE può accedere a un'etichetta lunga anche se hai appena indicato la prima parola del suo testo interno.

Localizzazione tramite DOM (Document Object Model)

Il Document Object Model (DOM), in termini semplici, è il modo in cui gli elementi HTML sono strutturati. Selenium IDE è in grado di utilizzare il DOM per accedere agli elementi della pagina. Se usiamo questo metodo, la nostra casella Target inizierà sempre con "dom = document…"; tuttavia, il prefisso "dom =" viene normalmente rimosso perché Selenium IDE è in grado di interpretare automaticamente tutto ciò che inizia con la parola chiave "document" in modo che sia comunque un percorso all'interno del DOM in Selenium.

Esistono quattro modi di base per individuare un elemento tramite DOM in Selenium:

  • getElementById
  • getElementsByName
  • dom: name (si applica solo agli elementi all'interno di un modulo denominato)
  • dom: index

Localizzazione tramite DOM - getElementById

Concentriamoci sul primo metodo, utilizzando il metodo getElementById di DOM in Selenium. La sintassi sarebbe:

Sintassi

Descrizione

document.getElementById ("id dell'elemento")

id dell'elemento = questo è il valore dell'attributo ID dell'elemento a cui accedere. Questo valore deve essere sempre racchiuso tra una coppia di parentesi ("").

Passaggio 1. Utilizzare questa pagina demo http://demo.guru99.com/test/facebook.html Accedervi e utilizzare Firebug per controllare la casella di controllo "Resta connesso". Prendi nota del suo ID.

Possiamo vedere che l'ID che dovremmo usare è "persist_box".

Passaggio 2. Aprire Selenium IDE e nella casella Target, immettere "document.getElementById (" persist_box ")" e fare clic su Trova. Selenium IDE dovrebbe essere in grado di individuare la casella di controllo "Resta connesso". Sebbene non possa evidenziare l'interno della casella di controllo, Selenium IDE può comunque circondare l'elemento con un bordo verde brillante come mostrato di seguito.

Localizzazione tramite DOM - getElementsByName

Il metodo getElementById può accedere a un solo elemento alla volta, ovvero l'elemento con l'ID specificato. Il metodo getElementsByName è diverso. Raccoglie una serie di elementi che hanno il nome specificato. Si accede ai singoli elementi utilizzando un indice che inizia da 0.

getElementById

  • Otterrà solo un elemento per te.
  • Quell'elemento porta l'ID specificato tra parentesi di getElementById ().

getElementsByName

  • Otterrà una raccolta di elementi i cui nomi sono tutti uguali.
  • Ogni elemento è indicizzato con un numero che inizia da 0 proprio come un array
  • Si specifica a quale elemento si desidera accedere inserendo il suo numero di indice tra parentesi quadre nella sintassi di getElementsByName di seguito.

Sintassi

Descrizione

document.getElementsByName ("name") [index]
  • nome = nome dell'elemento come definito dal suo attributo "nome"
  • index = un numero intero che indica quale elemento all'interno dell'array getElementsByName verrà utilizzato.

Passaggio 1. Vai alla home page di Mercury Tours e accedi utilizzando "tutorial" come nome utente e password. Firefox dovrebbe portarti alla schermata Flight Finder.

Passaggio 2. Utilizzando Firebug, ispezionare i tre pulsanti di opzione nella parte inferiore della pagina (pulsanti di opzione Classe economica, Classe business e Prima classe). Notare che hanno tutti lo stesso nome che è "servClass".

Passaggio 3. Accediamo prima al pulsante di opzione "Classe economica". Di tutti questi tre pulsanti di opzione, questo elemento viene prima, quindi ha un indice di 0. In Selenium IDE, digitare "document.getElementsByName (" servClass ") [0]" e fare clic sul pulsante Trova. Selenium IDE dovrebbe essere in grado di identificare correttamente il pulsante di opzione della classe economica.

Passaggio 4. Modificare il numero di indice in 1 in modo che il target diventi ora document.getElementsByName ("servClass") [1]. Fare clic sul pulsante Trova e Selenium IDE dovrebbe essere in grado di evidenziare il pulsante di opzione "Business class", come mostrato di seguito.

Localizzazione tramite DOM - dom: name

Come accennato in precedenza, questo metodo verrà applicato solo se l'elemento a cui si accede è contenuto in un modulo denominato.

Sintassi

Descrizione

document.forms ["nome del modulo"] .elements ["nome dell'elemento"]
  • nome del modulo = il valore dell'attributo nome del tag del modulo che contiene l'elemento a cui si desidera accedere
  • nome dell'elemento = il valore dell'attributo nome dell'elemento a cui desideri accedere

Passaggio 1. Accedere alla home page di Mercury Tours (http://demo.guru99.com/test/newtours/) e utilizzare Firebug per ispezionare la casella di testo del nome utente. Si noti che è contenuto in un modulo denominato "home".

Passaggio 2. In Selenium IDE, digitare "document.forms [" home "]. Elements [" userName "]" e fare clic sul pulsante Trova. Selenium IDE deve essere in grado di accedere all'elemento con successo.

Localizzazione tramite DOM - dom: index

Questo metodo si applica anche quando l'elemento non è all'interno di un modulo denominato perché utilizza l'indice del modulo e non il suo nome.

Sintassi

Descrizione

document.forms [indice del modulo] .elements [indice dell'elemento]
  • indice del modulo = il numero indice (a partire da 0) del modulo rispetto all'intera pagina
  • indice dell'elemento = il numero indice (a partire da 0) dell'elemento rispetto all'intera forma che lo contiene

Accederemo alla casella di testo "Telefono" nella pagina di registrazione di Mercury Tours. Il modulo in quella pagina non ha nome e attributo ID, quindi questo sarà un buon esempio.

Passaggio 1. Accedere alla pagina di registrazione di Mercury Tours e ispezionare la casella di testo Telefono. Si noti che il modulo che lo contiene non ha attributi ID e nome.

Passaggio 2. Immettere "document.forms [0] .elements [3]" nella casella Target di Selenium IDE e fare clic sul pulsante Trova. Selenium IDE dovrebbe essere in grado di accedere correttamente alla casella di testo Telefono.

Passaggio 3. In alternativa, è possibile utilizzare il nome dell'elemento invece del suo indice e ottenere lo stesso risultato. Inserisci "document.forms [0] .elements [" phone "]" nella casella Target di Selenium IDE. La casella di testo Telefono dovrebbe comunque essere evidenziata.

Localizzazione tramite XPath

XPath è il linguaggio utilizzato per individuare i nodi XML (Extensible Markup Language). Poiché l'HTML può essere pensato come un'implementazione di XML, possiamo anche usare XPath per individuare gli elementi HTML.

Vantaggio: può accedere a quasi tutti gli elementi, anche quelli senza attributi di classe, nome o id.

Svantaggio: è il metodo più complicato per identificare gli elementi a causa di troppe regole e considerazioni diverse.

Fortunatamente, Firebug può generare automaticamente localizzatori XPath Selenium. Nell'esempio seguente, accediamo a un'immagine a cui non è possibile accedere tramite i metodi discussi in precedenza.

Passaggio 1. Vai alla home page di Mercury Tours e utilizza Firebug per ispezionare il rettangolo arancione a destra della casella gialla "Collegamenti". Fare riferimento all'immagine sottostante.

Passaggio 2 . Fare clic con il pulsante destro del mouse sul codice HTML dell'elemento e quindi selezionare l'opzione "Copia XPath".

Passaggio 3. In Selenium IDE, digitare una barra "/" nella casella Target, quindi incollare l'XPath che abbiamo copiato nel passaggio precedente. La voce nella casella Target dovrebbe ora iniziare con due barre "//".

Passaggio 4 . Fare clic sul pulsante Trova. Selenium IDE dovrebbe essere in grado di evidenziare la casella arancione come mostrato di seguito.

Sommario

Sintassi per l'utilizzo del localizzatore

Metodo

Sintassi di destinazione

Esempio
Per ID id = id_of_the_element id = email
Per nome nome = nome_dell'elemento nome = nomeutente
Per nome utilizzando filtri name = name_of_the_element filter = value_of_filter name = tripType valore = oneway
Per testo del collegamento link = link_text link = REGISTRATI
Tag e ID css = tag # id css = input # email
Tag e classe css = tag. classe css = input.inputtext
Tag e attributo css = tag [attributo = valore] css = input [nome = cognome]
Tag, classe e attributo css = tag. classe [attributo = valore] css = input.inputtext [tabindex = 1]