Vadnica IO spletnega gonilnika z uporabo spletnega mesta v živo in primeri dela: 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:07

Vadnica IO spletnega gonilnika z uporabo spletnega mesta v živo in delovnih primerov

Zadnja posodobitev: 26.7.2015

(Pogosto preverjajte, ko posodabljam ta navodila z več podrobnostmi in primeri)

Ozadje

Pred kratkim mi je bil predstavljen zanimiv izziv. Moral sem uvesti avtomatizirano testiranje v oddelek Q/A z zelo malo tehničnimi izkušnjami in brez programskega znanja.

To sta bila res dva (2) ločena izziva. Prva je bila identifikacija tehnologij za avtomatizirano testiranje. Drugi je bil usposabljanje oddelka Q/A.

Članek bo obravnaval le uporabljene tehnologije in tisto, kar sem se v tem procesu naučil.

Tehnologije so delovale dobro, vendar sem res moral iskati informacije in porabil veliko ur, da sem odkril težave.

Na internetu sem težko našel informacije o teh tehnologijah, ki so delovale skupaj.

Te podatke sem želel deliti, zato sem ta članek napisal skupaj z delovnimi primeri preskusnih skriptov in testnim spletnim mestom, na katerem bi se skripti izvajali.

Vse testne skripte najdete na githubu, delovno preskusno mesto pa na spletnem mestu za gonilnike IO Tutorial Test Site

Upam, da se vam bo zdel koristen. Če želite, mi prosim sporočite.

Cilji Uporabite tehnologije za:

• Preizkusite funkcionalnost spletnega mesta
• Preizkusite funkcionalnost JavaScript
• Lahko se izvaja ročno
• Lahko se zažene samodejno

• Enostavno učenje jezika za programerje

  Q/Osebje z osnovnim znanjem HTML in JavaScript

• Uporabljajte samo odprtokodno programsko opremo

Tehnologije

Seznam tehnologij, ki jih izberem:

• mocha - testni tekač - izvaja preskusne skripte
• shouldjs - knjižnica trditev
• webdriverio - nadzorne vezi brskalnika (jezikovne vezave)
• selenium - tovarna abstrakcije in delovanja brskalnika

• Brskalnik/gonilniki za mobilne naprave + brskalniki

  • Firefox (samo brskalnik)
  • Chrome (brskalnik in gonilnik)
  • IE (brskalnik in gonilnik)
  • Safari (vtičnik za brskalnik in gonilnik)

Korak: Namestitev programske opreme

Za začetek morate imeti nameščen samostojni strežnik Node JS, spletni gonilnik IO, Mocha, Should in Selenium.

Tu so navodila za namestitev sistema Windows 7.

(Uporabljam Mac/Linux, vendar sem moral vse namestiti na računalnike z operacijskim sistemom Windows 7, zato sem ga vključil za vašo referenco. Postopek namestitve na Mac/Linux je podoben. Za več informacij se obrnite na spletne reference informacije.)

Iz brskalnika:

• Namestite vozlišče, ki vključuje NPM (Node Package Manager)
• pojdite na
  • Kliknite namesti
  • Shranite in zaženite datoteko
  • Nastavite pot in spremenljivko (NODE_PATH)

  • Pojdite na Nadzorna plošča-> Sistem in varnost-> Sistem

    • Napredne sistemske nastavitve

    • Nastavitev okolja (uporabniške spremenljivke)

      • Dodaj na PATH

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

      • Dodajte NODE_PATH (sistemske spremenljivke)

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

Opomba: Vso spodnjo programsko opremo sem namestil z globalno možnostjo npm (-g). To običajno ni priporočljivo, vendar sem za to namestitev moral namestiti globalno, saj bi se uporabljal v več projektih.

Odpri ukazni poziv (cmd):

(skrbnik lokalnega uporabnika)

• Namestite selen "spletni gonilnik IO"

  • npm namestite webdriverio -g

    S tem boste na vaš računalnik globalno namestili spletni gonilnik IO

• Namestite programsko opremo za preizkušanje "mocha"

  • npm namestite mocha -g

    To bo globalno namestilo mocha na vaš računalnik

