Menu

Strumento di test del goniometro per test end-to-end di applicazioni AngularJS

protractor testing tool

Prova Il Nostro Strumento Per Eliminare I Problemi

Cos'è il goniometro?

Il goniometro è uno strumento di test di automazione per il test di applicazioni web; combinando potenti tecnologie come Jasmine, Selenium Webdriver, Node.js ecc.

Lo strumento di test Goniometro è un framework di test basato sul comportamento end-to-end progettato tenendo conto delle applicazioni Angular JS. Anche se potrebbe sembrare che Goniometro non funzioni con applicazioni JS non angolari, lo fa.

Funziona ugualmente bene con applicazioni JS angolari e non angolari.

Sentiti libero di esplorare il intera serie di tutorial AngularJS . Nel nostro precedente tutorial, la differenza tra le versioni angolari è stato spiegato in dettaglio.

Tutorial sul test del goniometro

Cosa imparerai:

Goniometro vs Selenium WebDriver

Ciò che rende Goniometro diverso dal tradizionale Selenium WebDriver ?

Dedica un minuto a rispondere a queste domande:

  • È difficile determinare quando esattamente la pagina web viene finalmente caricata (tutti gli elementi asincroni sono pronti ed elaborati)?
  • Sei stanco di aggiungere attese e sonno al tuo codice?
  • Vuoi liberarti dello sforzo ingombrante per localizzare gli elementi angolari?
  • Frustrato dall'individuazione di elementi con la modifica degli ID?
  • Vuoi creare il tuo localizzatore?
  • Stai scrivendo codice lungo anche per le asserzioni più semplici?
  • Sei un appassionato / fan di JavaScript?

Se hai risposto Sì a queste domande, Goniometro può aiutare.

È un wrapper costruito sopra Selenium Webdriver e quindi fornisce tutte le funzionalità di Selenium insieme a molte utili aggiunte. Offre:

Caratteristiche

Offre:

1) WaitForAngular

come aprire un file .xml

Dalla documentazione:

' Indica a WebDriver di attendere che Angular abbia terminato il rendering e non abbia chiamate $ http o $ timeout in sospeso prima di continuare. Notare che Goniometro applica automaticamente questo comando prima di ogni azione di WebDriver. '

Ciò significa che non è necessario aggiungere manualmente le attese allo script e Protractor attenderà automaticamente il caricamento degli elementi Web e solo allora eseguirà i passaggi successivi.

2) Ha la capacità di esportare una funzione globale elemento , che prende un localizzatore e restituirà un ElementFinder. Questo ElementFinder ha una serie di metodi di azione, come click (), getText (), sendKeys () ecc. Questo è il nucleo di come interagire con l'elemento e ottenere informazioni da esso.

Questa funzione globale aiuta a ridurre la sintassi di individuazione degli elementi. Dai un'occhiata alla seguente dichiarazione per individuare l'elemento sia in Selenium WebDriver che in Goniometro:

Webdriver al selenio :

driver.findElement(By.cssSelector('css selector'));

Goniometro :

element(by.css('some-css'));

La sintassi sembra compatta, non è vero?

3) Alcune nuove strategie e funzioni del localizzatore fornite per aiutare a localizzare gli elementi angolari sono: By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate , eccetera.

Come può aiutarmi Goniometro?

Dai uno sguardo alle seguenti caratteristiche salienti:

  • Sintassi semplice per scrivere casi di test
  • La possibilità di eseguire più browser contemporaneamente utilizzando Selenium Grid
  • Localizzatori angolari specifici
  • Supporto per lo sviluppo guidato dal comportamento come Jasmine / Mocha
  • Non c'è bisogno di aggiungere posti letto / attese
  • Integrazione supportata con Jenkins / Browser Stack / Grunt ecc.
  • Sbarazzati della gestione del problema di sincronizzazione nei siti Web di Angular JS
  • Supporto di più browser (Firefox, Chrome, Safari, Internet Explorer)
  • Possibilità di eseguire gli stessi script nei browser mobili anche senza la necessità di modificare il codice

Quale Framework utilizzare?

Supporta subito due framework di test di sviluppo guidato dal comportamento (BDD):

  • Gelsomino: Gelsomino è il framework di test predefinito quando è installato Protractor. Useremo Jasmine in questo articolo.
  • Moka: Mocha è un framework di test JavaScript che gira su Node.js. Se desideri utilizzare Mocha come framework di test, dovrai configurarlo con il tuo goniometro e dovrai anche utilizzare l'interfaccia Behavior Driven Development e Chai Assertions con Chai as Promised (fare riferimento questo link per ulteriori dettagli ).

