Tutorial IO del driver Web Utilizzo di un sito Web live ed esempi di lavoro: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Tutorial IO del driver Web utilizzando un sito Web live ed esempi di lavoro

Ultimo aggiornamento: 2015-07-26

(Ricontrolla spesso mentre aggiorno queste istruzioni con maggiori dettagli ed esempi)

Sfondo

Recentemente mi è stata presentata una sfida interessante. Avevo bisogno di introdurre i test automatizzati in un reparto Q/A con pochissima esperienza tecnica e nessun background di programmazione.

Si trattava in realtà di due (2) sfide separate. Il primo è stato quello di identificare le tecnologie per eseguire i test automatizzati. Il secondo era quello di formare il dipartimento Q/A.

L'articolo affronterà solo le tecnologie utilizzate e ciò che ho imparato nel processo.

Le tecnologie funzionavano bene, ma dovevo davvero cercare informazioni e passavo molte ore a capire i problemi.

Ho avuto difficoltà a trovare informazioni su Internet su queste tecnologie che lavorano tutte insieme.

Volevo condividere queste informazioni, quindi ho scritto questo articolo insieme a script di test di esempio funzionanti e un sito Web di test su cui eseguire gli script.

Tutti gli script di test possono essere trovati su github e il sito di test funzionante si trova su Web Driver IO Tutorial Test Site

Spero che lo trovi utile. Se lo fai, per favore fammi sapere.

ObiettiviUtilizzare le tecnologie per:

• Testare la funzionalità del sito web
• Testa la funzionalità JavaScript
• Può essere eseguito manualmente
• Può essere eseguito automaticamente

• Linguaggio facile da imparare per i non programmatori

  Personale Q/A con conoscenza di base di HTML e JavaScript

• Usa solo software open source

Tecnologie

Elenco delle tecnologie che scelgo:

• mocha - test runner - esegue gli script di test
• shouldjs – libreria di asserzioni
• webdriverio – binding di controllo del browser (binding di lingua)
• selenium – astrazione del browser e fabbrica in esecuzione

• Browser/driver mobili + browser

  • Firefox (solo browser)
  • Chrome (browser e driver)
  • IE (browser e driver)
  • Safari (plug-in per browser e driver)

Passaggio 1: installazione del software

Per iniziare è necessario avere installato il server autonomo Node JS, Web Driver IO, Mocha, Should e Selenium.

Ecco le istruzioni di installazione per Windows 7.

(Sono un utente Mac/Linux ma ho dovuto installare tutto su macchine Windows 7, ecco perché l'ho incluso come riferimento. La procedura per l'installazione su Mac/Linux è simile. Consultare i riferimenti online per ulteriori informazioni informazione.)

Da un browser:

• Installa il nodo che include NPM (Node Package Manager)

• vai su

  • Fare clic su Installa
  • Salva ed esegui il file
  • Imposta il percorso e la variabile (NODE_PATH)
  • Vai su Pannello di controllo->Sistema e sicurezza->Sistema
    • Impostazioni avanzate di sistema

    • Impostazione ambiente (variabili utente)

      • Aggiungi a PERCORSO

        C:\Users\{USERNAME}\AppData\Roaming\npm;

      • Aggiungi il NODE_PATH (variabili di sistema)

        C:\Users\{USERNAME}\AppData\Roaming\npm\node_modules

Nota: ho installato tutto il software di seguito utilizzando l'opzione globale npm (-g). Normalmente non è consigliato, ma per questa installazione avevo bisogno di installarlo a livello globale poiché sarebbe stato utilizzato su più progetti.

Apri il prompt dei comandi (cmd):

(amministratore utente locale)

• Installa selenio "driver web IO"

  • npm install webdriverio -g

    Questo installerà il driver web IO globalmente sulla tua macchina

• Installa il software di test runner "moka"

  • npm install mocha -g

    Questo installerà mocha a livello globale sulla tua macchina

• Installa la libreria di asserzioni "dovrebbe"

  • npm install dovrebbe -g

    Questo installerà "dovrebbe" a livello globale sulla tua macchina

• Installa il server autonomo Selenium

  • Vai su
  • Scarica il file jar e spostati nella directory "selenium".