• Namestite knjižnico trditev »naj«

  • npm namestiti naj -g

    To bo globalno na vašo napravo namestilo "should"

• Namestite strežnik Selenium Stand Alone

  • Pojdite na
  • Prenesite datoteko jar in se premaknite v imenik »selenium«.

• Namestite brskalnike in gonilnike brskalnika za testiranje

  • Iz poziva cmd:

    • Ustvarite imenik "selen"
    • C: / Users {USERNAME} selenium

    • Ukazi:

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

    • Firefox

      • Namestite brskalnik firefox, če še ni nameščen.
      • Pot je treba nastaviti za zagon Firefoxa iz ukaznega poziva (cmd).

      • Nadzorna plošča-> Sistem in varnost-> Sistem

        • Napredne sistemske nastavitve
        • Nastavitve okolja
        • Spremenljivki poti dodaj (dodaj uporabo podpičja)
        • C: / Program Files (x86) Mozilla Firefox
      • Za Firefox ni potreben poseben spletni gonilnik.

    • Chrome

      • Namestite brskalnik chrome, če še ni nameščen.
      • Pot je lahko nastavljena za zagon Chroma iz ukaznega poziva (cmd).
      • Najprej preizkusite: chrome.exe iz ukaznega poziva (cmd)
      • Če se krom ne zažene:

      • Nadzorna plošča-> Sistem in varnost-> Sistem

        • Napredne sistemske nastavitve
        • Nastavitve okolja
        • Spremenljivki poti dodaj (dodaj uporabo podpičja)
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Za Chrome je potreben poseben spletni gonilnik.

        Pojdite na chromium.org in razpakirajte 32 -bitni gonilnik v imenik "selenium"

    • Internet Explorer (samo za Windows - ne bo deloval na drugih platformah)

      • Za IE potrebujete poseben spletni gonilnik.

        • Pojdite na
        • Prenesite in razpakirajte 64 -bitni gonilnik v imenik "selenium".

2. korak: Skript osnovnega testa

Začnimo z nekaj osnovami.

Tukaj je preprost mocha skript, ki bo odprl spletno mesto in preveril naslov.

// tutorial1.js

// // To je preprost preskusni skript za odpiranje spletnega mesta in // preverjanje naslova. // potrebne knjižnice var webdriverio = require ('webdriverio'), should = require ('should'); // preskusni blok ali sklop preskusnih skriptov ('Title Test for Web Driver IO - Website Tutorial Test Page', function () {// timeout time (time00out) (10000); var driver = {}; // hook za zagon pred preskusi pred (function (done) {// naložite gonilnik za gonilnik brskalnika = webdriverio.remote ({desireCapabilities: {browserName: 'firefox'}}); driver.init (končano);}); // preskusna specifikacija - "specifikacija" to ("mora biti nalaganje pravilne strani in naslova", function () {// naložiti stran, nato pokličite function () return driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest).html ') // dobimo naslov, nato naslov posredujemo funkciji ().getTitle (). nato (funkcija (naslov) {// preverimo naslov (naslov). "); // razveljavi za odpravljanje napak konzole // console.log ('Trenutni naslov strani:' + naslov);});}); //" kljuka "za izvajanje po vseh testih v tem bloku po (funkcija (končano) {driver.end (končano);});});

Opažanja:

• Najprej morate opaziti, da je preskusni skript napisan v jeziku JAVASCRIPT (konča se v razširitvi.js).