Come scaricare e configurare il goniometro

Dato che è un programma node.js, è necessario installare node.js per farlo funzionare. Node.js può essere scaricato da questo URL selezionando il sistema operativo: Download di Node.js.

Con node.js, ottieni anche Goniometro sopra il livello del mare pacchetto, che ora può essere utilizzato per installare Goniometro.

Ora che node.js è installato sulla tua macchina, apri il prompt dei comandi (cmd) e premi il comando seguente per installarlo a livello globale:

npm install -g protractor

'-G' viene utilizzato per installare questo strumento a livello globale. Rimuovilo se non desideri installarlo a livello globale. Questo comando installa anche l'API di Protractor insieme a un server selenio predefinito, il che significa che non devi necessariamente avviare un server autonomo.

Ora, dobbiamo installare il server selenium e ChromeDriver. Usa il seguente comando (fornito anche con Goniometro) in cmd:

webdriver-manager update

Questo è tutto ciò di cui abbiamo bisogno per iniziare con la scrittura del nostro primo caso di test utilizzando questo framework. Se lo desideri, puoi installare qualsiasi IDE / editor per scrivere il tuo codice. Eclipse IDE è quello popolare, ma ci sono anche alcuni editor più interessanti da considerare. Personalmente, preferisco l'editor 'Atom' per la scrittura del mio codice Goniometro.

Pronto a creare il tuo primo caso di test?

Ha bisogno di 2 file per essere eseguito:

  • File di configurazione
  • File delle specifiche.

Il File di configurazione è quello che dice a Protractor dove trovare i file di test (specifiche) / quale browser scegliere / quale framework usare (Jasmine / Mocha) / dove parlare con il browser Selenium e altre configurazioni. Se una qualsiasi configurazione non è definita nei file di configurazione, utilizzerà i valori predefiniti.

Il file delle specifiche è quello in cui scriviamo il nostro codice di test effettivo. Tutti i nostri flussi / asserzioni funzionali di test saranno in questo file specifico. Potrebbero esserci diversi file delle specifiche in base al numero di casi di test, ma solo 1 file delle specifiche sarà in grado di eseguire l'intera suite di test di diverse specifiche.

CASO DI PROVA di esempio:

Ora scriveremo un semplice test case in cui navigheremo a un URL e controlleremo il titolo della pagina.

Ecco i passaggi:

  • Crea una nuova cartella per la tua suite di test.
  • Crea un nuovo file con il nome ' js '. (Andrà bene qualsiasi nome) Tutti i file di specifica / configurazione avranno estensione '.js'.
  • Crea un nuovo file con il nome specificato come ' js '.
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

Ora siamo tutti pronti per iniziare con la nostra codifica. Vedi il codice seguente del file 'testCaseNameSpec.js'.

Ecco come appare il file di configurazione:

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

Ora, rompi questi 2 file e guarda come funziona.

# 1) Spec.js

  • Tutti i comandi a livello di browser verranno gestiti da ' browser ', Un globale creato da Protractor.
  • Dato che stiamo seguendo il framework Jasmine, ' descrivere ' e ' esso 'Sono le sintassi di Jasmine. Describe conterrà l'intera estremità per terminare il flusso del tuo caso di test, mentre 'potrebbe' contenere alcuni passaggi / scenari del test ecc. Puoi avere più ' esso 'Blocchi nel tuo programma se lo desideri.
  • browser.get è una semplice sintassi Selenium che dice a Protractor di raggiungere un URL specifico nel browser.
  • Poiché il sito Web che stiamo cercando di raggiungere è un sito Web non angolare, abbiamo impostato l'estensione ignoreSynchronization tag in ' vero 'Come visualizzato alla riga # 4. Se non rendi vero questo tag, il test fallirà con l'errore 'Impossibile trovare Angular sulla pagina'. La ragione di ciò è che Protractor si aspetta di lavorare con siti Web angolari per impostazione predefinita e se stiamo utilizzando Protractor per convalidare il sito Web non angolare, dobbiamo dirlo esplicitamente a Protractor. Tuttavia, se si sta lavorando su siti Web angolari, non è necessario utilizzare questa istruzione poiché Goniometro per impostazione predefinita considera la pagina Web angolare.
  • 'Aspettarsi' non è altro che l'affermazione in cui stiamo confrontando il titolo della pagina web per uguagliare alcuni dati predefiniti. Discuteremo più affermazioni in dettaglio.

