Come usare Firebug per la creazione di script Selenium – Selenium Tutorial #4

Nel tutorial precedente, abbiamo imparato come creare script di test automatizzati utilizzando Selenium IDE e la sua funzione di registrazione. Abbiamo anche sfogliato le caratteristiche popolose di Selenium IDE. Abbiamo mirato a ospitare il lettore con le caratteristiche e i comandi più vitali di Selenium IDE.

Solo un promemoria – questo è il nostro 4 ° tutorial in serie di formazione Selenio libero.

Ora che siete abituati e in grado di creare script automatici utilizzando la modalità di registrazione di Selenium IDE, andiamo avanti con un altro strumento che svolge un ruolo molto importante nell’aiutarci a creare script di test efficaci noti come “Firebug”. Firebug ci aiuta a controllare le proprietà degli elementi web e delle pagine web.

Così, questo tutorial comprende l’installazione di Firebug e la sua usabilità.

Prendi nota che il contenuto di questo tutorial non è applicabile solo nel contesto di Selenium IDE; piuttosto può essere applicato ad ogni strumento di Selenium suite. Quindi preferirei usare il termine Selenio invece di Selenio IDE.

In questo tutorial, consente di imparare come utilizzare Firebug add-on per la creazione di script Selenium. Nel processo, impareremo anche come installare Firebug.

Introduzione a Firebug

Firebug è un componente aggiuntivo di Mozilla Firefox. Questo strumento ci aiuta a identificare o per essere più particolare ispezione HTML, CSS e JavaScript elementi su una pagina web. Ci aiuta a identificare gli elementi in modo univoco su una pagina web. Gli elementi possono essere trovati in modo univoco in base ai loro tipi di localizzatore di cui parleremo più avanti in questo tutorial.

Come installare Firebug?

Per la facilità di comprensione, vorremmo biforcare il processo di installazione nei seguenti passaggi.

Passo -1: Avviare il browser Mozilla Firefox e passare a questo Firebug add-on pagina di download. L’URL ci porta alla sezione componenti aggiuntivi di Firefox.

Passo -2: Fare clic sul pulsante “Aggiungi a Firefox” presente sulla pagina web. Fare riferimento alla figura seguente per lo stesso.

Step-3: Non appena clicchiamo sul pulsante “Aggiungi a Firefox”, apparirà una casella di avviso di sicurezza, fare clic sul pulsante” Consenti ” ora.

Step-4: Ora Firefox scarica il componente aggiuntivo sullo sfondo e viene visualizzata una barra di avanzamento.

Step-5: Non appena il processo viene completato, viene visualizzata la finestra di installazione del software. Ora fai clic sul pulsante “Installa ora”.

Step-6: Non appena l’installazione viene completata, viene visualizzato un pop-up che indica che firebug è stato installato correttamente. Ora scegli di chiudere questo pop-up.

Nota: A differenza di Selenium IDE, non siamo tenuti a riavviare Firefox per riflettere l’installazione di firebug, piuttosto viene prontamente.

Step-7: Ora per lanciare firebug, possiamo scegliere uno dei seguenti modi:

• Premere F12
• Fare clic sull’icona Firebug presente nell’angolo in alto a destra della finestra di Firefox.
• 
• Clicca sulla barra dei menu di Firefox ->Sviluppatore Web ->firebug -> Apri Firebug.

Passo-8: Ora il firebug può essere visto nella parte inferiore della finestra di Firefox.

Ora che abbiamo scaricato e installato firebug, andiamo avanti con i tipi di localizzatori che avremmo creato usando firebug.

Creazione di script Selenium utilizzando Firebug

A differenza di Selenium IDE, In Firebug, creiamo script di test automatizzati manualmente aggiungendo più passaggi di test per formare uno script di test logico e coerente.

Seguiamo un approccio progressivo e comprendiamo il processo passo dopo passo.

Scenario:

• Apri “”.
• Asserire Titolo dell’applicazione
• Inserire un nome utente non valido e password non valida e inviare i dettagli per il login.

Passo 1-Avviare Firefox e aprire Selenium IDE dalla barra dei menu.

