how use firebug creating selenium scripts selenium tutorial 4
Nel tutorial precedente , abbiamo imparato a creare script di test automatizzati utilizzando Selenium IDE e la sua funzione di registrazione. Abbiamo anche sfogliato populous caratteristiche di Selenium IDE . Abbiamo mirato a tormentare il lettore con le caratteristiche ei comandi più vitali di Selenium IDE.
Solo un promemoria: questo è il nostro quarto tutorial gratuito Serie di allenamento al selenio .
Ora che sei abituato e in grado di creare script automatizzati utilizzando la modalità di registrazione di Selenium IDE, andiamo avanti con un altro strumento che gioca 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.
Pertanto, questo tutorial comprende l'installazione di Firebug e la sua usabilità.
Tieni presente che il contenuto di questo tutorial non è applicabile solo nel contesto di Selenium IDE; piuttosto può essere applicato a tutti gli strumenti della suite Selenium. Quindi preferirei usare il termine Selenium invece di Selenium IDE.
In questo tutorial, impariamo come utilizzare il componente aggiuntivo Firebug per la creazione di script Selenium. Nel processo, impareremo anche come installare Firebug.
Cosa imparerai:
- Introduzione a Firebug
- Come installare Firebug?
- Creazione di script selenio utilizzando Firebug
- Conclusione
- Lettura consigliata
Introduzione a Firebug
Firebug è un componente aggiuntivo di Mozilla Firefox. Questo strumento ci aiuta a identificare o ad essere più precisi nell'ispezione di elementi HTML, CSS e JavaScript 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 localizzatori di cui parleremo più avanti in questo tutorial.
Come installare Firebug?
Per maggiore facilità di comprensione, suddividiamo il processo di installazione nei seguenti passaggi.
Passo 1: Avvia il browser Mozilla Firefox e vai a questo Pagina di download del componente aggiuntivo Firebug . L'URL ci porta alla sezione dei componenti aggiuntivi di Firefox.
Passo 2: Fare clic sul pulsante 'Aggiungi a Firefox' presente nella pagina web. Fare riferimento alla figura seguente per lo stesso.
Passaggio 3: Non appena si fa clic sul pulsante 'Aggiungi a Firefox', viene visualizzata una finestra di avviso di sicurezza, fare clic sul pulsante 'Consenti' ora.
Passaggio 4: Ora Firefox scarica il componente aggiuntivo sullo sfondo e viene visualizzata una barra di avanzamento.
Passaggio 5: Non appena il processo è completato, viene visualizzata la finestra di installazione del software. Ora fai clic sul pulsante 'Installa ora'.
Passaggio 6: Al termine dell'installazione, viene visualizzato un popup che informa che il firebug è stato installato correttamente. Ora scegli di chiudere questo popup.
Nota : A differenza di Selenium IDE, non siamo tenuti a riavviare Firefox per riflettere l'installazione di firebug, piuttosto viene prontamente.
Passaggio 7: Ora per avviare Firebug, possiamo scegliere uno dei seguenti modi:
- Premi F12
- Fare clic sull'icona Firebug presente nell'angolo in alto a destra della finestra di Firefox.
-
- Fare clic sulla barra dei menu di Firefox -> Sviluppatore Web -> Firebug -> Apri Firebug.
Passaggio 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 creeremmo utilizzando firebug.
Creazione di script selenio utilizzando Firebug
A differenza di Selenium IDE, in Firebug creiamo manualmente script di test automatizzati 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 'https://accounts.google.com'.
- Affermare il titolo della domanda
- Immettere un nome utente e una password non validi e inviare i dettagli per accedere.
Passo 1 - Avvia Firefox e apri Selenium IDE dalla barra dei menu.
Passo 2 - Immettere l'indirizzo dell'applicazione sottoposta a test ('https://accounts.google.com') nella casella di testo dell'URL di base.
Passaggio 3 - Per impostazione predefinita, il pulsante Registra è in stato ON. Ricordarsi di sintonizzarlo sullo stato OFF in modo da disabilitare la modalità di registrazione. Nota se la modalità di registrazione è in stato ON, potrebbe comportare la registrazione delle nostre interazioni con il browser web.
Passaggio 4: Apri l'applicazione in prova (https://accounts.google.com) in Firefox.
Passaggio 5 - Avvia Firebug nel browser web.
Passaggio 6 - Seleziona la fase di prova vuota nell'Editor.
Passaggio 7 - Digita 'apri' nella casella di testo del comando presente nel riquadro dell'editor. Il comando 'open' apre l'URL specificato nel browser web.
Raccomandazione: durante la digitazione dei comandi nella casella di testo del comando, 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 del comando per visualizzare tutti i comandi forniti da Selenium IDE.
Passaggio 8 - Ora, spostati verso la sezione Firebug all'interno del browser web, espandi la sezione 'head' del codice HTML. Notare il tag HTML. Quindi per affermare il titolo della pagina web, avremmo bisogno del valore del tag.
Copia il titolo della pagina web che è 'Accedi - Account Google' nel nostro caso.
Passaggio 9 - Seleziona il secondo passaggio di test vuoto nell'Editor.
Passaggio 10 - Digita '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.
strumento per testare il servizio web rest
Passaggio 11 - Incolla il titolo copiato nel passaggio 8 nel campo Target del secondo.
Passaggio 12 - Ora seleziona il terzo passaggio di test vuoto nel riquadro dell'editor
Passaggio 13 - Digitare il comando 'tipo' nella casella di testo del comando. Il comando 'type' immette un valore nell'elemento web specificato nella GUI.
Passaggio 14 - Ora passa al browser web, porta il cursore del mouse sulla casella di testo 'Email' all'interno del modulo di accesso e premi un clic destro.
Scegli l'opzione 'Ispeziona elemento con Firebug'. Si noti che Firebug evidenzia automaticamente il codice HTML corrispondente per l'elemento web, ad esempio 'Casella di testo e-mail'.
Passaggio 15 - Il codice HTML nell'illustrazione sopra mostra i distinti attributi di proprietà appartenenti alla casella di testo 'Email'. Notare che ci sono quattro proprietà (ID, tipo, segnaposto e nome) che identificano in modo univoco l'elemento web sulla pagina web. Pertanto, 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 Target della terza fase del test con il prefisso '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 fa distinzione tra maiuscole e minuscole, quindi digita il valore dell'attributo con attenzione e precisamente lo stesso che viene visualizzato nel codice HTML.
Passaggio 16 - Fare clic sul pulsante Trova per verificare se il localizzatore selezionato trova e individua l'elemento dell'interfaccia utente designato nella pagina Web.
Passaggio 17 - Ora, il passaggio successivo è inserire i dati del test nella casella di testo Valore del terzo passaggio del test nel riquadro dell'editor. Immettere 'InvalidEmailID' nella casella di testo Valore. L'utente può modificare i dati del test come e quando lo desidera.
Passaggio 18 - Ora seleziona il quarto passaggio di test vuoto nel riquadro dell'editor
Passaggio 19 - Digitare il comando 'tipo' nella casella di testo del comando.
Passaggio 20 - Passare ora al browser web, portare il cursore del mouse sulla casella di testo 'Password' all'interno del modulo di accesso e premere un clic destro.
Scegli l'opzione 'Ispeziona elemento con Firebug'.
Passaggio 21 - Il codice HTML riportato di seguito mostra i distinti attributi di proprietà appartenenti alla casella di testo 'Password'. Notare che ci sono quattro proprietà (ID, tipo, segnaposto e nome) che identificano in modo univoco l'elemento web sulla pagina web. Pertanto, 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 Target della terza fase del test preceduto da 'id ='.
(Clicca per vedere l'immagine ingrandita)
Passaggio 22 - Fare clic sul pulsante Trova per verificare se il localizzatore a schede trova e individua l'elemento dell'interfaccia utente designato nella pagina web.
Passaggio 23 - Ora, il passaggio successivo è inserire i dati del test nella casella di testo Valore del quarto passaggio del test all'interno del riquadro dell'editor. Immettere 'InvalidPassword' nella casella di testo Valore. L'utente può modificare i dati del test come e quando lo desidera.
Passaggio 24 - Ora seleziona il quinto passaggio di test vuoto nel riquadro dell'editor
Passaggio 25 - Digitare il comando 'clic' nella casella di testo del comando. Il comando 'clic' fa clic su un elemento web specificato all'interno della pagina web.
Passaggio 26 - Ora passa al browser web, porta il cursore del mouse sul pulsante 'Accedi' all'interno del modulo di accesso e premi un clic destro.
Scegli l'opzione 'Ispeziona elemento con Firebug'.
Passaggio 27 - Il codice HTML riportato di seguito manifesta i distinti attributi di proprietà appartenenti al pulsante 'Accedi'.
Scegli ID come localizzatore. Copia il valore ID e incollalo nel campo Target della terza fase del test con il prefisso 'id ='.
(Clicca per vedere l'immagine ingrandita)
Passaggio 28 - Fare clic sul pulsante Trova per verificare se il localizzatore selezionato trova e individua l'elemento dell'interfaccia utente designato nella pagina Web.
Lo script di test è ora completato. Fare riferimento alla seguente illustrazione per visualizzare lo script di test finito.
Passaggio 29 - Riproduci lo script di test creato e salvalo nello stesso modo in cui abbiamo fatto nel tutorial precedente.
Conclusione
In questo tutorial, abbiamo introdotto un altro strumento per la creazione di script o piuttosto uno strumento che aiuta a creare script.
Firebug ha sorprendentemente un grande potenziale per individuare elementi web su una pagina web. In questo modo l'utente può sfruttare le capacità dello strumento per creare manualmente script di test di automazione efficaci ed efficienti.
Prossimo tutorial n. 5 : Andando avanti nel prossimo tutorial, daremo un'occhiata al file vari tipi di localizzatori in Selenium e la loro tecnica di accessibilità per costruire script di test . Nel frattempo, il lettore può iniziare a creare i suoi script di test di automazione utilizzando Firebug.
Hai usato Firebug per ispezionare elementi HTML o per creare script? Lo trovi utile? Per favore condividi la tua esperienza nei commenti
Lettura consigliata
- Come utilizzare TestNG Framework per la creazione di script di selenio - TestNG Selenium Tutorial # 12
- Esercitazione sul selenio di cetriolo: integrazione con WebDriver di selenio Java di cetriolo
- Come individuare gli elementi nei browser Chrome e IE per la creazione di script di selenio - Tutorial sul selenio n. 7
- Creazione di generici e tute di prova - Tutorial sul selenio # 22
- Introduzione a Selenium WebDriver - Selenium Tutorial # 8
- Integrazione di Jenkins con Selenium WebDriver: tutorial passo passo
- Tutorial approfonditi su Eclipse per principianti
- Scripting efficiente del selenio e scenari di risoluzione dei problemi - Tutorial sul selenio n. 27