Web Driver IO Tutorial Utilizarea unui site Web live și exemple de lucru: 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

Web Driver IO Tutorial folosind un site Web live și exemple de lucru

Ultima actualizare: 26.07.2015

(Reveniți des când actualizez acest instructable cu mai multe detalii și exemple)

fundal

Recent mi s-a prezentat o provocare interesantă. A trebuit să introduc teste automate într-un departament de Q / A cu foarte puțină experiență tehnică și fără experiență în programare.

Aceasta a fost într-adevăr două (2) provocări separate. Primul a fost identificarea tehnologiilor pentru efectuarea testării automate. Al doilea a fost să instruiască departamentul Q / A.

Articolul va aborda doar tehnologiile utilizate și ceea ce am învățat în acest proces.

Tehnologiile au funcționat bine, dar a trebuit să caut informații și am petrecut multe ore descoperind probleme.

Mi-a fost greu să găsesc informații pe Internet despre aceste tehnologii care lucrează împreună.

Am vrut să împărtășesc aceste informații, așa că am scris acest articol împreună cu scripturi de test de exemplu de lucru și un site web de testare pentru a rula scripturile împotriva.

Toate scripturile de testare pot fi găsite pe github, iar site-ul de testare funcțional se află la site-ul Web de testare a driverului IO Web Driver

Sper să vă fie de folos. Dacă da, vă rog să-mi spuneți.

Obiective Utilizați tehnologii pentru:

• Testați funcționalitatea site-ului web
• Testați funcționalitatea JavaScript
• Poate fi rulat manual
• Poate fi rulat automat

• Limbă ușor de învățat pentru non-programatori

  Personal Q / A cu cunoștințe de bază despre HTML și JavaScript

• Folosiți numai software open source

Tehnologii

Lista tehnologiilor pe care le aleg:

• mocha - test runner - execută scripturile de testare
• shouldjs - biblioteca de afirmații
• webdriverio - legături de control al browserului (legături de limbă)
• seleniu - fabrică de extragere și funcționare a browserului

• Drivere pentru browser / mobile + browsere

  • Firefox (numai pentru browser)
  • Chrome (browser și driver)
  • IE (Browser și driver)
  • Safari (plug-in pentru browser și driver)

Pasul 1: Instalarea software-ului

Pentru a începe, trebuie să aveți instalat serverul Node JS, Web Driver IO, Mocha, Should și Selenium.

Iată instrucțiunile de instalare pentru Windows 7.

(Sunt un utilizator Mac / Linux, dar a trebuit să instalez totul pe mașinile Windows 7, de aceea l-am inclus ca referință. Procedura de instalare pe un Mac / Linux este similară. Vă rugăm să consultați referințele online pentru mai multe informație.)

Dintr-un browser:

• Instalați nodul care include NPM (Node Package Manager)

• accesați

  • Faceți clic pe instalare
  • Salvați și rulați fișierul
  • Setați calea și variabila (NODE_PATH)

  • Accesați Panoul de control-> Sistem și securitate-> Sistem

    • Setari de sistem avansate

    • Setarea mediului (Variabile de utilizator)

      • Adăugați la PATH

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

      • Adăugați NODE_PATH (Variabile de sistem)

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

Notă: Am instalat toate software-urile de mai jos folosind opțiunea globală npm (-g). În mod normal, acest lucru nu este recomandat, dar pentru această instalare a trebuit să îl instalez la nivel global, deoarece ar fi folosit în mai multe proiecte.

Deschideți promptul de comandă (cmd):

(administrator de utilizator local)

• Instalați seleniu "web driver IO"

  • npm instalați webdriverio -g

    Aceasta va instala driverul web IO la nivel global pe mașina dvs

• Instalați software-ul de testare „mocha”

  • npm instalați mocha -g

    Aceasta va instala mocha la nivel global pe mașina dvs

• Instalați biblioteca de afirmații „ar trebui”

  • Instalarea npm ar trebui să fie -g

    Aceasta se va instala „ar trebui” la nivel global pe mașina dvs

• Instalați Selenium Stand Alone Server

  • Accesați
  • Descărcați fișierul jar și treceți în directorul „seleniu”.

