Localizzatori dentro Selenium

Che cosa sono i localizzatori in Selenium?

Un localizzatore è un comando che dirige Selenium IDE o Selenium WebDriver all'elemento GUI corretto, come una casella di testo, un pulsante, un collegamento o una casella di controllo, su cui deve essere eseguita un'azione. L'identificazione dell'elemento GUI corretto è un prerequisito per la creazione di qualsiasi script di automazione affidabile. Tuttavia, l'identificazione accurata è più difficile di quanto sembri. A volte, potresti finire per interagire con l'elemento sbagliato o con nessun elemento. Per risolvere questo problema, Selenium offre una varietà di strategie di localizzazione che consentono di individuare con precisione gli elementi dell'interfaccia grafica.

Mentre alcuni comandi, come il comando “apri”, non richiedono un localizzatore, la maggior parte di Selenium I comandi dipendono dai localizzatori degli elementi. La scelta del localizzatore dipende in gran parte dall'applicazione in fase di test (AUT). In questo tutorial, alterneremo tra Facebook e il Mercury Sito demo dei tour (newtours.demoaut), in base ai localizzatori supportati da ciascuna applicazione. Allo stesso modo, nel tuo analisi progetto, selezionerai un localizzatore di elementi in Selenium WebDriver in base alla struttura della tua applicazione.

Localizzazione tramite ID

Questo è il metodo più comune per individuare gli elementi, poiché gli ID sono pensati per essere univoci per ogni elemento di una pagina. Ogni qualvolta esiste un attributo ID, dovrebbe essere la prima scelta per script di test veloci, stabili e leggibili.

Target Formato: id=id dell'elemento

Per questo esempio, useremo una pagina demo di Facebook perché Mercury Tours non utilizza attributi ID per i campi principali del modulo.

Passo 1) Utilizza questa pagina dimostrativa https://demo.guru99.com/test/facebook.html per i test. Ispeziona la casella di testo "Email o telefono" utilizzando gli strumenti per sviluppatori integrati del tuo browser (premi F12 in Chrome, Edge o Firefox) e annota il 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” è evidenziata in giallo con un bordo verde, a indicare che Selenium L'IDE ha individuato correttamente l'elemento.

Localizzazione per nome

Individuare gli elementi tramite nome è simile a individuarli tramite ID, tranne per il fatto che utilizziamo l' “nome=” prefisso invece. Questo approccio è utile quando gli elementi non hanno un ID ma hanno un attributo name definito.

Target Formato: nome=nome dell'elemento

Per la seguente dimostrazione, useremo Mercury Tour perché tutti gli elementi significativi del modulo sul sito hanno un attributo nome.

Passo 1) Accedere a https://demo.guru99.com/test/newtours/ e utilizza gli Strumenti per sviluppatori del browser per esaminare la casella di testo "Nome utente". Prendi nota del suo attributo name.

Qui, 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 individuare la casella di testo Nome utente evidenziandola.

Come individuare l'elemento per nome utilizzando i filtri

I filtri sono utili quando più elementi condividono lo stesso attributo "nome". I filtri sono attributi aggiuntivi utilizzati per distinguere gli elementi che condividono lo stesso nome. Senza filtri, Selenium verrebbe selezionato per impostazione predefinita solo il primo elemento corrispondente.

Target Formato: nome=nome_dell_elemento filtro=valore_del_filtro

Facciamo un esempio.

Passo 1) Collegarsi a Mercury Tour.

Accedi a Mercury Per effettuare i tour, utilizzare "tutorial" sia come nome utente che come password. Dovrebbe apparire la pagina di ricerca voli, come mostrato di seguito.

Passo 2) Utilizza gli Strumenti per sviluppatori per esaminare gli attributi VALUE.

Si noti che i pulsanti di opzione "Andata e ritorno" e "Solo andata" condividono lo stesso nome "tripType". Tuttavia, hanno attributi VALORE diversi, quindi possiamo utilizzare ciascun valore come filtro.

Passo 3) Fai clic sulla prima riga nell'editor.

• Accederemo prima al pulsante di opzione Senso Unico. Fare clic sulla prima riga nel Selenium Editor IDE.
• Nella casella di comando, immettere il comando “click”.
• Nel Target Nella casella, inserisci “name=tripType value=oneway”. La parte “value=oneway” funge da filtro.