#Due) conf.js

  • Come discusso in precedenza, il file di configurazione è quello che dice a Protractor i dettagli principali. Come mostrato nel codice, il framework è 'Jasmine'.
  • All'interno della sezione delle funzionalità, vengono impostate le configurazioni del browser. È possibile definire il nome del browser come Firefox / Chrome, ecc. È inoltre possibile impostare le istanze massime dei browser in modo che contemporaneamente sia possibile eseguire più casi di test su diverse finestre del browser disponibili.
  • Nel ' Specifiche ', Forniamo il percorso del file spec, cioè esattamente dove si trova il file spec rispetto al file di configurazione.
  • Ci sono anche molte altre fantastiche funzionalità che puoi allegare al tuo file di configurazione come reporting / funzione onPrepare / timeout soglia ecc. Ne tratteremo alcune in questo tutorial.

Come eseguire i tuoi casi di test?

Abbiamo scritto il codice e ora tutto ciò di cui abbiamo bisogno è una piccola spinta per far funzionare il nostro codice. Premi il seguente comando in cmd per eseguire il tuo programma:

protractor conf.js

Questo comando inizierà a eseguire il server selenium seguito dall'esecuzione dello script di test. Puoi visualizzare i log in cmd stesso o, se lo desideri, i log possono essere catturati anche in un file .txt (solo aggiungi >> textFileName.txt dopo il comando precedente ei log verranno salvati nel file di testo che si trova nella stessa directory del file di configurazione).

Si aprirà una finestra cromata, dove SoftwareTestingHelp.com il sito web dovrebbe essere aperto. L'output sarebbe '1 specifica, 0 errore' quando si esegue il codice. Ciò significa che avevamo 1 blocchi 'it', che venivano eseguiti con 0 errori.

Ora, considera il file delle specifiche di seguito in cui stiamo eseguendo alcune azioni su una pagina web costruita su AngularJS in modo da poter vedere la presa del goniometro su Selenium quando si tratta di testare il sito web Angular:

qual è il miglior downloader di YouTube?
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

Puoi usare lo stesso conf.js anche per eseguire questa specifica. Assicurati solo di aggiornare il nome del file delle specifiche.

Ora, in questo file delle specifiche, stiamo giocando con un sito Web JS angolare in modo che tu possa vedere di cosa è capace esattamente Protractor.

Se esegui questo file proprio come abbiamo fatto in precedenza, si aprirà una pagina web con 2 caselle di testo, un menu a discesa, un pulsante e pochi altri elementi web. Come avrai già intuito, è una pagina calcolatrice. Stiamo dando 2 numeri interi come input ed eseguiamo un'operazione di moltiplicazione.

Come abbiamo già discusso, uno dei maggiori vantaggi dell'utilizzo di questo strumento sono le sue tecniche uniche per individuare gli elementi angolari. 'By.model' è un modo per individuare gli elementi. '.SendKeys ()' è la sintassi usuale del selenio per inviare valori nelle caselle di testo e '.clic()' viene utilizzato per fare clic sui pulsanti.

Come discusso prima, 'aspettarsi' è un'affermazione che chiede a Goniometro di acquisire il risultato della moltiplicazione dei numeri e confrontarlo con '10' e '25' in sequenza. La matematica semplice ci dice che l'output dovrebbe essere '25' e quindi la prima asserzione fallisce e la seconda passa.

Di conseguenza, otterrai ' 1 specifica, 1 guasto 'Nei log quando esegui il codice, che è previsto.

Alcune caratteristiche più interessanti di Goniometro

# 1) Asserzioni e annotazioni

Le asserzioni sono una parte importante degli script di automazione. Le annotazioni sono anche molto utili per contrassegnare efficacemente alcuni metodi in una classe per avere un significato speciale.

Fornisce una varietà di asserzioni e annotazioni e, oltre a ciò, offre anche la possibilità di creare le proprie asserzioni.

Considera l'esempio seguente:

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

Nell'esempio sopra, stiamo usando 2 annotazioni, 'BeforeEach' e 'dopo ogni' . Queste annotazioni sono disponibili anche in TestNG (selenio tradizionale). Queste annotazioni assicurano che un particolare pezzo di codice venga eseguito rispettivamente prima / dopo l'esecuzione del codice rimanente.