• Osnovna struktura je skoraj enaka za vse testne skripte.

  • Komentarji glave (//)
  • Obvezne knjižnice
  • Nastavi možnosti (neobvezno)
  • Hook: Naložite gonilnik brskalnika
  • Test Suite (opiši)
  • Preskusne specifikacije (v paketu je lahko veliko specifikacij)
  • Kavelj: Očistite

• Testni paket se začne z opisno funkcijo, ki ima dva parametra:

  • Niz - opis nabora testov

    • "Preverite pravilno besedo na strani"
    • »Preverjanje delovanja izbirnih gumbov«

  • function - blok kode za izvedbo

    description ('Opis testnega niza', funkcija () {});

• Testni paket bo vseboval 1 ali več preskusnih specifikacij (specifikacija)

• Specifikacije se začnejo s funkcijo, ki ima dva parametra:

  • Niz - opis specifikacije preskusa
    • "Morali bi biti pravilno besedilo povezave in URL povezave"
    • "Vsebovati mora pravilno besedo (kopiranje)
  • function - blok kode za izvedbo
  • it („Opis specifikacije preskusa“, funkcija () {});
• Specifikacija vsebuje eno ali več pričakovanj, ki preskušajo stanje kode

• Temu pravimo trditve

  Knjižnica "naj" vsebuje trditve

• V skoraj vseh primerih boste morali z izbirnikom poiskati enega ali več elementov in nato opraviti nekaj operacij na elementih

  • Primeri:

    • Poiščite besedilo na strani in ga preverite
    • Izpolnite obrazec in ga predložite
    • Preverite CSS elementa

Poglejmo si podrobneje primer s komentarji

Naložite potrebne knjižnice: spletni gonilnik IO in bi moral.

// potrebne knjižnice

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

Določite testno zbirko. Ta paket se imenuje: "Test Title for Web Driver IO - Tutorial Test Page Website"

// testni blok ali paket skriptov

description ('Naslovni preizkus spletnega gonilnika IO - spletno mesto strani z vadnicami', funkcija () {…});

Časovna omejitev nastavite na 10 sekund, da skript ne bo potekel pri nalaganju strani.

// nastavimo časovno omejitev na 10 sekund

this.timeout (10000);

Preden zaženete specifikacije "specifikacije", morate naložiti gonilnik brskalnika. V tem primeru je naložen gonilnik Firefox.

// kljuka za zagon pred preskusi

pred (funkcija (končano) {// naložite gonilnik za gonilnik brskalnika = webdriverio.remote ({zaželjene zmogljivosti: {ime brskalnika: 'firefox'}}); driver.init (končano);});

Določite preskusno specifikacijo.

// preskusna specifikacija - "specifikacija"

it ('naložiti pravilno stran in naslov', funkcija () {…});

Naložite stran spletnega mesta

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

Pridobite naslov in nato naslov posredujte funkciji ()

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

… });

Naslov preverite s knjižnico trditev naj.

(naslov).should.be.equal ("IO spletnega gonilnika - Testna stran vadnice");

Kavelj za izhod in čiščenje gonilnika, ko končate.

// "kavelj" za izvajanje po vseh testih v tem bloku

after (funkcija (končano) {driver.end (končano);});

3. korak: Zaženite preskusni skript

Zdaj pa poglejmo, kaj naredi preskusni skript, ko se zažene.

Najprej zaženite strežnik Selenium Stand Alone:

• Za Windows uporabite ukazno vrstico (cmd):

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

• Za Mac ali Linux odprite terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Glejte posnetek zaslona zgoraj

Nato zaženite preskusni skript:

• Za Windows uporabite ukazno vrstico (cmd):

  • moka
  • # mocha tutorial1.js

• Za Mac ali Linux odprite terminal:

  • moka
  • $ mocha tutorial.js
• Glejte posnetek zaslona zgoraj

Torej kaj se je zgodilo?

Mocha prikliče skript "tutorial1.js". Gonilnik je zagnal brskalnik (Firefox), naložil stran in preveril naslov.

4. korak: Primer spletnega mesta

Vsi primeri so prikazani na tem spletnem mestu.

Primer spletnega mesta je na naslovu: Testna stran vmesnika IO spletnega gonilnika

Vse testne skripte lahko prenesete iz github -a.

5. korak: Posebni primeri

Vsa koda je na voljo na githubu: Spletni gonilnik IO Vadnica na githubu

• Preverite povezavo in besedilo povezave na neurejenem seznamu - "linkTextURL1.js"

  • Neurejen seznam ima oznako in povezava je četrti element seznama.
  • URL mora biti "https://tlkeith.com/contact.html"

// Preverite besedilo povezave Pišite nam

it ('mora vsebovati besedilo povezave Contact Us', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Povezava je najdena:' + povezava); (povezava).should.equal ("Pišite nam");});}); // Preverite URL za stik z nami it ('mora vsebovati URL za stik z nami', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (funkcija (povezava) {(povezava).should.equal ("https://tlkeith.com/contact.html"); console.log ('Najden URL:' + povezava);});});

• Preveri avtorsko besedilo - "Copyright1.js"

  • Avtorske pravice so v nogi Ta primer prikazuje 2 različna načina iskanja besedila avtorskih pravic:

    • z izbirnikom elementov
    • z uporabo xpath kot izbirnika elementov

// Preverjanje avtorskega besedila z uporabo id kot izbirnika elementov

it ('mora vsebovati avtorsko besedilo', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. enako ("Tony Keith - tlkeith.com @ 2015 - Vse pravice pridržane.");});}); // Preverjanje avtorskega besedila z izbiro elementa xpath ('mora vsebovati avtorsko besedilo', function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Najdene so avtorske pravice:' + povezava); (povezava).should.equal ("Tony Keith - tlkeith.com @ 2015 - Vse pravice pridržane.");});});