Passo 4) Fare clic sul pulsante Trova.

Notare che Selenium L'IDE evidenzia in verde il pulsante di opzione "One Way", confermando che l'elemento è stato acceduto correttamente tramite il suo attributo VALUE.

Passo 5) Selezionare il pulsante di opzione "Senso unico".

Premi il tasto “X” sulla tastiera per eseguire il comando di clic. Il pulsante di opzione "One Way" è ora selezionato.

È possibile eseguire la stessa azione sul pulsante di opzione Andata e ritorno, questa volta utilizzando "name=tripType value=roundtrip" come destinazione.

Individuazione tramite testo del collegamento

Questa strategia di localizzazione si applica solo ai testi dei collegamenti ipertestuali. Si accede al collegamento anteponendo all'elemento di destinazione il prefisso "link=" seguito dal testo visibile del collegamento ipertestuale. Questo metodo è altamente leggibile e funziona bene per i test di navigazione.

Target Formato: collegamento=testo_collegamento

Nell'esempio seguente, accederemo al link “REGISTRATI” che si trova su Mercury Home page dei tour.

Passo 1)

• Innanzitutto, assicurati di aver effettuato il logout da Mercury Tour.
• Passare alla Mercury Home page dei tour.

Passo 2)

• Utilizza gli Strumenti per sviluppatori per esaminare il link "REGISTRATI". Il testo del link appare tra i tag di ancoraggio di apertura e chiusura.
• In questo caso, il testo del link è "REGISTRATI". Copia il testo del link.

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

Passo 4) Fare clic sul pulsante Trova. Selenium L'IDE evidenzierà correttamente il collegamento REGISTRA.

Passo 5) Per verificare ulteriormente, immettere "clickAndWait" nella casella Comando ed eseguirlo. Selenium IDE farà clic correttamente sul link REGISTRATI e ti indirizzerà alla pagina di registrazione mostrata di seguito.

Localizzazione tramite DOM (Document Object Model)

Migliori Modello a oggetti documento (DOM)In termini semplici, descrive come gli elementi HTML sono strutturati come un albero di nodi. Selenium L'IDE può navigare in questo albero per accedere agli elementi della pagina. Quando si utilizza questo metodo, Target box inizia sempre con “dom=document…”. Il prefisso “dom=” viene in genere omesso perché Selenium L'IDE interpreta automaticamente qualsiasi valore che inizia con "document" come un percorso DOM.

Esistono quattro modi fondamentali per individuare un elemento attraverso il DOM in Selenium:

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

Localizzazione tramite DOM – getElementById

Esploriamo innanzitutto il metodo getElementById del DOM in SeleniumQuesto metodo restituisce un singolo elemento confrontando il suo attributo ID.

Sintassi

document.getElementById("id of the element")

• ID dell'elemento = il valore dell'attributo ID dell'elemento a cui si desidera accedere. Questo valore deve essere sempre racchiuso tra virgolette.

Passo 1) Utilizza questa pagina dimostrativa https://demo.guru99.com/test/facebook.htmlAccedete alla pagina e utilizzate gli Strumenti per sviluppatori per esaminare la casella di controllo "Mantienimi connesso". Annotate il suo ID.

L'ID che dovremmo usare è "persist_box".

Passo 2) Apri Selenium IDE e nel Target Nella casella inserisci document.getElementById(“persist_box”), quindi fai clic su Trova. Selenium L'IDE individuerà la casella di controllo "Mantienimi connesso". Sebbene non possa evidenziare l'interno della casella, la circonderà con un bordo verde brillante, come mostrato di seguito.

Localizzazione tramite DOM – getElementsByName

Il metodo getElementById accede a un solo elemento alla volta, ovvero all'elemento con l'ID specificato. Il metodo getElementsByName si comporta in modo diverso. Restituisce un array di elementi che condividono il nome specificato. I singoli elementi vengono acceduti tramite un indice numerico che inizia da 0.

	getElementById Restituisce un solo elemento. Tale elemento ha l'ID specificato tra parentesi nella funzione getElementById().
	getElementiPerNome Restituisce una collezione di elementi con nomi identici. Ogni elemento è indicizzato da un numero a partire da 0, come in un array. Per selezionare un elemento specifico, è necessario inserire il suo indice tra parentesi quadre, come mostrato nella sintassi seguente.

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) Passare alla Mercury Vai alla homepage di Tours e accedi utilizzando "tutorial" come nome utente e password. Il browser caricherà la schermata di ricerca voli.