Quindi, ecco come avverrà l'esecuzione del codice,

  1. Il goniometro raggiungerà all'interno del ‘ prima di ogni 'Blocca prima e colpirà' http://juliemr.github.io/protractor-demo/ 'URL nel browser.
  2. Ora, il flusso si sposterà sul blocco 'it' e sulla funzione ' moltiplicare i numeri verrà chiamato che, a sua volta, eseguirà le azioni specificate in esso inviando il controllo a dove è stata chiamata la funzione.
  3. Alla fine, l'affermazione farà il suo lavoro. Ora, se vogliamo affrontare più elementi contemporaneamente, puoi utilizzare 'element.all', una funzionalità di questo strumento. Identificherà tutti gli elementi disponibili con il localizzatore specificato (in questo caso by.repeater). Sta a te decidere cosa fare con gli elementi identificati. In questo caso, stiamo confrontando la cronologia dei calcoli con un dato numero.
  4. Poiché, nella prima asserzione, stiamo confrontando il conteggio della cronologia dei calcoli con '2' anche se abbiamo eseguito il calcolo solo una volta, l'asserzione avrà esito negativo. La seconda asserzione, tuttavia, passerà poiché dopo il secondo calcolo, il conteggio della cronologia sarebbe '2'.

Sono disponibili molti altri tipi di asserzioni. Alcuni dei quali sono riportati di seguito:

a) Ottieni testo da un elemento web e confrontalo con un determinato valore:

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b) Verifica se un elemento web è visualizzato o meno sulla pagina:

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

# 2) Gestire più browser / finestre / schede

Ci possono essere più casi quando si tratta di gestire il browser. Alcuni di questi casi sono evidenziati di seguito:

a) Si apre una nuova scheda facendo clic su qualsiasi collegamento

A volte, quando fai clic su un collegamento, si apre una nuova scheda e il resto delle azioni devono essere eseguite nella finestra appena aperta. In questo caso, quando scrivi il codice fino al punto in cui viene aperta una nuova scheda, devi implementare Window Handler nel modo seguente:

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

Per prima cosa ottieni un conteggio di tutte le finestre disponibili e poi usa l'indicizzazione per cambiare controllo tra le finestre. La finestra originale che ha avviato la nuova finestra avrà indice 0, mentre le finestre successive avranno indici crescenti.

b) Apertura di un browser completamente nuovo con una nuova sessione

Quando è necessario eseguire alcune azioni su un browser e occorre eseguire ulteriori azioni su una diversa sessione del browser, è necessario utilizzare il forkNewDriverInstance . In questo caso, creiamo una nuova istanza del browser con un nuovo nome del browser nel modo seguente:

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c) Esecuzione del test case in più browser:

Eseguire il tuo test case in 2 browser alla volta è qualcosa che il file di configurazione può fare per te. Basta aggiungere il codice seguente nel file di configurazione:

Non appena esegui questo file di configurazione, vedrai i test in esecuzione simultaneamente su Firefox e Chrome e i log di esecuzione verranno visualizzati separatamente nel prompt dei comandi.

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

# 3) Usa gli oggetti pagina per migliorare ulteriormente il tuo framework

Questo strumento è buono da solo ma diventa invincibile se combinato con Page Object Model (POM). La maggior parte dei suoi difetti (se presenti) vengono superati con il modello a oggetti della pagina. Inoltre, POM aiuta anche a mantenere il tuo progetto in modo più strutturato.

Se non sai cosa sia il POM, non preoccuparti. POM è un modo per separare il tuo caso di test sulla base delle pagine.

Prendi questo esempio:

C'è un sito web per lo shopping. Il tuo caso di test consiste nel selezionare un prodotto, aggiungerlo al carrello e quindi acquistarlo.

Ora, ci sono due modi per gestire il codice dello script di test per questo:

  1. Scrivi un semplice test case con tutti i localizzatori sulla stessa pagina in cui è scritta la tua logica,
  2. Scrivi tutto il tuo flusso di test case, la tua logica nel file delle specifiche e separa i tuoi localizzatori e dati di test in file diversi. Ogni pagina web avrà un file di pagina .js equivalente. In questo modo, il tuo codice sarà strutturato e se c'è qualche altro test case che richiede lo stesso localizzatore, non è necessario riscrivere questi localizzatori, basta importare questo file di localizzazione e usarlo secondo le tue necessità.

Mantenere i tuoi casi di test può essere un vero dolore. Se usi POM, il tuo codice sarà molto più strutturato.

c ++ aspetta 1 secondo

Ecco un esempio di utilizzo del modello a oggetti della pagina:

modello a oggetti della pagina

