Localizzatori dentro Selenium

Cosa sono i localizzatori?

Locator è un comando che dice Selenium IDE quali elementi della GUI (ad esempio Text Box, Pulsanti, Controllo Boxes ecc) le sue necessità su cui 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, finisci per lavorare con elementi GUI errati o senza alcun elemento! Quindi, Selenium fornisce una serie di localizzatori per individuare con precisione un elemento della GUI

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

La scelta del localizzatore dipende in gran parte dall'applicazione in fase di test. In questo tutorial, alterneremo tra Facebook, new tours.demoaut sulla base dei localizzatori supportati da queste applicazioni. Allo stesso modo nel tuo Testing progetto, selezionerai uno qualsiasi dei localizzatori di elementi sopra elencati in Selenium webdriver, in base al supporto dell'applicazione.

Localizzazione tramite ID

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

Target Formato: id=id dell'elemento

Per questo esempio, utilizzeremo Facebook come app di prova perché Mercury I tour non utilizzano attributi ID.

Passo 1) Da quando è stato creato questo tutorial, Facebook ha cambiato il design della pagina di accesso. Utilizza questa pagina dimostrativa https://demo.guru99.com/test/facebook.html per il test. Ispeziona la casella di testo "Email or Phone" usando Firebug e prendi nota del suo ID. In questo caso, l'ID è "email".

Passo 2) Lancio Selenium IDE e inserisci “id=email” nel Target casella. Fai clic sul pulsante Trova e nota che la casella di testo "Email o telefono" diventa evidenziata in giallo e bordata in verde, il che significa, Selenium L'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 utilizziamo il metodo “nome=” prefisso invece.

Target Formato: nome=nome dell'elemento

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

Passo 1) Accedere a https://demo.guru99.com/test/newtours/ e usa Firebug per ispezionare la casella di testo "Nome utente". Prendi nota del suo attributo name.

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

Passo 2) In Selenium IDE, inserisci "name=userName" nel file Target casella e fare clic sul pulsante Trova. Selenium L'IDE dovrebbe essere in grado di individuare la casella di testo Nome utente evidenziandola.

Come individuare l'elemento 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.

Target Formato: nome=nome_dell'elemento filtro=valore_del_filtro

Vediamo un esempio –

Passo 1) Collegarsi a Mercury Tour.

Collegarsi a Mercury Tour che utilizzano "tutorial" come nome utente e password. Dovrebbe portarti alla pagina Ricerca voli mostrata di seguito.

Passo 2) Utilizzando firebug utilizzare VALUE attributi.

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

Passo 3) Fare clic sulla prima riga.

• Per prima cosa accederemo al pulsante di opzione One Way. Fare clic sulla prima riga dell'editor.
• Nella casella Comando di Selenium IDE, inserisci il comando "clic".
• Nel Target casella, inserisci "name=tripType value=oneway". La parte "value=oneway" è il nostro filtro.

Passo 4) Fare clic sul pulsante Trova.

Notare che Selenium IDE è in grado di evidenziare il pulsante di opzione One Way in verde, il che significa che siamo in grado di accedere con successo all'elemento utilizzando il suo attributo VALUE.

Passo 5) Seleziona il pulsante di opzione One Way.

Premi il tasto "X" sulla tastiera per eseguire questo comando di clic. Si noti che il pulsante di opzione Unidirezionale è stato selezionato.

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

Individuazione 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.

Target Formato: collegamento=testo_collegamento

In questo esempio, accederemo al collegamento "REGISTRATI" che si trova sul file Mercury Home page dei tour.

Passo 1)

• Per prima cosa assicurati di essere disconnesso da Mercury Tour.
• Vai su Mercury Home page dei tour.

Passo 2)

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

Passo 3) Copia il testo del collegamento in Firebug e incollalo Selenium IDE Target box. Aggiungi il prefisso "link=".

Passo 4) Fai clic sul pulsante Trova e notalo Selenium L'IDE è stato in grado di evidenziare correttamente il collegamento REGISTRATI.

Passo 5) Per verificare ulteriormente, immettere "clickAndWait" nella casella Comando ed eseguirlo. Selenium IDE dovrebbe essere in grado di fare clic correttamente sul collegamento REGISTRATI e portarti alla pagina di registrazione mostrata di seguito.

Localizzazione tramite DOM (Document Object Model)

Modello a oggetti documento (DOM), in termini semplici, è il modo in cui sono strutturati gli elementi HTML. Selenium L'IDE è in grado di utilizzare il DOM per accedere agli elementi della pagina. Se utilizziamo questo metodo, il ns Target la casella inizierà sempre con “dom=document…”; tuttavia, il prefisso “dom=” viene normalmente rimosso perché Selenium L'IDE è in grado di interpretare automaticamente tutto ciò che inizia con la parola chiave "document" come un percorso all'interno del DOM Selenium comunque.