Passo 2) Utilizza gli Strumenti per sviluppatori per esaminare i tre pulsanti di opzione in fondo alla pagina (Classe Economy, Classe Business e Prima Classe). Noterai che condividono tutti lo stesso nome, "servClass".

Passo 3) Innanzitutto, accediamo al pulsante di opzione “Classe economica”. Dei tre pulsanti di opzione, questo elemento appare per primo, quindi il suo indice è 0. In Selenium IDE, digita document.getElementsByName(“servClass”)[0] e fai clic sul pulsante Trova. Selenium IDE identificherà correttamente il pulsante di opzione per la classe Economy.

Passo 4) Cambia il numero di indice in 1, quindi il tuo Target diventa document.getElementsByName(“servClass”)[1]. Fai clic sul pulsante Trova e Selenium L'IDE evidenzierà il pulsante di opzione "Business class" come mostrato di seguito.

Localizzazione tramite DOM – dom:nome

Come accennato in precedenza, questo metodo si applica solo se l'elemento a cui si sta accedendo è contenuto all'interno di un modulo denominato. Il percorso di localizzazione inizia dal modulo e prosegue fino all'elemento di destinazione in base al nome.

Sintassi

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

• nome del modulo = il valore dell'attributo name del tag form che contiene l'elemento a cui si desidera 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 utilizzare gli Strumenti per sviluppatori per esaminare la casella di testo Nome utente. Noterete che è contenuta in un modulo denominato "home".

Passo 2) In Selenium Nell'IDE, digita document.forms[“home”].elements[“userName”] e fai clic sul pulsante Trova. Selenium L'IDE accederà correttamente all'elemento.

Localizzazione tramite DOM – dom:index

Questo metodo si applica anche quando l'elemento non si trova all'interno di un modulo denominato, poiché utilizza l'indice del modulo anziché il suo nome. Ciò risulta utile per le pagine legacy o i moduli generati automaticamente, dove la denominazione non è disponibile.

Sintassi

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

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

Accederemo alla casella di testo “Telefono” sul Mercury Pagina di registrazione per i tour. Il modulo presente in questa pagina non ha né un attributo nome né un attributo ID, quindi rappresenta un buon esempio.

Passo 1) Passare alla Mercury Nella pagina di registrazione dei tour, esaminate la casella di testo "Telefono". Noterete che il modulo circostante non presenta gli attributi "ID" né "nome".

Passo 2) Inserisci document.forms[0].elements[3] nel Selenium IDE Target casella e fare clic sul pulsante Trova. Selenium L'IDE accederà correttamente alla casella di testo Telefono.

Passo 3) In alternativa, puoi usare il nome dell'elemento al posto del suo indice per ottenere lo stesso risultato. Inserisci document.forms[0].elements[“phone”] nel Target casella. La casella di testo Telefono rimarrà evidenziata.

Localizzazione tramite XPath

XPath è il linguaggio di interrogazione utilizzato per navigare nei nodi XML (Extensible Markup Language). Poiché HTML può essere considerato un'implementazione di XML, XPath può anche individuare elementi HTML. È una delle strategie di localizzazione più potenti in Selenium.

• Vantaggio: Può accedere a quasi tutti gli elementi, inclusi quelli privi di attributi di classe, nome o ID.
• Svantaggio: Si tratta della strategia di localizzazione più complessa a causa delle sue numerose regole e variazioni di sintassi.

I moderni strumenti per sviluppatori dei browser possono generare automaticamente espressioni XPath. In Chrome, Edge o Firefox, fai clic con il pulsante destro del mouse su un elemento nel pannello Elementi e scegli Copia > Copia XPath. Nell'esempio seguente, accederemo a un'immagine che non può essere individuata utilizzando i metodi discussi in precedenza.

Passo 1) Passare alla Mercury Accedi alla homepage di Tours e utilizza gli Strumenti per sviluppatori per esaminare il rettangolo arancione a destra del riquadro giallo "Link", come mostrato di seguito.

Passo 2) Fai clic con il pulsante destro del mouse sul codice HTML dell'elemento, quindi seleziona l'opzione "Copia XPath".