• Instalați browsere și drivere de browser cu care să testați

  • Din promptul cmd:

    • Creați directorul „seleniu”
    • C: / Users {USERNAME} seleniu

    • Comenzi:

      • cd C: / Users {USERNAME}
      • mkdir seleniu

    • Firefox

      • Instalați browserul Firefox, dacă nu este deja instalat.
      • Calea trebuie setată pentru a porni Firefox de la promptul de comandă (cmd).

      • Panou de control-> Sistem și securitate-> Sistem

        • Setari de sistem avansate
        • Setări de mediu
        • Adăugați (adăugați utilizarea punctelor și virgulelor) la variabila cale
        • C: / Program Files (x86) Mozilla Firefox
      • Nu este necesar niciun driver web special pentru Firefox.

    • Crom

      • Instalați browserul Chrome, dacă nu este deja instalat.
      • Calea POATE fi setată pentru a porni Chrome de la promptul de comandă (cmd).
      • Testează mai întâi: chrome.exe din linia de comandă (cmd)
      • Dacă cromul nu pornește, atunci:

      • Panou de control-> Sistem și securitate-> Sistem

        • Setari de sistem avansate
        • Setări de mediu
        • Adăugați (adăugați utilizarea punctelor și virgulelor) la variabila cale
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Pentru Chrome este necesar un driver web special.

        Accesați chromium.org și dezarhivați driverul pe 32 de biți în directorul „seleniu”

    • Internet Explorer (numai pentru Windows - nu va funcționa pe alte platforme)

      • Pentru IE este necesar un driver web special.

        • Accesați
        • Descărcați și dezarhivați driverul pe 64 de biți în directorul „seleniu”.

Pasul 2: Script de test de bază

Să începem cu câteva elemente de bază.

Iată un script mocha simplu care va deschide un site web și va verifica titlul.

// tutorial1.js

// // Acesta este un script de test simplu pentru a deschide un site web și // pentru a valida titlul. // biblioteci necesare var webdriverio = require ('webdriverio'), should = require ('should'); // descrieți un bloc de script de test sau o suită („Test de titlu pentru web driver IO - Pagina de testare a site-ului tutorial”, funcție () {// setați expirarea la 10 secunde this.timeout (10000); var driver = {}; // cârlig pentru a rula înainte de teste înainte (funcție (terminat) {// încărcați driverul pentru driverul browserului = webdriverio.remote ({requiredCapabilities: {browserName: 'firefox'}}); driver.init (done);}); // o specificație de test - „specificație” it („ar trebui să fie încărcați pagina și titlul corect”, funcția () {// încărcați pagina, apoi apelați funcția () returnează driverul.url („https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // obțineți titlul, apoi treceți titlul la funcția ().getTitle (). apoi (funcția (titlul) {// verificați titlul (titlul).should.be.equal ("Web Driver IO - Pagina de testare a tutorialului "); // necomentariu pentru debug consolă // console.log ('Titlul paginii curente:' + titlu);});}); // un" cârlig "pentru a rula după toate testele din acest bloc după (funcție (terminat)) {driver.end (done);});});

Observații:

• Mai întâi trebuie să observați că scriptul de testare este scris în JAVASCRIPT (se termină cu extensia.js).