Passo 2-Inserire l’indirizzo di applicazione in prova (“https://accounts.google.com”) all’interno della casella di testo URL di base.

Passo 3 – Per impostazione predefinita, il pulsante di registrazione è in stato ON. Ricordarsi di sintonizzare fuori stato in modo da disabilitare la modalità di registrazione. Avviso se la modalità di registrazione è in stato ON, potrebbe comportare la registrazione delle nostre interazioni con il browser web.

Passo 4 – Aprire l’applicazione in prova (https://accounts.google.com) in Firefox.

Passo 5-Avviare Firebug nel browser web.

Step 6 – Selezionare il passaggio di prova vuoto all’interno dell’Editor.

Passo 7 – Digitare “apri” nella casella di testo del comando presente nel riquadro dell’editor. Il comando” apri ” apre l’URL specificato nel browser web.

Raccomandazione: Durante la digitazione dei comandi nella casella di testo dei comandi, l’utente può sfruttare la funzione di selezione automatica. Pertanto, non appena l’utente digita una sequenza di caratteri, i suggerimenti corrispondenti verranno compilati automaticamente.

L’utente può anche fare clic sul menu a discesa disponibile all’interno della casella di testo dei comandi per esaminare tutti i comandi forniti da Selenium IDE.

Passo 8-Ora, movimento verso la sezione Firebug all’interno del browser web, espandere la sezione “testa” del codice HTML. Si noti il tag HTML<title>. Pertanto, per affermare il titolo della pagina web, richiederemmo il valore del tag <title>.

Copia il titolo della pagina web che è “Accedi – account Google” nel nostro caso.

Passo 9-Selezionare il secondo passaggio di prova vuoto all’interno dell’Editor.

Passo 10-Digitare “assertTitle” nella casella di testo del comando presente nel riquadro dell’editor. Il comando” assertTitle ” restituisce il titolo della pagina corrente e lo confronta con il titolo specificato.

Step 11 – Incolla il titolo copiato nel passaggio 8 nel campo di destinazione del secondo.

Passo 12 – Ora selezionare il terzo passaggio di prova vuoto nel riquadro dell’editor

Passo 13 – Digitare il comando “type” all’interno della casella di testo del comando. Il comando” type ” immette un valore nell’elemento web specificato nella GUI.

Passo 14-Ora passare al browser web, portare il cursore del mouse alla casella di testo” E-mail ” all’interno del modulo di login e premere un tasto destro del mouse.

Scegli l’opzione “Ispeziona elemento con Firebug”. Si noti che Firebug evidenzia automaticamente il codice HTML corrispondente per l’elemento web, ovvero “Casella di testo e-mail”.

Step 15 – Il codice HTML nell’illustrazione sopra mostra gli attributi di proprietà distinti appartenenti alla casella di testo “Email”. Si noti che esistono quattro proprietà (ID, tipo, segnaposto e nome) che identificano in modo univoco l’elemento Web nella pagina Web. Quindi spetta all’utente scegliere una o più proprietà per identificare l’elemento web.

Quindi, in questo caso, scegliamo ID come localizzatore. Copia il valore ID e incollalo nel campo di destinazione del terzo passaggio di test preceduto da “id=” per indicare Selenium IDE per individuare un elemento Web con ID come “Email”.

(Clicca per vedere l’immagine ingrandita)

Prendi nota che Selenium IDE è case sensitive, quindi digita il valore dell’attributo con attenzione e precisione lo stesso che viene visualizzato nel codice HTML.

Fase 16-Fare clic sul pulsante Trova per verificare se il localizzatore selezionato trova e individua l’elemento UI designato sulla pagina web.

Step 17-Ora, il passo successivo è quello di inserire i dati di test nella casella di testo Valore del terzo passo di test all’interno del Riquadro Editor. Inserisci “InvalidEmailID” nella casella di testo del valore. L’utente può modificare i dati di test come e quando si desidera.

Passo 18 – Ora selezionare il quarto passo di prova vuoto nel riquadro dell’editor

Passo 19 – Digitare il comando “type” all’interno della casella di testo del comando.

Passo 20-Ora passare al browser web, portare il cursore del mouse alla casella di testo “Password” all’interno del modulo di login e premere un tasto destro del mouse.

Scegli l’opzione “Ispeziona elemento con Firebug”.

Step 21-Il codice HTML sottostante mostra gli attributi di proprietà distinti appartenenti alla casella di testo” Password”. Si noti che esistono quattro proprietà (ID, tipo, segnaposto e nome) che identificano in modo univoco l’elemento Web nella pagina Web. Quindi spetta all’utente scegliere una o più proprietà per identificare l’elemento web.

Quindi, in questo caso, scegliamo ID come localizzatore. Copia il valore ID e incollalo nel campo di destinazione del terzo passo di test preceduto da “id=”.

(Fare clic per visualizzare l’immagine ingrandita)

Passo 22 – Fare clic sul pulsante Trova per verificare se il localizzatore a schede trova e individua l’elemento UI designato sulla pagina web.

Step 23-Ora, il passo successivo è quello di inserire i dati di test nella casella di testo Valore del quarto passo di test all’interno del Riquadro Editor. Inserisci “InvalidPassword” nella casella di testo del valore. L’utente può modificare i dati di test come e quando si desidera.

Passo 24 – Ora selezionare il quinto passo di prova vuoto nel riquadro dell’editor

Passo 25 – Digitare “click” comando all’interno della casella di testo del comando. Il comando” click ” fa clic su un elemento Web specificato all’interno della pagina web.

Passo 26-Ora passare al browser web, portare il cursore del mouse sul pulsante “Accedi” all’interno del modulo di login e premere un tasto destro del mouse.

Scegli l’opzione “Ispeziona elemento con Firebug”.

Step 27-Il codice HTML sottostante mostra gli attributi di proprietà distinti appartenenti al pulsante “Accedi”.

Scegli ID come localizzatore. Copia il valore ID e incollalo nel campo di destinazione del terzo passo di test preceduto da “id=”.

(Fare clic per visualizzare l’immagine ingrandita)

Passo 28 – Fare clic sul pulsante Trova per verificare se il localizzatore scelto trova e individua l’elemento UI designato sulla pagina web.

Lo script di test è completato ora. Fare riferimento alla seguente illustrazione per visualizzare lo script di test finito.

Step 29 – Riprodurre lo script di test creato e salvarlo nello stesso modo in cui abbiamo fatto nel tutorial precedente.

Conclusione

In questo tutorial, abbiamo introdotto ancora un altro strumento di creazione di script o meglio uno strumento che aiuta alla creazione di script.

Firebug sorprendentemente ha un grande potenziale per individuare gli elementi web su una pagina web. Così l’utente può sfruttare le capacità dello strumento nella creazione di script di test di automazione efficaci ed efficienti manualmente.

Prossimo tutorial # 5: Andando avanti nel prossimo tutorial, avremmo uno sguardo ai vari tipi di localizzatori in Selenium e la loro tecnica di accessibilità per costruire script di test. Nel frattempo, reader può iniziare a costruire i suoi script di test di automazione utilizzando Firebug.