Passo 3) In Selenium IDE, digita una singola barra obliqua “/” nel Target nella casella, quindi incolla l'XPath copiato nel passaggio precedente. L'ingresso nel Target la casella dovrebbe ora iniziare con due barre oblique “//”.

Passo 4) Fare clic sul pulsante Trova. Selenium L'IDE evidenzierà il riquadro arancione, come mostrato di seguito.

Perché è importante scegliere il localizzatore giusto

La scelta della corretta strategia di localizzazione è una delle decisioni più influenti in Selenium L'automazione è fondamentale perché influisce direttamente sulla stabilità degli script, sulla velocità di esecuzione e sui costi di manutenzione a lungo termine. Un localizzatore scelto in modo errato può causare test instabili, falsi positivi e frequenti rilavorazioni ogni volta che l'interfaccia utente dell'applicazione cambia. L'ordine di preferenza raccomandato dagli ingegneri di automazione esperti è: ID prima, poi Nome, seguito da Selettore CSS, Testo del collegamento e infine XPath.

I localizzatori basati su ID sono i più veloci perché la ricerca del browser è ottimizzata per identificatori univoci. I localizzatori basati sul nome sono quasi altrettanto efficienti quando i nomi sono univoci. I selettori CSS e XPath offrono flessibilità, ma tendono ad essere più lenti e meno stabili quando gli sviluppatori modificano il DOM. Il testo del link è ottimo per i link di navigazione, ma offre un riutilizzo limitato.

L'automazione stabile dipende anche dalla collaborazione con gli sviluppatori. Quando i tester richiedono ID o attributi data-* coerenti e significativi durante le revisioni del codice, la durabilità dei localizzatori migliora notevolmente. Evitate di affidarvi a ID generati automaticamente (come quelli prodotti dai framework) perché potrebbero cambiare tra una build e l'altra. Dando priorità a localizzatori leggibili e orientati all'intento, i team possono mantenere le suite di test gestibili e ridurre il debito tecnico con l'evoluzione dell'applicazione.

Migliori pratiche per la scrittura di localizzatori affidabili

I localizzatori affidabili sono il fondamento di un sistema manutenibile Selenium Suite di test. Le seguenti pratiche aiutano a ridurre gli errori degli script, a migliorare la leggibilità e a rendere i test resistenti alle modifiche dell'interfaccia utente.

1. Preferisci ID univoci: Verificate sempre prima la presenza di un attributo ID. Gli ID sono progettati per essere univoci all'interno di una pagina e rappresentano la scelta più performante.
2. Utilizzare gli attributi semantici Name e data-*: Incoraggiate gli sviluppatori ad aggiungere attributi di test stabili come data-testid o data-qa. Questi rimangono invariati anche quando cambiano le classi CSS.
3. Evitare assolutamente XPath: I percorsi assoluti come /html/body/div[2]/div[3]/span si rompono facilmente. Utilizza espressioni XPath relative con attributi come //input[@name='userName'].
4. Combina gli attributi per una maggiore precisione: Quando un singolo attributo non è univoco, combina più attributi (ad esempio, //button[@type='submit' e @name='login']) per individuare l'elemento corretto.
5. Utilizza il testo con saggezza: I localizzatori che dipendono dal testo visibile potrebbero non funzionare correttamente a seconda della localizzazione linguistica. Utilizzare i localizzatori basati sul testo solo quando il contenuto è stabile e monolingue.
6. Centralizzare le informazioni di localizzazione: Memorizza i localizzatori in una classe Page Object Model (POM) in modo che gli aggiornamenti possano essere effettuati in un unico punto anziché in numerosi script di test.
7. Convalida negli Strumenti per sviluppatori: Prima di aggiungere un localizzatore a uno script, testalo nella console del browser utilizzando $x("//xpath") per XPath o document.querySelector per CSS per confermare che restituisca esattamente un elemento.
8. Evita, se possibile, i localizzatori basati su indice: Le posizioni degli indici come [3] dipendono dall'ordine degli elementi. Anche piccole modifiche al layout possono spostare l'indice e interrompere lo script.

Applicando queste pratiche in modo coerente, gli ingegneri dell'automazione creano suite di test scalabili tra i team e in grado di resistere a frequenti aggiornamenti dell'interfaccia utente con una manutenzione minima.

DOMANDE FREQUENTI