• Izpolnite polja obrazcev in jih predložite - "formFillSubmit1.js"

  • Vnesite ime, priimek in oddajte, nato počakajte na rezultate.

  • Ta primer prikazuje tri načine izpolnjevanja polja za vnos imena:

    • po id
    • po xpath od vnosa
    • z xpath iz obrazca-> vnos
  • Pokaže tudi, kako počistite polje za vnos

// Ime nastavite z id na: Tony

it ('mora ime nastaviti na Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Ime:" + e);});}); // Počisti prvo ime z id -jem ("naj počisti ime", function () {vrni driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Ime:" + e);});}); // Z vhodom xpath nastavite prvo ime na: Tony it ("ime mora biti nastavljeno na 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);});}); // Počisti prvo ime z uporabo xpath iz vnosa it ('naj počisti ime', function () {return driver.clearElement ("// input [@name = 'fname']")).getValue ("// input [@name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First Name: " + e);});}); // Z xpath iz obrazca nastavite prvo ime na: Tony it ("ime mora biti nastavljeno na 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 ("Ime:" + e);});}); // Nastavite priimek z id na: Keith it ('priimek bi moral nastaviti na Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Then (funkcija (e) {(e).should.be.equal ("Keith"); console.log ("Priimek:" + e);});}); // Predložite obrazec in počakajte na rezultate iskanja ('pošljite obrazec in počakajte na rezultate', function () {return driver.submitForm ("#search-form"). Then (function (e) {console.log (' Predložite obrazec za iskanje ');}).waitForVisible ("#rezultati iskanja", 10000).then (funkcija (e) {console.log (' Rezultati iskanja so najdeni ');});});

• Kliknite gumb Pokaži/skrij in preveri besedilo - "showHideVerify1.js"

  • Besedilo je v elementu pokaži/skrij. Gumb nadzoruje stanje.

  • Ta primer prikazuje:

    • Za razširitev kliknite gumb
    • Počakajte, da je element viden (razširjen)
    • Preverite besedilo (kopija)

// kliknite gumb "Več informacij" in preverite besedilo v razširjenem elementu

