Che cos'è il test del goniometro?
PROTRACTOR è uno strumento di test basato sul comportamento end-to-end di automazione che svolge un ruolo importante nel test di applicazioni AngularJS e funziona come integratore di soluzioni combinando potenti tecnologie come Selenium, Jasmine, driver Web, ecc. non è solo per testare le applicazioni AngularJS, ma anche per scrivere test di regressione automatizzati per le normali applicazioni Web.
In questo tutorial per principianti imparerai-
- Perché abbiamo bisogno del goniometro Framework?
- Installazione del goniometro
- Esempio di test dell'applicazione AngularJS utilizzando Goniometro
- Esecuzione del Codice
- Genera rapporti utilizzando Jasmine Reporter
Perché abbiamo bisogno del goniometro Framework?
JavaScript è utilizzato in quasi tutte le applicazioni web. Man mano che le applicazioni crescono, JavaScript aumenta anche in termini di dimensioni e complessità. In tal caso, diventa un compito difficile per i tester testare l'applicazione Web per vari scenari.
A volte è difficile catturare gli elementi web nelle applicazioni AngularJS utilizzando JUnit o Selenium WebDriver.
Goniometro è un programma NodeJS scritto in JavaScript e viene eseguito con Node per identificare gli elementi web nelle applicazioni AngularJS e utilizza anche WebDriver per controllare il browser con le azioni dell'utente.
Ok, bene ora parliamo di cos'è esattamente un'applicazione AngularJS?
Le applicazioni AngularJS sono applicazioni Web che utilizzano la sintassi HTML estesa per esprimere i componenti dell'applicazione Web. Viene utilizzato principalmente per applicazioni web dinamiche. Queste applicazioni utilizzano un codice meno e flessibile rispetto alle normali applicazioni Web.
Perché non riusciamo a trovare elementi Web JS angolari utilizzando il driver Web Normal Selenium?
Le applicazioni JS angolari hanno alcuni attributi HTML extra come ng-repeater, ng-controller, ng-model ..., ecc. Che non sono inclusi nei localizzatori Selenium. Il selenio non è in grado di identificare quegli elementi web utilizzando il codice Selenium. Quindi, Goniometro sulla parte superiore di Selenium può gestire e controllare questi attributi nelle applicazioni Web.
Il goniometro è un framework di test end-to-end per applicazioni basate su Angular JS. Mentre la maggior parte dei framework si concentra sulla conduzione di unit test per applicazioni JS angolari, Protractor si concentra sul test della funzionalità effettiva di un'applicazione.
Prima di avviare Goniometro, è necessario installare quanto segue:
- Selenio
Puoi trovare la procedura di installazione del selenio nei seguenti link, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Installazione di NodeJS, dobbiamo installare NodeJS per installare Goniometro. È possibile trovare questa procedura di installazione nel seguente collegamento. (https://www.guru99.com/download-install-node-js.html)
Installazione del goniometro
Passaggio 1) Apri il prompt dei comandi e digita "npm install -g goniometro" e premi Invio .
Il comando precedente scaricherà i file necessari e installerà Protractor sul sistema client.
Passaggio 2) Verificare l'installazione e la versione utilizzando " Goniometro - versione " . In caso di successo, mostrerà la versione come nell'immagine sottostante. In caso contrario, eseguire nuovamente il passaggio 1.
(I passaggi 3 e 4 sono facoltativi ma consigliati per una migliore pratica)
Passaggio 3) Aggiorna il gestore dei driver Web. Il web driver manager viene utilizzato per eseguire i test sull'applicazione web angolare in un browser specifico. Dopo aver installato Goniometro, il gestore dei driver Web deve essere aggiornato alla versione più recente. Questo può essere fatto eseguendo il seguente comando nel prompt dei comandi.
webdriver-manager update
Passaggio 4) Avvia il gestore dei driver web. Questo passaggio eseguirà il gestore dei driver Web in background e ascolterà eventuali test eseguiti tramite goniometro.
Una volta che Goniometro viene utilizzato per eseguire qualsiasi test, il driver web caricherà automaticamente ed eseguirà il test nel browser pertinente. Per avviare il Web driver manager, è necessario eseguire il seguente comando dal prompt dei comandi.
webdriver-manager start
Ora, se vai al seguente URL ( http: // localhost: 4444 / wd / hub / static / resource / hub.html ) nel tuo browser, vedrai effettivamente il Web driver manager in esecuzione in background.
Esempio di test dell'applicazione AngularJS utilizzando Goniometro
Goniometro necessita di due file per essere eseguito, un file delle specifiche e un file di configurazione .
- File di configurazione : questo file aiuta il goniometro a dove vengono posizionati i file di prova (specs.js) ea parlare con il server Selenium (indirizzo Selenium). Chrome è il browser predefinito per Goniometro.
- File delle specifiche: questo file contiene la logica e i localizzatori per interagire con l'applicazione .
Passaggio 1) Dobbiamo accedere a https://angularjs.org e inserire il testo come "GURU99" nella casella di testo "Inserisci un nome qui".
Passaggio 2) In questo passaggio,
- Inserito il nome "Guru99"
- Nel testo di output si vede "Hello Guru99".
Passaggio 3) Ora dobbiamo acquisire il testo dalla pagina Web dopo aver inserito il nome e verificare con il testo previsto .
Codice:
Dobbiamo preparare il file di configurazione (conf.js) e il file spec (spec.js) come menzionato sopra.
Logica di spec.js:
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello GURU99!');});});
Spiegazione del codice di spec.js:
- descrivere ('Inserisci nome GURU99', funzione ()
La sintassi di descrizione proviene dal framework Jasmine. Qui "descrivere" ('Immettere il nome GURU99') definisce tipicamente i componenti di un'applicazione, che può essere una classe o una funzione, ecc. Nella suite di codici chiamata "Immettere GURU99", è solo una stringa e non un codice.
- it ('dovrebbe aggiungere un nome come GURU99', function ()
- browser.get ("https://angularjs.org")
Come in Selenium Webdriver, browser.get aprirà una nuova istanza del browser con l'URL menzionato.
- elemento (by.model ('yourName')). sendKeys ("GURU99")
Qui stiamo trovando l'elemento web utilizzando il nome del modello come "yourName", che è il valore di "ng-model" nella pagina web. Controlla la schermata qui sotto-
- var guru = element (by.xpath ('html / body / div [2] / div [1] / div [2] / div [2] / div / h1'))
Qui troviamo l'elemento web utilizzando XPath e memorizziamo il suo valore in una variabile "guru" .
- aspettati (guru.getText ()). toEqual ("Hello GURU99!")
Infine stiamo verificando il testo che abbiamo ottenuto dalla pagina web (usando gettext ()) con il testo previsto.
Logica di conf.js:
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',specs: ['spec.js']};
Codice Spiegazione di conf.js
- seleniumAddress: "http: // localhost: 4444 / wd / hub"
Il file di configurazione indica a Protractor la posizione dell'indirizzo Selenium per parlare con Selenium WebDriver.
- specifiche: ["spec.js"]
Questa riga indica a Protractor la posizione dei file di test spec.js
Esecuzione del Codice
In primo luogo, cambieremo il percorso della directory o andremo alla cartella in cui sono posizionati confi.js e spec.js nel nostro sistema .
Segui il passaggio successivo.
Passaggio 1) Apri il prompt dei comandi.
Passaggio 2) Assicurati che Selenium web driver manager sia attivo e funzionante. Per questo dai il comando come "webdriver-manager start" e premi Invio .
(Se il driver web selenio non è attivo e in esecuzione non possiamo procedere con un test poiché Goniometro non riesce a trovare il driver web per gestire l'applicazione web)
Passaggio 3) Aprire un nuovo prompt dei comandi e dare il comando come "goniometro conf.js" per eseguire il file di configurazione.
Spiegazione:
- Qui Goniometro eseguirà il file di configurazione con il file delle specifiche specificato al suo interno.
- Possiamo vedere il server selenio in esecuzione su " http: // localhost: 4444 / wd / hub " che abbiamo fornito nel file conf.js.
- Inoltre, qui puoi vedere il risultato quanti sono passati e gli errori come nello screenshot sopra .
Bene, abbiamo verificato il risultato quando è passato o come previsto. Ora esaminiamo anche il risultato del fallimento.
Passaggio 1) Apri e modifica il risultato previsto per spec.js in "'Hello change GURU99" come di seguito.
Dopo la modifica in spec.js :
describe('Enter GURU99 Name', function() {it('should add a Name as GURU99', function() {browser.get('https://angularjs.org');element(by.model('yourName')).sendKeys('GURU99');var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));expect(guru.getText()).toEqual('Hello change GURU99!');});});
Passaggio 2) Salvare il file spec.js e ripetere i passaggi precedenti della sezione "Esecuzione del codice"
Ora, esegui i passaggi precedenti.
Risultato:
Possiamo vedere il risultato come non riuscito indicato con "F" nello screenshot con il motivo "Previsto 'Hello GURU99!' per essere uguale a "Hello change GURU99!" Inoltre, mostra il numero di errori riscontrati durante l'esecuzione del codice.
Possiamo ottenere lo stesso con il driver web Selenium?
A volte possiamo identificare gli elementi web delle applicazioni AngularJS usando XPath o il selettore CSS dal driver web Selenium. Ma nelle applicazioni AngularJS, gli elementi verranno generati e modificati dinamicamente. Quindi Goniometro è la pratica migliore per lavorare con le applicazioni AngularJS.
Genera rapporti utilizzando Jasmine Reporter
Goniometro supporta i giornalisti Jasmine per generare rapporti di prova. In questa sezione, utilizzeremo JunitXMLReporter per generare automaticamente rapporti di esecuzione dei test in formato XML.
Seguire i passaggi seguenti per generare report in formato XML.
Installazione di Jasmine Reporter
Ci sono due modi per farlo, localmente o globalmente
- Apri prompt dei comandi, esegui il seguente comando per installare localmente
npm install --save-dev jasmine-reporters@^2.0.0
Il comando precedente installerà i report jasmine dei nodi-moduli localmente dalla directory in cui stiamo eseguendo il comando nel prompt dei comandi.
- Apri prompt dei comandi, esegui il seguente comando per l'installazione globale
npm install -g jasmine-reporters@^2.0.0
In questo tutorial, installeremo localmente i reporter di jasmine .
Passaggio 1) Esegui il comando.
npm install --save-dev jasmine-reporters@^2.0.0
dal prompt dei comandi come di seguito.
Passaggio 2) Controllare le cartelle di installazione nella directory . "Node_modules" dovrebbe essere disponibile se installato correttamente come nell'istantanea sottostante.
Passaggio 3) Aggiungere il seguente codice colorato a un file conf.js esistente
exports.config = {seleniumAddress: 'http://localhost:4444/wd/hub',capabilities: {'browserName': 'firefox'},specs: ['spec.js'],framework: 'jasmine2' ,onPrepare: function() {var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true));}};
Spiegazione del codice:
Nel codice, stiamo generando il report " JUnitXmlReporter " e fornendo il percorso in cui archiviare il report.
Passaggio 4) Aprire il prompt dei comandi ed eseguire il comando goniometro conf.js.
Passaggio 5) Quando si esegue il codice sopra, junitresults.xml verrà generato nel percorso menzionato.
Passaggio 6) Apri l'XML e verifica il risultato. Il messaggio di errore viene visualizzato nel file dei risultati poiché il nostro caso di test non è riuscito. Il test case non è riuscito perché il risultato atteso da "spec.js" non corrisponde al risultato effettivo da una pagina Web
Passaggio 7) Utilizzare il file junitresult.xml per le prove o i file dei risultati.
Sommario:
Sebbene il selenio possa fare alcune delle cose che fa il goniometro, il goniometro è lo standard industriale e la migliore pratica per testare le applicazioni AngularJS. Un goniometro può anche gestire più funzionalità in esso e gestire le modifiche dinamiche degli elementi web utilizzando ng-model, ng-click ..., ecc ... (cosa che il selenio non può fare).
Questo articolo è fornito da Ranjith Kumar Enishetti