Questo è il flusso nell'istantanea sopra:

  1. C'è un test case che acquista laptop. Il codice per il flusso e la logica sarà in purchaseLaptopSpec.js.
  2. Tutte le pagine che si incontrano per acquistare il laptop avranno 1 file '.js' con un titolo appropriato. Tutti gli elementi necessari per essere utilizzati per l'acquisto del laptop, i loro localizzatori saranno all'interno del rispettivo file di pagina.
  3. I dati richiesti per questo test case possono essere salvati nella cartella TestData in formato '.json' o in formato excel.
  4. Una volta terminato con le pagine e i localizzatori, importa semplicemente questi file nel tuo file spec per utilizzare i dati del localizzatore / test e sei pronto con il tuo test case.

# 4) Rapporti

NPM (Node Package Manager) fornisce vari pacchetti di report, con i quali è possibile acquisire screenshot di ogni fase del test e inoltre, una volta completata l'esecuzione del test, genererà un report HTML per te. Tutto quello che devi fare è installare quei pacchetti aprendo un prompt dei comandi e premendo i seguenti comandi:

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

Una volta installati questi pacchetti, ogni volta che si esegue il file di configurazione, verranno salvati tutti gli screenshot dei casi di test e verrà inoltre generato un report HTML che mostra il risultato superato / non superato del test case.

# 5) Integrazione con altri potenti strumenti come Git / Jenkins / Browserstack / Grunt

Ci sono più strumenti disponibili sul mercato per aiutarti a migliorare i tuoi casi di test. Git / Jenkins / BrowserStack / Grunt sono alcuni di questi strumenti che aggiungono un valore significativo ai normali script di test di Goniometro. E la parte migliore è che non devi toccare il file delle specifiche per integrare il tuo goniometro con nessuno di questi strumenti. È il tuo file di configurazione, che prenderà tutte queste cose per te.

Partire è uno strumento di controllo delle versioni molto potente. È sempre consigliabile mantenere il codice in Git se sono coinvolti più sviluppatori.

Jenkins è uno strumento di integrazione continua con cui puoi programmare i tuoi casi di test ed eseguirlo secondo le tue necessità. Gli script goniometro possono anche essere configurati con Jenkins. Il miglior utilizzo per eseguire i test case su Jenkins è che è molto veloce e puoi anche eseguire più test case contemporaneamente.

BrowserStack è uno strumento di test cross-browser che può essere utilizzato anche per testare le tue applicazioni su browser diversi. Può anche essere integrato con Goniometro aggiungendo le credenziali browserStack nel file di configurazione.

Terra è un task runner JavaScript. Ti offre la possibilità di eseguire diverse attività per te. La sua bellezza è che ci sono più di 4000 attività e puoi creare ancora più attività secondo le tue esigenze. Di seguito sono riportate alcune delle importanti attività di utilizzo quotidiano per cui possiamo utilizzare Grunt:

  1. Elenca tutte le migliori pratiche di codifica e informa immediatamente ogni volta che violi una di queste.
  2. Per creare più file delle specifiche in fase di esecuzione. Per esempio , se è presente uno scenario di test che si desidera eseguire più volte (da 1 a qualsiasi numero). Questo potrebbe sembrare inutile a questo punto del tempo, ma pensa di eseguire qualsiasi flusso di pagamento del sito Web di shopping da eseguire in ogni singolo paese disponibile. Sarebbe noioso creare manualmente più specifiche. Quindi, lascia che Grunt lo faccia per te.
  3. La funzione orologio. Scrivi un test case e ogni volta che salvi il codice dopo aver apportato modifiche, vuoi che il tuo test case venga eseguito, Grunt ce l'ha.
  4. Concatenazione di più file.

Provalo e lo adorerai.

Conclusione

Puoi far funzionare il selenio come un goniometro, ma perché reinventare la ruota? Se Google si è impegnata così tanto per far funzionare Goniometro come un incantesimo, usalo al meglio. Almeno per i siti Web di AngularJS, ti semplificherà la vita.

Inoltre, questo articolo non riguarda solo il goniometro. C'è un grande mondo di Goniometro là fuori e ci sono centinaia di pacchetti disponibili sul mercato offerti da NPM per aggiungere più funzionalità al tuo test oltre a semplici scenari di test. Sentiti libero di usare questi pacchetti e renderlo ancora migliore.

Circa l'autore: Questo è un guest post di Deshansh. Lavora come ingegnere di sviluppo software in Test con una delle principali multinazionali. Ha una vasta esperienza di lavoro sui test di automazione del selenio e del goniometro.

Il nostro prossimo tutorial ti aiuterà a completare con successo qualsiasi intervista AngularJS.

Tutorial PREV | PROSSIMO Tutorial

Lettura consigliata

^