• Installa i browser e i driver del browser con cui testare

  • Dal prompt di cmd:

    • Crea la directory "selenio"
    • C:\Users\{USERNAME}\selenium

    • Comandi:

      • cd C:\Utenti\{NOMEUTENTE}
      • mkdir selenio

    • Firefox

      • Installa il browser Firefox, se non è già installato.
      • Il percorso deve essere impostato per avviare Firefox dal prompt dei comandi (cmd).
      • Pannello di controllo->Sistema e sicurezza->Sistema
        • Impostazioni avanzate di sistema
        • Impostazioni dell'ambiente
        • Aggiungi (aggiungi usa il punto e virgola) alla variabile del percorso
        • C:\Programmi (x86)\Mozilla Firefox
      • Nessun driver web speciale necessario per Firefox.

    • Cromo

      • Installa il browser Chrome, se non è già installato.
      • Il percorso PU essere impostato per avviare Chrome dal prompt dei comandi (cmd).
      • Prova prima: chrome.exe dal prompt dei comandi (cmd)
      • Se Chrome non si avvia, allora:
      • Pannello di controllo->Sistema e sicurezza->Sistema
        • Impostazioni avanzate di sistema
        • Impostazioni dell'ambiente
        • Aggiungi (aggiungi usa il punto e virgola) alla variabile del percorso
        • C:\Programmi (x86)\Google\Chrome\Application\chrome.exe

      • Per Chrome è necessario un driver web speciale.

        Vai su chromium.org e decomprimi il driver a 32 bit nella directory "selenium"

    • Internet Explorer (solo per Windows - non funzionerà su altre piattaforme)

      • Per IE è necessario un driver web speciale.

        • Vai su
        • Scarica e decomprimi il driver a 64 bit nella directory "selenium".

Passaggio 2: script di test di base

Cominciamo con alcune nozioni di base.

Ecco un semplice script moka che aprirà un sito web e verificherà il titolo.

// tutorial1.js

// // Questo è un semplice script di prova per aprire un sito Web e // convalidare il titolo. // librerie richieste var webdriverio = require('webdriverio'), should = require('should'); // un blocco di script di test o una suite descrivere('Title Test for Web Driver IO - Tutorial Test Page Website', function() { // imposta il timeout su 10 secondi this.timeout(10000); var driver = {}; // hook da eseguire prima dei test before(function (done) { // carica il driver per il driver del browser = webdriverio.remote({ sharedCapabilities: {browserName: 'firefox'} }); driver.init(done); }); // una specifica di test - "specifica" it('dovrebbe essere caricare la pagina e il titolo corretti', function() { // carica la pagina, quindi chiama function() return driver.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html') // ottiene il titolo, quindi passa il titolo a function().getTitle().then(function (title) { // verifica il titolo (title).should.be.equal("Web Driver IO - Tutorial Test Page "); // decommenta per il debug della console // console.log('Current Page Title: ' + title); }); }); // un "hook" da eseguire dopo tutti i test in questo blocco after(function(done) { driver.end(fatto); }); });

Osservazioni:

• Dovresti prima notare che lo script di test è scritto in JAVASCRIPT (termina con l'estensione.js).

• La struttura di base è quasi identica per tutti gli script di test.

  • Commenti di intestazione (//)
  • Librerie richieste
  • Imposta opzioni (opzionale)
  • Hook: carica il driver del browser
  • Suite di test (descrivi)
  • Specifiche del test (possono essere molte specifiche in una suite)
  • Uncino: Pulisci

• La suite di test inizia con una funzione di descrizione che accetta due parametri:

  • Stringa - Descrizione della suite di test

    • "Controlla la pagina per la verbosità corretta"
    • "Verifica le operazioni dei pulsanti di opzione"

  • funzione - blocco di codice da eseguire

    descrivere('Descrizione della suite di test', function() { });

• La suite di test conterrà 1 o più specifiche di test (specifiche)

• Le specifiche iniziano con la funzione che accetta due parametri:

  • Stringa - Descrizione della specifica del test

    • "Dovrebbe essere il testo del collegamento e l'URL del collegamento corretti"
    • “Dovrebbe contenere una verbosità corretta (copy deck)
  • funzione - blocco di codice da eseguire
  • it('Descrizione della specifica del test', function() { });
• Una specifica contiene una o più aspettative che testano lo stato del codice

• Queste si chiamano asserzioni

  La libreria "dovrebbe" fornisce le asserzioni

• In quasi tutti i casi, sarà necessario individuare uno o più elementi utilizzando un selettore, quindi eseguire alcune operazioni sugli elementi

  • Esempi:

    • Trova il testo su una pagina e verifica il testo
    • Compila un modulo e invia
    • Verifica CSS di un elemento

Diamo un'occhiata più da vicino all'esempio con i commenti

Carica le librerie richieste: web driver IO e should.

// librerie richieste

var webdriverio = require('webdriverio'), should = require('should');

Definire la suite di test. Questa suite si chiama: "Title Test for Web Driver IO - Tutorial Test Page Website"

// un blocco o una suite di script di test

descrivere('Test del titolo per Web Driver IO - Sito Web della pagina di prova del tutorial', function() { … });

Imposta il timeout a 10 secondi in modo che lo script non vada in timeout durante il caricamento della pagina.

// imposta il timeout a 10 secondi

questo.timeout(10000);

Hook per caricare il driver del browser prima di eseguire le specifiche "specs". Il driver Firefox viene caricato in questo esempio.

// hook da eseguire prima dei test

before(function (done) { // carica il driver per il browser driver = webdriverio.remote({ sharedCapabilities: {browserName: 'firefox'} }); driver.init(done); });

Definire la specifica del test.

// una specifica di test - "specifica"

it('dovrebbe essere caricata la pagina e il titolo corretti', function() { … });

Carica la pagina del sito

.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html')

Ottieni il titolo, quindi passa il titolo a function()

.getTitle().then(function (titolo) {

… });

Verifica il titolo utilizzando la libreria di asserzioni dovrebbe.

(title).should.be.equal("Web Driver IO - Tutorial Test Page");

Aggancia per uscire e ripulire il driver al termine.

// un "gancio" da eseguire dopo tutti i test in questo blocco

after(function(done) { driver.end(done); });

Passaggio 3: eseguire lo script di prova

Ora vediamo cosa fa lo script di test quando viene eseguito.

Per prima cosa avvia il server autonomo Selenium:

• Per Windows usa la riga di comando (cmd):

  • java -jar
  • # java -jar selenium-server-standalone-2.46.0.jar

• Per Mac o Linux, apri il terminale:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Vedi screenshot sopra

Quindi esegui lo script di test:

• Per Windows usa la riga di comando (cmd):

  • moka
  • # tutorial moka1.js

• Per Mac o Linux, apri il terminale:

  • moka
  • $ moka tutorial.js
• Vedi screenshot sopra

Allora, cos'è successo?

Mocha invoca lo script "tutorial1.js". Il driver ha avviato il browser (Firefox), ha caricato la pagina e verificato il titolo.

Passaggio 4: esempio di sito Web

Tutti gli esempi sono eseguiti su questo sito.

Il sito web di esempio si trova in: Web Driver IO Tutorial Test Page

Tutti gli script di test possono essere scaricati da github.

Passaggio 5: esempi specifici

Tutto il codice è disponibile su github: Web Driver IO Tutorial su github

• Verifica il collegamento e il testo del collegamento in un elenco non ordinato - "linkTextURL1.js"

  • L'elenco non ordinato ha un e il collegamento è il quarto elemento dell'elenco.
  • L'URL dovrebbe essere "https://tlkeith.com/contact.html"

// Verifica il testo del collegamento Contattaci

it('dovrebbe contenere il testo del collegamento Contattaci', function() { return driver.getText("//ul[@id='mylist']/li[4]/a").then(function (link) { console.log('Link trovato: ' + link); (link).should.equal("Contattaci"); }); }); // Verifica l'URL di contatto it('dovrebbe contenere l'URL di contatto', function() { return driver.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(function (link) { (link).should.equal("https://tlkeith.com/contact.html"); console.log('URL trovato: ' + link); }); });

• Verifica il testo del copyright - "Copyright1.js"

  • Il copyright è nel piè di pagina Questo esempio mostra 2 modi diversi per individuare il testo del copyright:

    • dal come selettore di elementi
    • usando xpath come selettore di elementi

// Verifica il testo del copyright utilizzando l'id come selettore di elementi

it('dovrebbe contenere il testo del copyright', function() { return driver.getText("#copyright").then(function (link) { console.log('Copyright trovato: ' + link); (link).should. equal("Tony Keith - tlkeith.com @ 2015 - Tutti i diritti riservati."); }); }); // Verifica il testo del copyright utilizzando xpath come selettore di elementi it('dovrebbe contenere il testo del copyright', function() { return driver.getText("//footer/center/p").then(function (link) { console.log('Copyright trovato: ' + link); (link).should.equal("Tony Keith - tlkeith.com @ 2015 - Tutti i diritti riservati."); }); });

• Compila i campi del modulo e invia - "formFillSubmit1.js"

  • Inserisci il nome, il cognome e invia, quindi attendi i risultati.

  • Questo esempio mostra 3 metodi per riempire il campo di input del nome:

    • di ID
    • da xpath da input
    • per xpath da form->input
  • Mostra anche come cancellare un campo di input

// Imposta il nome usando id su: Tony

it('dovrebbe impostare il nome su Tony', function() { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Nome: " + e); }); }); // Cancella il nome usando id it('dovrebbe cancellare il nome', function() { return driver.clearElement("#fname").getValue("#fname").then(function (e) { (e).should.be.equal(""); console.log("Nome: " + e); }); }); // Imposta il nome utilizzando xpath from input to: Tony it('dovrebbe impostare il nome su Tony', function() { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("First Name: " + e); }); }); // Cancella il nome usando xpath from input it('dovrebbe cancellare il nome', function() { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal(""); console.log("Nome: " + e); }); }); // Imposta il nome utilizzando xpath from form to: Tony it('dovrebbe impostare il nome su Tony', function() { return driver.setValue("//form[@id='search-form']/input[1]", "Tony").getValue("//form[@id='search-form']/input[1]").then(function (e) { (e).should.be.equal("Tony"); console.log("Nome: " + e); }); }); // Imposta il cognome utilizzando id su: Keith it('dovrebbe impostare il cognome su Keith', function() { return driver.setValue("#lname", "Keith").getValue("#lname").then (funzione (e) { (e).should.be.equal("Keith"); console.log("Cognome: " + e); }); }); // Invia il modulo e attendi i risultati della ricerca it('dovrebbe inviare il modulo e attendere i risultati', function() { return driver.submitForm("#search-form").then(function(e) { console.log(' Invia modulo di ricerca'); }).waitForVisible("#risultati-ricerca", 10000).then(function (e) { console.log('Risultati trovati'); }); });

• Fare clic su Mostra/Nascondi pulsante e verificare il testo - "showHideVerify1.js"

  • Il testo è in un elemento mostra/nascondi. Il pulsante controlla lo stato.

  • Questo esempio mostra:

    • Fare clic sul pulsante per espandere
    • Attendi che l'elemento sia visibile (espanso)
    • Verifica testo (copia mazzo)

// fai clic sul pulsante "Ulteriori informazioni" e verifica il testo nell'elemento espanso

it('dovrebbe fare clic sul pulsante Maggiori informazioni e verificare il testo', function () { return driver.click("#moreinfo").then (function () { console.log('Ho fatto clic sul pulsante Ulteriori informazioni'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div").then (function (e) { console.log('Text: ' + e); (e).should.be.equal("Tutte le cose buone vanno qui!"); }); });

• Convalida errori campo modulo - "formFieldValidation.js"

  • Utilizzare gli script di test per verificare che vengano prodotti messaggi di errore corretti.

  • Questo esempio mostra:

    Verificare i messaggi di testo di errore e verificare la posizione (posizione nell'elenco non ordinato)

it('dovrebbe contenere 5 errori: primo/ultimo/indirizzo/città/stato', funzione () {

return driver.getText("//ul[@class='alert alert-danger']/li[1]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Inserire il nome'); }).getText("//ul[@class='alert alert-danger']/li[2]").then(function (e) { console.log('Errore trovato: ' + e); (e).should.be.equal('Inserire cognome'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Please enter address'); }). getText("//ul[@class='alert alert-danger']/li[4]").then(function (e) { console.log('Error found: ' + e); (e).should.be.equal('Inserisci città'); }).getText("//ul[@class='alert alert-danger']/li[5]").then(function (e) { console.log ('Errore trovato: ' + e); (e).should.be.equal('Inserisci lo stato'); }); });

• Ciclo di dati per convalidare collegamento/testo/pagina URL - "LoopDataExample1.js"

  • Questo esempio mostra: utilizzare un array di dati JSON per memorizzare il collegamento e il nome, quindi eseguire l'iterazione

    • Verifica il testo e il collegamento di ciascun URL
    • Fare clic sul collegamento e caricare la pagina

// Link dati - link e testo

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js", "name": "linkTextURL1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master/copyright1.js", "name": "copyright1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js", "name": " formFillSubmit1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js", "name": "showHideVerify1.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js", "name": "dynamicBrowser.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js", "name": "callbackPromise.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js", "name": "debu gExample1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js", "name": "formFieldValidation.js"}, {"link": " https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js", "name": "commonLib.js"}, {"link": "https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js", "name": "dataLoopExample1.js"}]; … // scorre ogni linkArray linkArray.forEach(function(d) { it('dovrebbe contenere testo/link quindi vai a pagina - ' + d.name, function() { return driver // assicurati di essere sulla pagina iniziale.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // verifica titolo (title).should.be.equal("Web Driver IO - Pagina di prova del tutorial"); }) // trova l'URL.getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); console.log('URL trovato: ' + d.link); }) // vai alla pagina URL e verifica che esista.click('a=' + d.name).waitForVisible("#js-repo-pjax- container", 10.000).then(function() { console.log('Github Page Found'); }); }); });

• Ciclo di dati statici per popolare i campi del modulo - "loopDataExample2.js"

  • Questo esempio mostra:Utilizzare un array di dati JSON per memorizzare nome/cognome

    • Scorri i dati per popolare i campi del modulo, quindi invia il modulo
    • Attendi la pagina dei risultati
    • Verifica nome/cognome nella pagina dei risultati

// array di dati - firstName e lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ": "Jane", "lastName": "Doe"}, {"firstName": "Don", "lastName": "Johnson"}]; … // scorre ogni dataArray dataArray.forEach(function(d) { it('dovrebbe popolare i campi, sumbit page', function() { return driver // assicurati di essere sulla pagina iniziale.url('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // verifica titolo (title).should.be.equal("Web Driver IO - Tutorial Test Page"); }).setValue("#fname", d.firstName).getValue("#fname").then(function (e) { (e).should.be.equal(d.firstName); console.log("First Name: " + e); }).setValue("#lname", d.lastName).getValue("#lname").then(function (e) { (e).should.be.equal(d.lastName)); console.log("Last Name: " + e); }).submitForm("#search-form").then(function() { console.log('Submit Search Form'); }).waitForVisible("#search-results", 10000).then(function () { console.log('Result Page Found'); }).getText("//h1").then(function (link) { console.log('Testo trovato: ' + link); (link).should.equal("Benvenuto " + d.firstName + " " + d.lastName + "."); }); }); });

• Convalida proprietà CSS - "cssValidation1.js"

  • Questo esempio mostra come:

    • Convalida le seguenti proprietà CSS:

      • colore
      • imbottitura (sopra, sotto, destra, sinistra)
      • colore di sfondo

it('dovrebbe contenere il colore corretto del testo di errore', function() { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color").then(funzione (risultato) { console.log('Colore trovato: ' + risultato.parsed.hex + " o " + risultato.valore); (risultato.parsed.hex).should.be.equal('#a94442'); }); });

it('dovrebbe contenere il riempimento corretto nella cella della tabella', function() {

return driver // padding: in alto a destra in basso a sinistra.getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-top").then(function (risultato) { console.log('padding-top found: ' + result.value); (result.value).should.be.equal('10px'); }).getCssProperty("//table[@id= 'filelist']/thead/tr[1]/td[1]", "padding-bottom").then(function (result) { console.log('padding-bottom found: ' + result.value); (risultato.valore).should.be.equal('10px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding- right").then(function (result) { console.log('padding-right found: ' + result.value); (result.value).should.be.equal('5px'); }).getCssProperty("//table[@id='filelist']/thead/tr[1]/td[1]", "padding-left").then(function (result) { console.log('padding-left found: ' + risultato.valore); (risultato.valore).should.be.equal('5px'); }); });

it('dovrebbe contenere il colore di sfondo corretto nell'intestazione della tabella', function() {

return driver.getCssProperty("//table[@id='filelist']/thead", "background-color").then(function (result) { console.log('background color found: ' + result.parsed. hex); (result.parsed.hex).should.be.equal('#eeeeee'); }); });

Passaggio 6: suggerimenti e trucchi

• Debug:

  • Attiva la registrazione a livello di driver per ulteriori debug e per creare registri.

    • Imposta logLevel su "verbose"
    • Imposta logOutput sul nome della directory ("logs")

driver = webdriverio.remote(loglevel: 'verbose', logOutput: 'logs', {capacità desiderate: {browserName: 'firefox'} });

• Usa console.log(), debug(), getText() per eseguire il debug.

  • console.log(): consente di visualizzare le informazioni per determinare lo stato.
  • debug() - Utilizza il browser/script in pausa finché non viene premuto invio sulla riga di comando.

  • getText() - Usalo per verificare che stai interagendo con l'elemento corretto.

    Particolarmente utile con le espressioni xpath

// Fare clic sull'elemento 3 dall'elenco

it('dovrebbe fare clic sull'elemento 3 dalla lista', function() { // usa getText() per verificare che xpath sia corretto per il driver di ritorno dell'elemento.getText("//ul[@id='mylist']/li [3]/div/div/a").then(function (link) { // usa console.log() per visualizzare le informazioni console.log('Link trovato: ' + link); (link).should.equal ("Elemento 3"); }) // usa debug() per interrompere l'azione per vedere cosa sta succedendo sul browser.debug().click("//ul[@id='mylist']/li[3] /div/div/a").then (function () { console.log('Link cliccato'); }) // attendi che appaia il modulo di ricerca di Google.waitForVisible("#tsf", 20000).then(function (e) { console.log('Risultati di ricerca trovati'); }); });

• Usa la variabile d'ambiente per cambiare il browser in modo dinamico:

  • Utilizzare la variabile di ambiente SELENIUM_BROWSER per richiamare un browser diverso senza modificare ogni volta lo script di test.
  • Richiede una leggera modifica della codifica per supportare.

Modifiche al codice:

// carica il driver per il browser

driver = webdriverio.remote({ sharedCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'} });

Browser supportati:

• Internet Explorer - IE 8+ (solo Windows)

  SELENIUM_BROWSER=ie moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=firefox moka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=cromo moka

• Opera 12+

  SELENIUM_BROWSER=opera moka

• Safari

  SELENIUM_BROWSER=safari moka

Test:

• Per Windows usa git bash shell:

  • SELENIUM_BROWSER=cromo moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Per Mac o Linux, apri il terminale:

  • SELENIUM_BROWSER=cromo moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Test di risposta:

  • Determinare i punti di interruzione in base al progetto o al framework (es. bootstrap).

  • Definisci le variabili di ambiente per ogni punto di interruzione:

    • SCRIVANIA - 1200 px
    • TAVOLETTA - 992 px
    • CELLULARE - 768 px

  • Sviluppa un comando riutilizzabile per leggere la variabile di ambiente e impostare la dimensione del browser.

    Vedi esempio sotto

  • Chiama il comando riutilizzabile nello script di test.

// codice riutilizzabile - libreria // frammento di codice if(bp == "DESKTOP") { obj.width = 1200; obj.altezza = 600; obj.name = bp; } else if(bp == "TABELLA") { obj.width = 992; obj.altezza = 600; obj.name = bp; } else if(bp == "MOBILE") { obj.width = 768; obj.altezza = 400; obj.name = bp; }

// Script di prova

before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // imposta la dimensione della finestra it('dovrebbe impostare la dimensione della finestra', function (done) { // solo la larghezza conta driver.setWindowSize(winsize.width, winsize.height, function () {}).call(done); });

• Comandi riutilizzabili (comandi personalizzati):

  • Web Driver IO è facilmente estendibile.
  • Mi piace mettere tutti i comandi riutilizzabili in una libreria. (forse questa è vecchia scuola ma funziona!)

common/commonLib.js

//verificaCognomeCheckError()

// // Descrizione: // Verifica il messaggio di errore di convalida del modulo del cognome // // Input: // numero - indice di errore (1-5) // Output: // nessuno // var verificareLastNameCheckError = function () { idx var = argomenti[0], callback = argomenti[argomenti.lunghezza - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Error found: ' + e); (e).should.be.equal('Inserisci il cognome'); }).call(callback); }; // esporta la funzione module.exports.verifyLastNameCheckError = verificareLastNameCheckError;

Ecco le modifiche specifiche necessarie per chiamare una funzione riutilizzabile

Vedere formFieldValidation.js per un esempio di funzionamento completo

// richiede il comando riutilizzabile - CommonLib

common = require('./Common/CommonLib'); … // associa i comandi driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); it('dovrebbe contenere 2 errori: nome/cognome', function() { // chiama il driver della funzione riutilizzabile.verifyFirstNameError(1);.verifyLastNameError(2); });

• Struttura file/directory del progetto:

  • Ecco la struttura tipica del progetto:

    • "Progetto" - directory principale del progetto

      • README.md - leggimi per il progetto globale

      • "Comune" - directory per le funzioni globali comuni a tutti i progetti

        • common-lib.js - libreria di funzioni globali
        • README.md - leggimi per le funzioni globali

      • "Prodotto1" - directory per il prodotto 1

        • test-script1.js
        • test-script2.js

        • "Comune" - directory per le funzioni locali per il progetto 1

          • prod1-lib.js - libreria di funzioni locali per il progetto 1
          • README.md - leggimi per le funzioni locali nel progetto 1

      • "Prodotto2" - directory per il prodotto 2test-script1.jstest-script2.js

        • "Comune" - directory per le funzioni locali per il progetto 2

          • prod2-lib.js - libreria di funzioni locali per il progetto 2
          • README.md - leggimi per le funzioni locali nel progetto 2

• Rompi gli script di test in più file:

  • Ecco un esempio di utilizzo di più file:

    • Sanity Check - script di test di base per verificare che tutto funzioni
    • Convalida di elementi statici e testo: verifica tutti gli elementi e il testo
    • Convalida errore modulo/pagina - convalida errore
    • Risultati della ricerca: prova il contenuto dinamico

• Richiamate VS. Promesse:

  • La versione 3 di Web Driver IO supporta sia i callback che le promesse.

    Le promesse sono il metodo preferito poiché riduce il codice di gestione degli errori. Si prega di vedere sotto lo stesso esempio scritto utilizzando callback e promesse.

Richiamate

// Imposta/verifica nome/cognome utilizzando Richiamata

it('dovrebbe impostare/verificare nome/cognome utilizzando Callbacks', function (done) { driver.setValue("#fname", "Tony", function (e) { driver.getValue("#fname", function (err, e) { (e).should.be.equal("Tony"); console.log("Nome: " + e); driver.setValue("#lname", "Keith", function (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); done(); }); }); }); }); });

promesse

// Imposta/verifica nome/cognome usando Promises

it('dovrebbe impostare/verificare il nome/cognome usando Promises', function() { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Nome: " + e); }).setValue("#lname", "Keith").getValue("#lname"). then(function (e) { (e).should.be.equal("Keith"); console.log("Last Name: " + e); }); });

Passaggio 7: più risorse

Ecco alcune risorse aggiuntive come riferimento:

• Gruppi di discussione (Gitter)

  • Gruppo di discussione IO driver Web
  • Gruppo di discussione sul moka

• Altri progetti interessanti

  • Supertest - asserzioni
  • Chai - affermazioni

Passaggio 8: conclusione

Ho passato un po' di tempo a ricercare le tecnologie da utilizzare per il mio progetto. Inizialmente ho iniziato con Selenium Web Driver, ma sono passato all'utilizzo di Web Driver IO. Web Driver IO sembrava essere più facile da usare e molto più facile da estendere (almeno la documentazione per l'estensione - i comandi riutilizzabili erano migliori).

Quando ho iniziato a guardare le tecnologie è stato difficile trovare buoni esempi che fossero relativi a tutto ciò che stavo cercando di fare. Questo è il motivo per cui ho voluto condividere queste informazioni e conoscenze con te.

Le tecnologie hanno funzionato molto meglio di quanto mi aspettassi, tuttavia è stata coinvolta una curva di apprendimento. Una volta compreso come tutti i componenti lavorassero insieme, sono stato in grado di scrivere complicati script di test in un tempo molto breve. Gli script più difficili erano componenti basati su JavaScript come un selettore di date e selettori modali.

Non mi sono mai etichettato come sviluppatore JavaScript né ho mai voluto essere un esperto di JavaScript, ma l'utilizzo di queste tecnologie mi ha decisamente motivato ad affinare le mie abilità JS.

Spero che questo articolo sia utile e che gli esempi siano chiari e informativi.

Per favore fatemi sapere se avete domande o commenti.

Grazie, Tony Keith