• Structura de bază este aproape identică pentru toate scripturile de testare.

  • Comentarii antet (//)
  • Biblioteci obligatorii
  • Setare opțiuni (opțional)
  • Cârlig: încărcați driverul browserului
  • Test Suite (descrie)
  • Specificații de testare (pot fi multe specificații într-o suită)
  • Cârlig: Curăță

• Suita de testare începe cu o funcție de descriere care ia doi parametri:

  • Șir - Descrierea pachetului de testare

    • „Verificați pagina pentru un verbul corect”
    • „Verificați operațiunile butonului radio”

  • funcție - bloc de cod de executat

    describe („Descrierea pachetului de testare”, funcția () {});

• Suita de testare va conține 1 sau mai multe specificații de testare (specificații)

• Specificațiile încep cu funcția care ia doi parametri:

  • Șir - Descrierea specificațiilor de testare

    • „Ar trebui să fie corect textul linkului și adresa URL a linkului”
    • „Ar trebui să conțină un verb corect (pachet de copiere)
  • funcție - bloc de cod de executat
  • it („Descrierea specificațiilor testului”, funcția () {});
• O specificație conține una sau mai multe așteptări care testează starea codului

• Acestea se numesc afirmații

  Biblioteca „ar trebui” oferă afirmațiile

• În aproape toate cazurile, va trebui să localizați unul sau mai multe elemente folosind un selector, apoi să efectuați o operație asupra elementului (elementelor)

  • Exemple:

    • Găsiți text pe o pagină și verificați textul
    • Completați un formular și trimiteți
    • Verificați CSS-ul unui element

Să aruncăm o privire mai atentă la exemplul cu comentarii

Încărcați bibliotecile necesare: driverul web IO și ar trebui.

// biblioteci necesare

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

Definiți suita de testare. Această suită se numește: "Titlu Test pentru Web Driver IO - Pagina de testare Tutorial Website"

// un bloc de script de test sau o suită

describe („Test de titlu pentru IO Driver Web - Pagina de testare tutorial Website”, funcția () {…});

Setați expirarea la 10 secunde, astfel încât scriptul să nu expire la încărcarea paginii.

// setați expirarea la 10 secunde

this.timeout (10000);

Cârlig pentru a încărca driverul browserului înainte de a rula specificațiile "specificații". Driverul Firefox este încărcat în acest exemplu.

// cârlig pentru a rula înainte de teste

before (funcție (terminat) {// încărcați driverul pentru driverul browserului = webdriverio.remote ({funcții dorite: {browserName: 'firefox'}}); driver.init (terminat);});

Definiți specificația testului.

// o specificație de testare - „specificație”

it („ar trebui să se încarce pagina și titlul corect”, funcția () {…});

Încărcați pagina site-ului web

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

Obțineți titlu, apoi treceți titlul la funcție ()

.getTitle (). then (function (title) {

… });

Verificați titlul folosind biblioteca de afirmații should.

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

Cârlig pentru a părăsi și a curăța șoferul când ați terminat.

// un „cârlig” pentru a rula după toate testele din acest bloc

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

Pasul 3: Rulați Scriptul de testare

Acum să vedem ce face scriptul de testare atunci când este rulat.

Mai întâi porniți Selenium Stand Alone Server:

• Pentru Windows utilizați linia de comandă (cmd):

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

• Pentru Mac sau Linux, deschideți terminalul:

  • java -jar
  • $ java -jar seleniu-server-standalone-2.46.0.jar
• Vedeți captura de ecran de mai sus

Apoi rulați scriptul de testare:

• Pentru Windows utilizați linia de comandă (cmd):

  • moca
  • # mocha tutorial1.js

• Pentru Mac sau Linux, deschideți terminalul:

  • moca
  • $ mocha tutorial.js
• Vedeți captura de ecran de mai sus

Deci ce s-a întâmplat?

Mocha invocă scriptul „tutorial1.js”. Driverul a pornit browserul (Firefox), a încărcat pagina și a verificat titlul.

Pasul 4: Exemplu de site web

Toate exemplele sunt difuzate pe acest site.

Exemplul de site web se află la: Pagina de testare a IO Web Driver IO

Toate scripturile de test pot fi descărcate de pe github.

Pasul 5: Exemple specifice

Tot codul este disponibil pe github: Web Driver IO Tutorial pe github

• Verificați linkul și textul linkului într-o listă neordonată - „linkTextURL1.js”

  • Lista neordonată are un și linkul este al patrulea element din listă.
  • Adresa URL trebuie să fie „https://tlkeith.com/contact.html”

// Verificați textul linkului Contactați-ne

it („ar trebui să conțină textul linkului Contactați-ne”, funcția () {return driver.getText ("// ul [@ id = 'lista mea'] / li [4] / a"). apoi (funcția (link) {consola.log ('Link găsit:' + link); (link).should.equal („Contactați-ne”);});}); // Verificați-ne adresa URL de contact („ar trebui să conțină adresa URL de contact”, funcția () {return driver.getAttribute ("// ul [@ id = 'lista mea'] / li [4] / a", "href").then (funcție (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL găsit:' + link);});});

• Verificați textul privind drepturile de autor - „Copyright1.js”

  • Drepturile de autor se află în subsol Acest exemplu prezintă 2 moduri diferite de localizare a textului drepturilor de autor:

    • prin selectorul de elemente
    • prin utilizarea xpath ca selector de elemente

// Verificați textul drepturilor de autor folosind id ca selector de elemente

it ('ar trebui să conțină text de drepturi de autor', funcție () {return driver.getText ("# copyright"). apoi (funcție (link) {console.log ('Copyright găsit:' + link); (link).should. egal („Tony Keith - tlkeith.com @ 2015 - Toate drepturile rezervate.”);});}); // Verificați textul drepturilor de autor folosind xpath ca element de selectare a acestuia („ar trebui să conțină textul drepturilor de autor”, funcție () {return driver.getText („// subsol / centru / p”). Apoi (funcție (link) {console.log ('Copyright găsit:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Toate drepturile rezervate.");});});

• Completați câmpurile formularului și trimiteți - „formFillSubmit1.js”

  • Completați prenumele, prenumele și trimiteți, apoi așteptați rezultatele.

  • Acest exemplu prezintă 3 metode de completare a câmpului de introducere a prenumelui:

    • după id
    • de xpath din intrare
    • de xpath din formular-> intrare
  • De asemenea, arată cum să ștergeți un câmp de intrare

// Setați prenumele folosind id la: Tony

it ('ar trebui să seteze prenumele la Tony', function () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Prenume:" + e);});}); // Ștergeți prenumele folosind id it („ar trebui să ștergeți prenumele”, funcția () {return driver.clearElement ("# fname").getValue ("# fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Prenume:" + e);});}); // Setați prenumele folosind xpath de la intrare la: Tony it ('ar trebui să setați prenumele la Tony', funcție () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Prenume:" + e);});}); // Ștergeți prenumele folosind xpath din input it („ar trebui să ștergeți prenumele”, funcția () {return driver.clearElement („// input [@ name = 'fname']”).getValue („// input [@ name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" Prenume: "+ e);});}); // Setați prenumele folosind xpath din formular la: Tony it ('ar trebui să setați prenumele la Tony', funcție () {return driver.setValue ("// formular [@ id = 'căutare-formular'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Then (function (e) {(e).should.be.equal („Tony”); console.log („Prenume:„ + e);});}); // Setați numele de familie folosind id la: Keith it ('ar trebui să setați numele de familie la Keith', funcția () {return driver.setValue ("# lname", "Keith").getValue ("# lname"). Apoi (function (e) {(e).should.be.equal ("Keith"); console.log ("Nume:" + e);});}); // Trimiteți formularul și așteptați rezultatele căutării it ('ar trebui să trimită formularul și să aștepte rezultatele', funcția () {return driver.submitForm ("# căutare-formular"). Apoi (funcția (e) {console.log (' Trimiteți formularul de căutare ');}).waitForVisible ("# search-results", 10000).then (funcția (e) {console.log (' Search Results Found ');});});

• Faceți clic pe butonul Afișare / Ascundere și Verificați textul - „showHideVerify1.js”

  • Textul se află într-un element show / hide. Butonul controlează starea.

  • Acest exemplu arată:

    • Faceți clic pe buton pentru a extinde
    • Așteptați ca elementul să fie vizibil (extins)
    • Verificați textul (copiere)

// faceți clic pe butonul „Mai multe informații” și verificați textul în elementul extins

it ('ar trebui să faceți clic pe butonul Mai multe informații și să verificați textul', funcție () {return driver.click ("# moreinfo"). then (function () {console.log ('Clicked More Info button');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@ id = 'collapseExample'] / div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Toate lucrurile bune merg aici!");});});

• Validați erorile din câmpul formularului - "formFieldValidation.js"

  • Utilizați scripturi de testare pentru a verifica dacă sunt produse mesaje de eroare corecte.

  • Acest exemplu arată:

    Verificați mesajele text de eroare și verificați locația (poziția listei neordonate)

it („ar trebui să conțină 5 erori: prima / ultima / adresa / orașul / statul”, funcția () {

return driver.getText ("// ul [@ class = 'alert alert-danger'] / li [1]"). then (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Vă rugăm să introduceți prenumele');}).getText ("// ul [@ class = 'alert alert-danger'] / li [2]"). apoi (funcția (e) {console.log ('Eroare găsită:' + e); (e).should.be.equal ('Vă rugăm să introduceți numele de familie');}).getText ("// ul [@ class = 'alert alert-danger '] / li [3] "). apoi (funcția (e) {console.log (' Eroare găsită: '+ e); (e).should.be.equal (' Vă rugăm să introduceți adresa ');}). getText ("// ul [@ class = 'alert alert-danger'] / li [4]"). then (funcția (e) {console.log ('Eroare găsită:' + e); (e)..be.equal ('Vă rugăm să introduceți orașul');}).getText ("// ul [@ class = 'alert alert-danger'] / li [5]"). then (function (e) {console.log ('Eroare găsită:' + e); (e).should.be.equal ('Vă rugăm să introduceți starea');}); });

• Buclarea datelor pentru validarea link-ului / textului / paginii URL - „LoopDataExample1.js”

  • Acest exemplu arată: Utilizați o matrice de date JSON pentru a stoca linkul și numele, apoi iterați

    • Verificați fiecare text URL și link
    • Faceți clic pe link și încărcați pagina

// Link date - link și text

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 "," nume ":" dataLoopExample1.js "}]; … // parcurgeți fiecare linkArray linkArray.forEach (funcție (d) {it ('ar trebui să conțină text / link, apoi mergeți la pagină -' + d.name, function () {return driver // asigurați-vă că sunteți pe pagina de pornire).url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). apoi (funcție (titlu) {// verificați titlul (titlul).should.be.equal ("IO Driver pentru web - Pagina de testare tutorial ");}) // găsiți adresa URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL găsit:' + d.link);}) // accesați pagina URL și verificați dacă există.click ('a =' + d.name).waitForVisible ("# js-repo-pjax- container ", 10000).then (function () {console.log ('Github Page Found');});});});

• Buclarea datelor statice pentru a completa câmpurile formularului - „loopDataExample2.js”

  • Acest exemplu arată: Utilizați o matrice de date JSON pentru a stoca numele / prenumele

    • Buclați datele pentru a completa câmpurile formularului, apoi trimiteți formularul
    • Așteptați pagina cu rezultate
    • Verificați prenumele / prenumele în pagina cu rezultate

// matrice de date - firstName și lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // parcurgeți fiecare dataArray dataArray.forEach (funcție (d) {it ('ar trebui să completați câmpuri, pagină sumbit', funcție () {return driver // asigurați-vă că sunteți pe pagina de pornire.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). apoi (funcția (titlul) {// verificați titlul (titlul).should.be.equal ("IO Driver de Web - Pagina de testare a tutorialului");}).setValue ("# fname", d.firstName).getValue ("# fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("First Nume: "+ e);}).setValue (" # lname ", d.lastName).getValue (" # lname "). Then (function (e) {(e).should.be.equal (d.lastName); console.log ("Nume:" + e);}).submitForm ("# căutare-formular"). apoi (funcție () {console.log ('Trimiteți formularul de căutare');}).waitForVisible ("# search-results", 10000).then (function () {console.log ('Pagina de rezultate a fost găsită');}).getText ("// h1"). then (function (link) {console.log ('Text găsit:' + link); (link).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Validați proprietățile CSS - „cssValidation1.js”

  • Acest exemplu arată cum să:

    • Validați următoarele proprietăți CSS:

      • culoare
      • căptușeală (sus, jos, dreapta, stânga)
      • culoare de fundal

it ('ar trebui să conțină culoarea corectă a textului de eroare', funcția () {return driver.getCssProperty ("// ul [@ class = 'alert alert-danger'] / li [1]", "color"). apoi (function (result) {console.log ('Color found:' + result.parsed.hex + "or" + result.value); (result.parsed.hex).should.be.equal ('# a94442'); });});

it ('ar trebui să conțină umplutura corectă în celula tabelului', funcția () {

return driver // padding: sus dreapta jos stânga.getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top"). then (function (result) {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); (result.value).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: '+ result.value); (result.value).should.be.equal (' 5px ');}); });

it („ar trebui să conțină culoarea de fundal corectă în antetul tabelului”, funcția () {

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');}); });

Pasul 6: Sfaturi și trucuri

• Depanare:

  • Activați înregistrarea la nivelul driverului pentru mai multe depanări și pentru a crea jurnale.

    • Setați logLevel la „detaliat”
    • Setați logOutput la numele directorului („logs”)

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

• Utilizați console.log (), debug (), getText () pentru a depana.

  • console.log () - Folosiți pentru a afișa informații pentru a determina starea.
  • debug () - Folosiți pauza browser / script până când Enter este apăsat pe linia de comandă.

  • getText () - Folosiți pentru a verifica dacă interacționați cu elementul corect.

    Foarte util cu expresiile xpath

// Faceți clic pe articolul 3 din listă

it ('ar trebui să faceți clic pe articolul 3 din listă', funcție () {// utilizați getText () pentru a verifica dacă xpath este corect pentru elementul de returnare a driverului.getText ("// ul [@ id = 'lista mea'] / li [3] / div / div / a "). Apoi (funcție (link) {// utilizați consola.log () pentru a afișa informații consola.log ('Link găsit:' + link); (link).should.equal („Elementul 3”);}) // utilizați debug () pentru a opri acțiunea pentru a vedea ce se întâmplă în browser.debug ().click („// ul [@ id = 'lista mea'] / li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // asteptati sa apara formularul de cautare google.waitForVisible ("# tsf", 20000).then (function (e) {console.log ('Rezultatele căutării găsite');});});

• Utilizați variabila de mediu pentru a schimba dinamic browserul:

  • Utilizați variabila de mediu SELENIUM_BROWSER pentru a invoca un browser diferit fără a modifica de fiecare dată scriptul de testare.
  • Necesită o ușoară modificare de codare pentru a suporta.

Modificări de cod:

// încărcați driverul pentru browser

driver = webdriverio.remote ({Capabilități dorite: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Browsere acceptate:

• Internet Explorer - IE 8+ (numai pentru Windows)

  SELENIUM_BROWSER = adică mocha

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = fire moxa

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = crom mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Testare:

• Pentru Windows utilizați git bash shell:

  • SELENIUM_BROWSER = crom mocha
  • $ SELENIUM_BROWSER = crom mocha DynamicBrowser.js

• Pentru Mac sau Linux, deschideți terminalul:

  • SELENIUM_BROWSER = crom mocha
  • $ SELENIUM_BROWSER = crom mocha DynamicBrowser.js

• Testare receptivă:

  • Determinați punctele de întrerupere pe baza proiectului sau cadrului (de exemplu, bootstrap).

  • Definiți variabilele de mediu pentru fiecare punct de întrerupere:

    • DESKTOP - 1200 px
    • TABLET - 992 px
    • MOBIL - 768 px

  • Elaborați o comandă reutilizabilă pentru a citi variabila de mediu și a seta dimensiunea browserului.

    Vezi exemplul de mai jos

  • Apelați comanda reutilizabilă din scriptul de testare.

// cod reutilizabil - bibliotecă // fragment de cod if (bp == "DESKTOP") {obj.width = 1200; obiect.height = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obiect.height = 400; obj.name = bp; }

// Script de testare

before (funcție (terminat) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // setați dimensiunea ferestrei ('ar trebui să seteze dimensiunea ferestrei', function (done) {// doar latimea conteaza driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Comenzi reutilizabile (comenzi personalizate):

  • Web Driver IO este ușor de extins.
  • Îmi place să pun toate comenzile refolosibile într-o bibliotecă. (poate asta este școală veche, dar funcționează!)

common / commonLib.js

// verifyLastNameCheckError ()

// // Descriere: // Verifică mesajul de eroare de validare a formularului de nume // // Intrare: // număr - indexul erorii (1-5) // Ieșire: // niciunul // var verifyLastNameCheckError = function () { var idx = arguments [0], callback = arguments [arguments.length - 1]; acest.getText ("// ul [@ class = 'alert alert-danger'] / li [" + idx + "]", funcție (err, e) {console.log ('Eroare găsită:' + e); (e).should.be.equal ('Vă rugăm să introduceți numele de familie');}).call (apel invers); }; // exportați funcția module.exports.verifyLastNameCheckError = verificaLastNameCheckError;

Iată modificările specifice necesare pentru a apela o funcție reutilizabilă

A se vedea formFieldValidation.js pentru un exemplu complet de lucru

// necesită comanda reutilizabilă - CommonLib

common = require ('./ Common / CommonLib'); … // legați comenzile driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); it ('ar trebui să conțină 2 erori: prenume / nume', funcție () {// apelează driverul funcției reutilizabile.verifyFirstNameError (1);.verifyLastNameError (2);});

• Fișierul proiectului / Structura directorului:

  • Iată structura tipică a proiectului:

    • „Proiect” - directorul principal al proiectului

      • README.md - readme pentru proiect global

      • „Comun” - director pentru funcții globale comune tuturor proiectelor

        • common-lib.js - bibliotecă de funcții globale
        • README.md - readme pentru funcții globale

      • „Produs1” - director pentru produsul 1

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

        • "Comun" - director pentru funcțiile locale pentru proiectul 1

          • prod1-lib.js - bibliotecă de funcții locale pentru proiectul 1
          • README.md - readme pentru funcții locale pentru proiectul 1

      • „Produs2” - director pentru produsul 2test-script1.jstest-script2.js

        • „Comun” - director pentru funcțiile locale pentru proiectul 2

          • prod2-lib.js - bibliotecă de funcții locale pentru proiectul 2
          • README.md - readme pentru funcții locale pentru proiectul 2

• Divizați scripturile de testare în mai multe fișiere:

  • Iată un exemplu de utilizare a mai multor fișiere:

    • Sanity Check - script de test de bază pentru a verifica dacă totul funcționează
    • Element static și validare text - verificați toate elementele și textul
    • Validare eroare formular / pagină - validare eroare
    • Rezultatele căutării - testați conținut dinamic

• Rambursări VS. Promisiuni:

  • Versiunea 3 a Web Driver IO acceptă atât apeluri de apel cât și promisiuni.

    Promisiunile sunt metoda preferată, deoarece reduce codul de tratare a erorilor. Vă rugăm să consultați mai jos același exemplu scris folosind callback-uri și promisiuni.

Rambursări

// Setați / verificați prenumele / prenumele folosind Callback

it ('ar trebui să seteze / verifice numele / prenumele folosind apeluri de apeluri', funcție (gata) {driver.setValue ("# fname", "Tony", funcție (e) {driver.getValue ("# fname", funcție (err, e) {(e).should.be.equal ("Tony"); console.log ("Prenume:" + e); driver.setValue ("# lname", "Keith", funcție (e) { driver.getValue ("# lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Last Name:" + e); done ();});});});});});

Promisiuni

// Setați / verificați prenumele / prenumele folosind Promisiuni

it ('ar trebui să seteze / verifice numele / prenumele folosind Promisiuni', funcția () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Prenume:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). then (function (e) {(e).should.be.equal ("Keith"); console.log ("Nume:" + e);});});

Pasul 7: Mai multe resurse

Iată câteva resurse suplimentare pentru referință:

• Grupuri de discuții (Gitter)

  • Web Driver IO Discussion Group
  • Grupul de discuții Mocha

• Alte proiecte interesante

  • Supertest - afirmații
  • Chai - afirmații

Pasul 8: Concluzie

Am petrecut ceva timp cercetând tehnologiile de utilizat pentru proiectul meu. Am început inițial cu Selenium Web Driver, dar am trecut la utilizarea Web Driver IO. Web Driver IO părea a fi mai ușor de utilizat și mult mai ușor de extins (cel puțin documentația pentru extindere - comenzile refolosibile a fost mai bună).

Când am început să mă uit la tehnologii, a fost greu să găsesc exemple bune care să fie relativ la orice încercam să fac. Acesta este motivul pentru care am vrut să vă împărtășesc aceste informații și cunoștințe.

Tehnologiile au funcționat mult mai bine decât mă așteptam, totuși era implicată o curbă de învățare. Odată ce am înțeles cum funcționau împreună toate componentele, am reușit să scriu scripturi de testare complicate într-un timp foarte scurt. Cele mai dificile scripturi au fost componente bazate pe JavaScript, cum ar fi un selector de date și selectoare modale.

Nu m-am etichetat niciodată ca dezvoltator JavaScript și nici nu mi-am dorit să fiu expert în JavaScript, dar folosirea acestor tehnologii m-a motivat cu siguranță să-mi perfecționez abilitățile JS.

Sper că acest articol este util și exemplele sunt clare și informative.

Vă rog să-mi spuneți dacă aveți întrebări sau comentarii.

Mulțumesc, Tony Keith