it ('naj klikne gumb za več informacij in preveri besedilo', function () {return driver.click ("#moreinfo"). then (function () {console.log ('Clicked More Info button');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'crashExample']/div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Vse dobro je tukaj!");});});

• Preverjanje napak v polju obrazca - "formFieldValidation.js"

  • S preskusnimi skripti preverite, ali so nastala pravilna sporočila o napakah.

  • Ta primer prikazuje:

    Preverite besedilna sporočila o napakah in lokacijo (neurejen položaj seznama)

it ('mora vsebovati 5 napak: prva/zadnja/naslov/mesto/država', function () {

return driver.getText ("// ul [@class = 'alert alert-hazard']/li [1]"). then (function (e) {console.log ('Napaka najdena:' + e); (e).should.be.equal ('Prosimo, vnesite ime');}).getText ("// ul [@class = 'alert alert-hazard']/li [2]"). then (function (e) {console.log ('Napaka najdena:' + e); (e).should.be.equal ('Prosimo, vnesite priimek');}).getText ("// ul [@class = 'alert alert-hazard ']/li [3] "). nato (funkcija (e) {console.log (' Napaka je najdena: ' + e); (e). getText ("// ul [@class = 'alert alert-hazard']/li [4]"). then (function (e) {console.log ('Napaka najdena:' + e); (e).should.be.equal ('Prosimo, vnesite mesto');}).getText ("// ul [@class = 'alert alert-hazard']/li [5]"). then (function (e) {console.log ('Napaka najdena:' + e); (e).should.be.equal ('Prosimo, vnesite stanje');}); });

• Ponavljanje podatkov za preverjanje povezave/besedila/strani URL - "LoopDataExample1.js"

  • Ta primer prikazuje: Uporabite niz podatkov JSON za shranjevanje povezave in imena, nato ponovite

    • Preverite vsako besedilo URL -ja in povezavo
    • Kliknite povezavo in naložite stran

// Povezava podatkov - povezava in besedilo

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 "}]; … // kroži skozi vsako povezavo LinkArray linkArray.forEach (function (d) {it ('naj vsebuje besedilo/povezavo, nato pojdi na stran -' + d.name, function () {return driver // se prepričajte, da ste na začetni strani.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// preveri naslov (title).should.be.equal ("Spletni gonilnik IO - Tutorial Test Page ");}) // poiščite URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('Najden URL:' + d.link);}) // pojdite na stran URL in preverite, ali obstaja.click ('a =' + d.name).waitForVisible ("#js-repo-pjax- zabojnik ", 10000).then (function () {console.log ('Stran Github je bila najdena');});});});

• Zanka statičnih podatkov za polnjenje polj obrazcev - "loopDataExample2.js"

  • Ta primer prikazuje: Uporabite niz podatkov JSON za shranjevanje imena/priimka
    • Prebrskajte podatke, da zapolnite polja obrazca, nato pošljite obrazec
    • Počakajte na stran z rezultati
    • Preverite ime / priimek na strani z rezultati

// podatkovno polje - ime in priimek ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // prebrskaj po vsakem podatkovnem nizu dataArray.forEach (function (d) {it ('naj zapolni polja, sumbit stran', function () {return driver // preverite, ali ste na začetni strani.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// preveri naslov (title).should.be.equal ("Spletni gonilnik IO - Testna stran vadnice");}).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 ("Priimek:" + e);}).submitForm ("#iskalni obrazec"). nato (funkcija () {console.log ('Predloži iskalni obrazec');}). "#search-results", 10000).then (function () {console.log ('Result Page Found');}).getText ("// h1"). then (function (link) {console.log ('Besedilo je najdeno:' + povezava); (povezava).should.equal ("Dobrodošli" + d.prvo ime + "" + d.lastName + ".");});});});

• Preverjanje lastnosti CSS - "cssValidation1.js"

  • Ta primer prikazuje, kako:

    • Preverite naslednje lastnosti CSS:

      • barvo
      • oblazinjenje (zgoraj, spodaj, desno, levo)
      • Barva ozadja

it ('mora vsebovati pravilno barvo besedila napake', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-hazard']/li [1]", "color"). then (function (result) {console.log ('Barva najdena:' + result.parsed.hex + "ali" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('mora vsebovati pravilno oblazinjenje v celici tabele', function () {

return driver // padding: zgoraj desno spodaj levo.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 ("// tabela [@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- desno "). 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 ('mora vsebovati pravilno barvo ozadja v glavi tabele', function () {

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

6. korak: Nasveti in triki

• Odpravljanje napak:

  • Vklopite beleženje na ravni gonilnika za več napak in ustvarjanje dnevnikov.

    • Nastavi logLevel na 'verbose'
    • Nastavi logOutput na ime imenika ('dnevniki')

gonilnik = webdriverio.remote (loglevel: 'verbose', logOutput: 'dnevniki', {željene zmogljivosti: {ime brskalnika: 'firefox'}});

• Za odpravljanje napak uporabite console.log (), debug (), getText ().

  • console.log () - Uporabite za prikaz informacij za določitev stanja.
  • debug () - Uporabite premor brskalnika/skripta, dokler v ukazni vrstici ne pritisnete enter.

  • getText () - Uporabite za preverjanje interakcije s pravilnim elementom.

    Posebej v pomoč pri izrazih xpath

// Kliknite na postavko 3 s seznama

it ('naj klikne na element 3 s seznama', function () {// z uporabo getText () preveri, ali je pot xp pravilna za gonilnik za vrnitev elementa.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Nato (funkcija (povezava) {// uporabite console.log () za izpis informacij console.log (" Povezava je najdena: " + povezava); (povezava).should.equal ("Element 3");}) // z debug () ustavite dejanje, da vidite, kaj se dogaja v brskalniku.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Povezava je kliknjena');}) // počakajte, da se prikaže Googlov iskalni obrazec.waitForVisible ("#tsf", 20000).then (function (e) {console.log ('Rezultati iskanja najdeni');});});

• Če želite dinamično spremeniti brskalnik, uporabite spremenljivko okolja:

  • Uporabite spremenljivko okolja SELENIUM_BROWSER za priklic drugega brskalnika, ne da bi vsakič spremenili preskusni skript.
  • Za podporo potrebuje rahlo spremembo kodiranja.

Spremembe kode:

// naložim gonilnik za brskalnik

gonilnik = webdriverio.remote ({željene zmogljivosti: {ime brskalnika: process.env. SELENIUM_BROWSER || 'krom'}});

Podprti brskalniki:

• Internet Explorer - IE 8+ (samo Windows)

  SELENIUM_BROWSER = tj. Moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = kromirana moka

• Opera 12+

  SELENIUM_BROWSER = operna moka

• Safari

  SELENIUM_BROWSER = safari moka

Testiranje:

• Za Windows uporabite lupino git bash:

  • SELENIUM_BROWSER = kromirana moka
  • $ SELENIUM_BROWSER = kromirani mocha DynamicBrowser.js

• Za Mac ali Linux odprite terminal:

  • SELENIUM_BROWSER = kromirana moka
  • $ SELENIUM_BROWSER = kromirani mocha DynamicBrowser.js

• Odzivno testiranje:

  • Določite prelomne točke glede na projekt ali okvir (tj. Zagonski pas).

  • Določite spremenljivke okolja za vsako točko preloma:

    • NAMIG - 1200 px
    • TABLET - 992 px
    • MOBILNI - 768 px

  • Razvijte ukaz za večkratno uporabo, da preberete spremenljivko okolja in nastavite velikost brskalnika.

    Glej spodnji primer

  • V preizkusnem skriptu pokličite ukaz za večkratno uporabo.

// koda za večkratno uporabo - knjižnica // delček kode if (bp == "DESKTOP") {obj.width = 1200; obj.visina = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.visina = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.visina = 400; obj.name = bp; }

// Testni skript

before (funkcija (končano) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (gonilnik));} // nastavimo velikost okna ('naj nastavimo velikost okna', function (done) {// samo širina je pomembna driver.setWindowSize (winsize.width, winsize.height, function () {}). call (končano);});

• Ukazi za večkratno uporabo (Ukazi po meri):

  • Spletni gonilnik IO je enostavno razširljiv.
  • Vse ukaze za večkratno uporabo rad dajem v knjižnico. (morda je to stara šola, vendar deluje!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Opis: // Preveri sporočilo o napaki pri preverjanju oblike priimka // // Vnos: // številka - indeks napake (1-5) // Izhod: // brez // var verifyLastNameCheckError = function () { var idx = argumenti [0], povratni klic = argumenti [argumenti.length - 1]; this.getText ("// ul [@class = 'alert alert-hazard']/li [" + idx + "]", function (err, e) {console.log ('Napaka najdena:' + e); (e).should.be.equal ('Prosimo, vnesite priimek');}).call (povratni klic); }; // izvoz funkcijskega modula.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Tu so posebne spremembe, potrebne za klic funkcije za večkratno uporabo

Za celoten primer dela glejte formFieldValidation.js

// zahtevajo ukaz za večkratno uporabo - CommonLib

common = require ('./ Common/CommonLib'); … // vezamo ukaze driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (gonilnik)); it ('mora vsebovati 2 napaki: ime/priimek', function () {// pokličite gonilnik funkcije za večkratno uporabo.verifyFirstNameError (1);.verifyLastNameError (2);});

• Struktura projektne datoteke/imenika:

  • Tu je značilna struktura projekta:

    • "Projekt" - glavni imenik projekta
      • README.md - readme za globalni projekt

      • "Common" - imenik za globalne funkcije, skupne vsem projektom

        • common -lib.js - globalna knjižnica funkcij
        • README.md - readme za globalne funkcije

      • "Product1" - imenik za izdelek 1

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

        • "Skupno" - imenik za lokalne funkcije za projekt 1

          • prod1 -lib.js - knjižnica lokalnih funkcij za projekt 1
          • README.md - readme za lokalne funkcije za projekt 1

      • "Product2"-imenik za izdelek 2test-script1.jstest-script2.js

        • "Skupno" - imenik za lokalne funkcije za projekt 2

          • prod2 -lib.js - knjižnica lokalnih funkcij za projekt 2
          • README.md - readme za lokalne funkcije za projekt 2

• Preskusne skripte razdelite na več datotek:

  • Tu je vzorec uporabe več datotek:

    • Sanity Check - osnovni preskusni skript za preverjanje, ali vse deluje
    • Preverjanje statičnih elementov in besedila - preverite vse elemente in besedilo
    • Preverjanje napake obrazca/strani - preverjanje napake
    • Rezultati iskanja - preizkusite dinamično vsebino

• Povratni klici VS. Obljube:

  • Različica 3 spletnega gonilnika IO podpira povratne klice in obljube.

    Obljube so najprimernejša metoda, saj zmanjšuje kodo za odpravljanje napak. Spodaj si oglejte isti primer, napisan s povratnimi klici in obljubami.

Povratni klici

// Z povratnim klicem nastavimo/preverimo ime/priimek

it ('naj nastavi/preveri ime/priimek s povratnimi klici', funkcija (končano) {driver.setValue ("#fname", "Tony", funkcija (e) {driver.getValue ("#fname", funkcija (err, e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("#lname", "Keith", funkcija (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Priimek:" + e); končano ();});});});});});

Obljube

// Z obljubami nastavite/potrdite ime/priimek

it ('naj nastavi/preveri ime/priimek z obljubami', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). then (function (e) {(e).should.be.equal ("Keith"); console.log ("Priimek:" + e);});});

7. korak: Več virov

Tu je nekaj dodatnih virov za vašo referenco:

• Razpravne skupine (Gitter)

  • IO diskusijska skupina za spletni gonilnik
  • Razpravljalna skupina Mocha

• Drugi zanimivi projekti

  • Supertest - trditve
  • Chai - trditve

8. korak: Zaključek

Nekaj časa sem raziskal tehnologije, ki bi jih uporabil za svoj projekt. Sprva sem začel s Selenium Web Driver, vendar sem prešel na uporabo IO Web Driver. Zdi se, da je IO spletnega gonilnika enostavnejši za uporabo in ga je veliko lažje razširiti (vsaj dokumentacija za razširitev - ukazi za večkratno uporabo so bili boljši).

Ko sem prvič začel preučevati tehnologije, je bilo težko najti dobre primere, ki bi se nanašali na vse, kar sem poskušal narediti. To je razlog, da sem želel te podatke in znanje deliti z vami.

Tehnologije so delovale veliko bolje, kot sem pričakoval, vendar je bila vključena krivulja učenja. Ko sem razumel, kako vse komponente delujejo skupaj, sem lahko v zelo kratkem času napisal zapletene testne skripte. Najtežje skripte so bile komponente, ki temeljijo na JavaScriptu, na primer izbirnik datumov in modalni izbirniki.

Nikoli se nisem označil za razvijalca JavaScripta niti nisem hotel biti strokovnjak za JavaScript, vendar me je uporaba teh tehnologij zagotovo spodbudila, da izpopolnim svoje znanje JS.

Upam, da je ta članek koristen, primeri pa jasni in poučni.

Sporočite mi, če imate kakršna koli vprašanja ali pripombe.

Hvala vam, Tony Keith