Esistono quattro modi fondamentali per individuare un elemento tramite DOM Selenium:

• getElementById
• getElementiPerNome
• dom:name (si applica solo agli elementi all'interno di un modulo con nome)
• dom: indice

Localizzazione tramite DOM – getElementById

Concentriamoci sul primo metodo: utilizzare il metodo getElementById del DOM in Selenium. La sintassi sarebbe:

Sintassi

document.getElementById("id of the element")

• id dell'elemento = questo è il valore dell'attributo ID dell'elemento a cui accedere. Questo valore deve essere sempre racchiuso tra parentesi (“”).

Passo 1) Utilizza questa pagina dimostrativa https://demo.guru99.com/test/facebook.html Navigateci e usate Firebug per ispezionare la casella di controllo "Keep me connected in". Prendete nota del suo ID.

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

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

Localizzazione tramite DOM – getElementsByName

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

	getElementById Otterrà solo un elemento per te. Quell'elemento porta l'ID che hai specificato tra parentesi di getElementById().
	getElementiPerNome 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 Per specificare l'elemento a cui si desidera accedere, inserire il suo numero di indice tra parentesi quadre nella sintassi di getElementsByName riportata di seguito.

Sintassi

document.getElementsByName(“name“)[index]

• name = nome dell'elemento come definito dal suo attributo 'name'
• indice = un numero intero che indica quale elemento verrà utilizzato all'interno dell'array getElementsByName.

Passo 1) Accedere a Mercury Home page dei tour e accedi utilizzando "tutorial" come nome utente e password. Firefox dovrebbe portarti alla schermata Ricerca voli.

Passo 2) Utilizzando Firebug, ispeziona i tre pulsanti di opzione nella parte inferiore della pagina (pulsanti di opzione Classe economica, Classe Business e Prima classe). Si noti che hanno tutti lo stesso nome che è "servClass".

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

Passo 4) Cambia il numero di indice in 1 in modo che il tuo Target diventerà ora document.getElementsByName(“servClass”)[1]. Fare clic sul pulsante Trova e Selenium L'IDE dovrebbe essere in grado di evidenziare il pulsante di opzione "Business class", come mostrato di seguito.

Localizzazione tramite DOM – dom:nome

Come accennato in precedenza, questo metodo si applicherà solo se l'elemento a cui stai accedendo è contenuto in un modulo denominato.

Sintassi

document.forms[“name of the form“].elements[“name of the element“]

• nome del modulo = il valore dell'attributo nome del tag del modulo che contiene l'elemento a cui desideri accedere
• nome dell'elemento = il valore dell'attributo nome dell'elemento a cui desideri accedere

Passo 1) Accedere a Mercury Home page dei tour https://demo.guru99.com/test/newtours/ e usa Firebug per ispezionare la casella di testo Nome utente. Nota che è contenuta in un modulo denominato "home".

Passo 2) In Selenium IDE, digitare "document.forms["home"].elements["userName"]" e fare clic sul pulsante Trova. Selenium L'IDE deve essere in grado di accedere correttamente all'elemento.

Localizzazione tramite DOM – dom:index

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

Sintassi

document.forms[index of the form].elements[index of the element]

• indice del modulo = il numero di indice (che inizia da 0) del modulo rispetto all'intera pagina
• indice dell'elemento = il numero di indice (a partire da 0) dell'elemento rispetto all'intero modulo che lo contiene

Accederemo alla casella di testo “Telefono” all’interno Mercury Pagina di registrazione dei tour. Il modulo in quella pagina non ha nome e attributo ID, quindi questo sarà un buon esempio.

Passo 1) Accedere a Mercury Pagina Registrazione Tour e ispeziona la casella di testo Telefono. Nota che il modulo che la contiene non ha attributi ID e nome.

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

Passo 3) In alternativa, puoi utilizzare il nome dell'elemento anziché il suo indice e ottenere lo stesso risultato. Immettere "document.forms[0].elements["telefono"]" nel Selenium IDE Target casella. 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 dell'XML, possiamo anche usare XPath nell'individuazione degli elementi HTML.

• Vantaggio: Può accedere a quasi tutti gli elementi, anche quelli senza attributi class, name o id.
• Svantaggio: È il metodo più complicato per identificare gli elementi a causa di troppe regole e considerazioni diverse.

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

Passo 1) Accedere a Mercury Homepage di Tours e usa Firebug per ispezionare il rettangolo arancione a destra della casella gialla "Links". Fai riferimento all'immagine qui sotto.

Passo 2) Fare clic con il tasto destro sul codice HTML dell'elemento e quindi selezionare l'opzione "Copia XPath".

Passo 3) In Selenium IDE, digitare una barra "/" nel file Target casella, quindi incolla l'XPath che abbiamo copiato nel passaggio precedente. La voce nel tuo Target la casella dovrebbe ora iniziare con due barre oblique “//”.

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