IO vodič za Upravljački program web upravljačkog programa Korištenje web stranice uživo i primjeri rada: 8 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

IO vodič za Upravljački program web upravljača pomoću web stranice uživo i primjera rada

Posljednje ažuriranje: 26.07.2015

(Često se provjeravajte dok ažuriram ove upute s više detalja i primjera)

Pozadina

Nedavno mi je predstavljen zanimljiv izazov. Morao sam da uvedem automatizovano testiranje u Q/A odeljenje sa vrlo malo tehničkog iskustva i bez iskustva u programiranju.

Ovo su zaista bila dva (2) odvojena izazova. Prvi je bio identificiranje tehnologija za izvođenje automatiziranog testiranja. Druga je bila obuka Q/A odjela.

Članak će se baviti samo korištenim tehnologijama i onim što sam naučio u tom procesu.

Tehnologije su dobro funkcionirale, ali zaista sam morao tražiti informacije i potrošio sam mnogo sati na rješavanje problema.

Bilo mi je teško pronaći informacije na internetu o tim tehnologijama koje rade zajedno.

Htio sam podijeliti ove podatke, pa sam napisao ovaj članak zajedno s radnim primjerima testnih skripti i testnom web lokacijom za pokretanje skripti.

Sve testne skripte mogu se pronaći na githubu, a radno mjesto za testiranje se nalazi na Web lokaciji IO Tutorial Test Site

Nadam se da će vam biti od koristi. Ako to učinite, molim vas obavijestite me.

CiljeviKoristite tehnologije za:

• Testirajte funkcionalnost web stranice
• Testirajte JavaScript funkcionalnost
• Može se pokrenuti ručno
• Može se pokrenuti automatski

• Lako se uči jezik za programere

  P/Osoblje s osnovnim znanjem HTML -a i JavaScript -a

• Koristite samo softver otvorenog koda

Tehnologije

Lista tehnologija koje biram:

• mocha - test runner - izvršava test skripte
• shouldjs - biblioteka tvrdnji
• webdriverio - kontrolne veze preglednika (jezičke)
• selenium - tvornica apstrakcije preglednika i pokrenuta

• Upravljački programi preglednika/mobilnih uređaja + preglednici

  • Firefox (samo preglednik)
  • Chrome (preglednik i upravljački program)
  • IE (preglednik i upravljački program)
  • Safari (dodatak za preglednik i upravljački program)

Korak 1: Instalacija softvera

Za početak morate imati instaliran samostalni server Node JS, Web Driver IO, Mocha, Should i Selenium.

Evo uputstava za instalaciju za Windows 7.

(Ja sam korisnik Mac/Linuxa, ali morao sam sve instalirati na Windows 7 strojeve, zato sam ga i uključio za vašu referencu. Postupak instaliranja na Mac/Linux je sličan. Za više informacija pogledajte internetske reference informacije.)

Iz pretraživača:

• Instalirajte čvor koji uključuje NPM (Node Package Manager)
• idite na
  • Kliknite instaliraj
  • Sačuvajte i pokrenite datoteku
  • Postavite putanju i varijablu (NODE_PATH)

  • Idite na Control Panel-> System and Security-> System

    • Napredne postavke sistema

    • Postavka okruženja (korisničke varijable)

      • Dodaj na PATH

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

      • Dodajte NODE_PATH (sistemske varijable)

        C: / Korisnici {USERNAME} AppData / Roaming / npm / node_moduli

Napomena: Sav softver ispod sam instalirao koristeći globalnu opciju npm (-g). Ovo se obično ne preporučuje, ali za ovu instalaciju morao sam instalirati globalno jer će se koristiti u više projekata.

Otvorite naredbeni redak (cmd):

(lokalni korisnički administrator)

• Instalirajte selen "web upravljački program IO"

  • npm install webdriverio -g

    Ovo će globalno instalirati mrežni upravljački program IO na vašu mašinu

• Instalirajte softver za pokretanje „mocha“

  • npm install mocha -g

    Ovo će globalno instalirati mocha na vašu mašinu

• Instalirajte biblioteku tvrdnji "trebao"

  • npm install bi -g

    Ovo će globalno instalirati “should” na vašu mašinu

• Instalirajte Selenium Stand Alone Server

  • Idite na
  • Preuzmite jar datoteku i premjestite se u direktorij “selenium”.

• Instalirajte pregledače i upravljačke programe pregledača za testiranje

  • Iz cmd upita:

    • Kreirajte “selenium” direktorij
    • C: / Korisnici {USERNAME} selenium

    • Naredbe:

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

    • Firefox

      • Instalirajte firefox preglednik, ako već nije instaliran.
      • Putanja mora biti postavljena za pokretanje Firefoxa iz naredbenog retka (cmd).

      • Kontrolna tabla-> Sistem i sigurnost-> Sistem

        • Napredne postavke sistema
        • Postavke okruženja
        • Dodati (dodati tačku sa zarezom) varijabli putanje
        • C: / Program Files (x86) Mozilla Firefox
      • Za Firefox nisu potrebni posebni web upravljački programi.

    • Chrome

      • Instalirajte Chromeov preglednik, ako već nije instaliran.
      • MOGUĆE je postaviti put za pokretanje Chromea iz naredbenog retka (cmd).
      • Prvo testirajte: chrome.exe iz naredbenog retka (cmd)
      • Ako se krom ne pokrene:

      • Kontrolna tabla-> Sistem i sigurnost-> Sistem

        • Napredne postavke sistema
        • Postavke okruženja
        • Dodati (dodati tačku sa zarezom) varijabli putanje
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Za Chrome je potreban poseban web upravljački program.

        Idite na chromium.org i raspakirajte 32 -bitni upravljački program u direktorij “selenium”

    • Internet Explorer (samo za Windows - neće raditi na drugim platformama)

      • Za IE je potreban poseban web upravljački program.

        • Idite na
        • Preuzmite i raspakirajte 64 -bitni upravljački program u direktorij “selenium”.

Korak 2: Osnovna testna skripta

Počnimo s nekim osnovama.

Evo jednostavne mocha skripte koja će otvoriti web stranicu i provjeriti naslov.

// tutorial1.js

// // Ovo je jednostavna testna skripta za otvaranje web stranice i // provjeru naslova. // potrebne biblioteke var webdriverio = require ('webdriverio'), should = require ('should'); // testni blok skripte ili paket opisuju ('Title Test for Web Driver IO - Website Tutorial Test Page', function () {// postavlja vremensko ograničenje na 10 sekundi this.timeout (10000); var driver = {}; // hook za pokretanje prije testiranja prije (function (done) {// učitajte upravljački program za upravljački program preglednika = webdriverio.remote ({željene mogućnosti: {ime pretraživača: 'firefox'}}); driver.init (gotovo);}); // testna specifikacija - "specifikacija" to ("treba učitati ispravnu stranicu i naslov", function () {// učitati stranicu, zatim pozvati function () vratiti upravljački program.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // dobije naslov, zatim proslijedi naslov funkciji ().getTitle (). zatim (funkcija (naslov) {// provjeri naslov (naslov). "); // ukloniti komentar za otklanjanje grešaka u konzoli // console.log ('Trenutni naslov stranice:' + naslov);});}); //" kuka "za pokretanje nakon svih testova u ovom bloku nakon (funkcija (gotovo) {driver.end (gotovo);});});

Zapažanja:

• Prvo biste trebali primijetiti da je testna skripta napisana u JAVASCRIPT -u (završava se sa.js ekstenzijom).

• Osnovna struktura je gotovo identična za sve test skripte.

  • Zaglavlje Komentari (//)
  • Obavezne biblioteke
  • Postavite opcije (opcionalno)
  • Kuka: Učitajte upravljački program preglednika
  • Testni paket (opišite)
  • Testne specifikacije (može biti mnogo specifikacija u paketu)
  • Udica: Očistite

• Ispitni paket počinje funkcijom opisa koja uzima dva parametra:

  • Niz - opis programskog paketa
    • "Provjerite ispravnu verbizaciju na stranici"
    • "Provjerite rad dugmadi za odabir"

  • function - blok koda za izvršavanje

    description (‘Opis programskog paketa’, function () {});

• Paket za testiranje sadržavat će 1 ili više specifikacija (specifikacija)

• Specifikacije počinju s funkcijom koja uzima dva parametra:

  • Niz - opis specifikacije testa
    • "Trebali bi biti ispravan tekst veze i URL veze"
    • "Trebao bi sadržavati ispravan glagol (kopija)
  • function - blok koda za izvršavanje
  • it (‘Opis specifikacije testa’, funkcija () {});
• Specifikacija sadrži jedno ili više očekivanja koja testiraju stanje koda
• To se naziva tvrdnjama

  Biblioteka “trebao bi” dati tvrdnje

• U gotovo svim slučajevima morat ćete locirati jedan ili više elemenata pomoću birača, a zatim izvršiti neke operacije na elementima

  • Primjeri:

    • Pronađite tekst na stranici i provjerite tekst
    • Popunite obrazac i podnesite
    • Provjerite CSS elementa

Pogledajmo pobliže primjer s komentarima

Učitajte potrebne biblioteke: IO upravljačkog programa za web i trebao bi.

// potrebne biblioteke

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

Definirajte testni paket. Ovaj paket se zove: "Test naslova za IO upravljačkog programa weba - web stranica stranice za testiranje vodiča"

// testni blok skripte ili paket

opišite ('Test naslova za IO upravljačkog programa weba - Web stranica stranice za testiranje vodiča', funkcija () {…});

Podesite vremensko ograničenje na 10 sekundi kako skripta ne bi istekla pri učitavanju stranice.

// postavlja vremensko ograničenje na 10 sekundi

this.timeout (10000);

Zakačite učitavanje upravljačkog programa preglednika prije pokretanja specifikacija "specs". U ovom primjeru učitava se upravljački program Firefox.

// kuka za pokretanje prije testiranja

before (funkcija (završeno) {// učitavanje upravljačkog programa za upravljački program preglednika = webdriverio.remote ({željene mogućnosti: {ime pretraživača: 'firefox'}}); driver.init (gotovo);});

Definirajte specifikaciju testa.

// test specifikacija - "specifikacija"

it ('treba učitati ispravnu stranicu i naslov', funkcija () {…});

Učitajte stranicu web stranice

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

Dobijte naslov, a zatim proslijedite naslov funkciji ()

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

… });

Provjerite naslov pomoću biblioteke tvrdnji should.

(naslov).should.be.equal ("Upravljački program web upravljača - stranica vodiča za testiranje");

Zakačite da zatvorite i očistite upravljački program kada završite.

// "kuka" za pokretanje nakon svih testova u ovom bloku

after (funkcija (gotovo) {driver.end (gotovo);});

Korak 3: Pokrenite testnu skriptu

Sada da vidimo šta test skripta radi kada se pokrene.

Prvo pokrenite Selenium Stand Alone Server:

• Za Windows koristite naredbenu liniju (cmd):

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

• Za Mac ili Linux otvorite terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Pogledajte snimak ekrana iznad

Zatim pokrenite testnu skriptu:

• Za Windows koristite naredbenu liniju (cmd):

  • mocha
  • # mocha tutorial1.js

• Za Mac ili Linux otvorite terminal:

  • mocha
  • $ mocha tutorial.js
• Pogledajte snimak ekrana iznad

Pa šta se dogodilo?

Mocha poziva skriptu "tutorial1.js". Upravljački program je pokrenuo preglednik (Firefox), učitao stranicu i provjerio naslov.

Korak 4: Primjer web stranice

Svi primjeri su pokrenuti protiv ove web stranice.

Primjer web stranice nalazi se na: Stranica za testiranje vodiča IO vodiča za IO

Sve test skripte mogu se preuzeti sa github -a.

Korak 5: Posebni primjeri

Sav kôd dostupan je na githubu: IO vodič za upravljačke programe za web upravljače na githubu

• Provjerite vezu i tekst veze na neuređenoj listi - "linkTextURL1.js"

  • Neuređena lista ima oznaku i veza je četvrta stavka liste.
  • URL bi trebao biti "https://tlkeith.com/contact.html"

// Provjerite tekst veze Kontaktirajte nas

it ('trebao bi sadržavati tekst veze Kontaktirajte nas', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Link found:' + link); (link).should.equal ("Kontaktirajte nas");});}); // Potvrdi URL za kontaktiranje it ('treba sadržavati URL za kontakt', funkcija () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (funkcija (veza) {(veza).should.equal ("https://tlkeith.com/contact.html"); console.log ('Pronađen URL:' + veza);});});

• Provjerite tekst o autorskim pravima - "Copyright1.js"

  • Autorska prava se nalaze u podnožju. Ovaj primjer prikazuje 2 različita načina lociranja teksta autorskih prava:

    • pomoću izbornika kao izbornika elemenata
    • pomoću xpath kao birača elemenata

// Provjera autorskog teksta pomoću id -a kao birača elemenata

it ('trebao bi sadržavati tekst o autorskim pravima', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. jednako ("Tony Keith - tlkeith.com @ 2015 - Sva prava zadržana.");});}); // Provjera autorskog teksta pomoću xpath -a kao selektora elemenata ('trebao bi sadržavati tekst autorskih prava', function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Autorsko pravo pronađeno:' + veza); (veza).should.equal ("Tony Keith - tlkeith.com @ 2015 - Sva prava zadržana.");});});

• Popunite polja obrasca i pošaljite - "formFillSubmit1.js"

  • Unesite ime, prezime i pošaljite, a zatim pričekajte rezultate.

  • Ovaj primjer prikazuje 3 načina popunjavanja polja za unos imena:

    • po id
    • xpath od ulaza
    • by xpath from form-> input
  • Također pokazuje kako očistiti polje za unos

// Postavljanje imena pomoću id -a na: Tony

it ('treba postaviti prvo ime na Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Ime:" + e);});}); // Obriši ime koristeći id it ('treba očistiti ime', function () {vrati driver.clearElement ("#fname").getValue ("#ime"). Then (function (e) {(e).should.be.equal (""); console.log ("Ime:" + e);});}); // Postavi ime koristeći xpath od ulaza do: Tony it ('treba postaviti ime 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);});}); // Izbrišite prvo ime pomoću xpath iz unosa it ('treba očistiti ime', function () {return driver.clearElement ("// ulaz [@name = 'fname']")).getValue ("// ulaz [@name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First Name: " + e);});}); // Postavljanje imena pomoću xpath iz forme na: Tony it ('treba postaviti ime 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);});}); // Postavi prezime koristeći id na: Keith it ('treba postaviti prezime na Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Zatim (funkcija (e) {(e).should.be.equal ("Keith"); console.log ("Prezime:" + e);});}); // Pošaljite obrazac i pričekajte rezultate pretraživanja ('treba poslati obrazac i čekati rezultate', function () {return driver.submitForm ("#search-form"). Then (function (e) {console.log (' Pošaljite obrazac za pretraživanje ');}).waitForVisible ("#rezultata pretraživanja", 10000).then (funkcija (e) {console.log (' Rezultati pretraživanja su pronađeni ');});});

• Kliknite gumb Prikaži/sakrij i potvrdite tekst - "showHideVerify1.js"

  • Tekst je u elementu show/hide. Dugme kontroliše stanje.

  • Ovaj primjer pokazuje:

    • Pritisnite dugme za proširenje
    • Pričekajte da element bude vidljiv (proširen)
    • Provjerite tekst (kopija)

// kliknite gumb "Više informacija" i provjerite tekst u proširenom elementu

it ('treba kliknuti na dugme više informacija i provjeriti tekst', 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 ("Sve dobro ide ovamo!");});});

• Potvrdite greške u polju obrasca - "formFieldValidation.js"

  • Upotrijebite testne skripte za provjeru ispravnosti poruka o grešci.

  • Ovaj primjer pokazuje:

    Provjerite tekstualne poruke o grešci i provjerite lokaciju (neuređena pozicija liste)

it ('treba sadržavati 5 grešaka: first/last/address/city/state', function () {

return driver.getText ("// ul [@class = 'alert alert-hazard']/li [1]"). then (function (e) {console.log ('Greška pronađena:' + e); (e).should.be.equal ('Molimo unesite ime');}).getText ("// ul [@class = 'alert alert-hazard']/li [2]"). then (function (e) {console.log ('Pronađena je greška:' + e); (e).should.be.equal ('Molimo unesite prezime');}).getText ("// ul [@class = 'alert alert-hazard ']/li [3] "). zatim (funkcija (e) {console.log (' Greška je pronađena: ' + e); (e).should.be.equal (' Molimo unesite adresu ');}). getText ("// ul [@class = 'alert alert-hazard']/li [4]"). then (function (e) {console.log ('Greška pronađena:' + e); (e).should.be.equal ('Molimo unesite grad');}).getText ("// ul [@class = 'alert alert-hazard']/li [5]"). then (funkcija (e) {console.log ('Greška je pronađena:' + e); (e).should.be.equal ('Molimo unesite stanje');}); });

• Ponavljanje podataka za provjeru URL veze/teksta/stranice - "LoopDataExample1.js"

  • Ovaj primjer pokazuje: Koristite niz JSON podataka za spremanje veze i imena, a zatim ponovite

    • Provjerite svaki tekst URL -a i vezu
    • Kliknite vezu i učitajte stranicu

// Podaci o vezi - veza i tekst

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 "}]; … // petlja kroz svaki linkArray linkArray.forEach (function (d) {it ('treba sadržavati tekst/vezu, zatim idi na stranicu -' + d.name, function () {vrati upravljački program // provjerite jeste li na početnoj stranici.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// verifikacija naslova (title).should.be.equal ("Web upravljački program IO - Tutorial Test Page ");}) // pronađite URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL je pronađen:' + d.link);}) // idite na URL stranicu i provjerite da li postoji.click ('a =' + d.name).waitForVisible ("#js-repo-pjax- spremnik ", 10000).then (function () {console.log ('Stranica Github je pronađena');});});});

• Petlja statičkih podataka za popunjavanje polja obrasca - "loopDataExample2.js"

  • Ovaj primjer pokazuje: Koristite niz JSON podataka za spremanje imena/prezimena
    • Ponovite podatke da popunite polja obrasca, a zatim pošaljite obrazac
    • Sačekajte stranicu sa rezultatima
    • Provjerite ime / prezime na stranici s rezultatima

// niz podataka - prvo ime i prezime podataka ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // petlja kroz svaki dataArray dataArray.forEach (function (d) {it ('treba popuniti polja, sumbit stranicu', function () {return driver // provjerite jeste li na početnoj stranici.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verifikacija naslova (title).should.be.equal ("Web upravljački program IO - Tutorial Test stranica");}).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 ("Prezime:" + e);}).submitForm ("#obrazac za pretraživanje"). then (function () {console.log ('Pošalji obrazac za pretraživanje');}).waitForVisible ("#search-results", 10000).then (function () {console.log ('Stranica rezultata je pronađena');}).getText ("// h1"). then (function (link) {console.log ('Tekst je pronađen:' + veza); (veza).should.equal ("Dobrodošli" + d.prvo ime + "" + d.lastName + ".");});});});

• Provjerite CSS svojstva - "cssValidation1.js"

  • Ovaj primjer pokazuje kako:

    • Potvrdite sljedeća svojstva CSS -a:

      • boja
      • padding (gore, dolje, desno, lijevo)
      • boja pozadine

it ('treba sadržavati ispravnu boju teksta greške', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-hazard']/li [1]", "color"). then (function (result) {console.log ('Boja pronađena:' + result.parsed.hex + "ili" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('trebao bi sadržavati ispravan razmak u ćeliji tablice', function () {

vrati upravljački program // padding: gore desno dolje lijevo.getCssProperty ("// tablica [@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 ("// tablica [@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 ("// tablica [@id = 'spisak datoteka']/thead/tr [1]/td [1]", "padding- desno "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// tablica [@id = 'spisak datoteka']/thead/tr [1]/td [1]", "padding-left"). zatim (funkcija (rezultat) {console.log ('padding-left found: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

it ('treba sadržavati ispravnu boju pozadine u zaglavlju tablice', function () {

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

Korak 6: Savjeti i trikovi

• Otklanjanje grešaka:

  • Uključite evidentiranje na nivou upravljačkog programa za više otklanjanja grešaka i stvaranje dnevnika.

    • Postavite logLevel na 'detaljno'
    • Postavite logOutput na ime direktorija ('logs')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {željene mogućnosti: {ime pretraživača: 'firefox'}});

• Za otklanjanje grešaka koristite console.log (), debug (), getText ().

  • console.log () - Koristi se za prikaz informacija za određivanje stanja.
  • debug () - Koristite pauziranje pretraživača/skripte sve dok se ne pritisne enter u komandnoj liniji.

  • getText () - Koristite za potvrdu da li komunicirate sa ispravnim elementom.

    Posebno korisno s izrazima xpath

// Kliknite na stavku 3 sa liste

it ('trebao bi kliknuti na stavku 3 sa liste', function () {// koristiti getText () za provjeru da li je xpath ispravna za upravljački program za povratak elementa.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Zatim (funkcija (veza) {// koristite console.log () za izlaz informacija console.log ('Veza je pronađena:' + veza); (veza).should.equal ("Stavka 3");}) // koristite debug () da zaustavite radnju da vidite šta se dešava na pretraživaču.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Veza je kliknuta');}) // sačekajte da se pojavi google obrazac za pretraživanje.waitForVisible ("#tsf", 20000).then (function (e) {console.log ('Rezultati pretraživanja su pronađeni');});});

• Koristite varijablu okruženja za dinamičku promjenu preglednika:

  • Koristite varijablu okruženja SELENIUM_BROWSER za pozivanje drugog preglednika bez mijenjanja testne skripte svaki put.
  • Za podršku je potrebna mala promjena kodiranja.

Promjene koda:

// učitavanje upravljačkog programa za pretraživač

driver = webdriverio.remote ({željene mogućnosti: {Ime pretraživača: process.env. SELENIUM_BROWSER || 'chrome'}});

Podržani preglednici:

• Internet Explorer - IE 8+ (samo Windows)

  SELENIUM_BROWSER = tj. Mocha

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = kromirana moka

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Testiranje:

• Za Windows koristite git bash ljusku:

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

• Za Mac ili Linux otvorite terminal:

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

• Odzivno testiranje:

  • Odredite tačke prekida na osnovu projekta ili okvira (npr. Bootstrap).

  • Definirajte varijable okruženja za svaku točku prekida:

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

  • Razvijte naredbu za višekratnu upotrebu za čitanje varijable okruženja i postavljanje veličine preglednika.

    Pogledajte primjer ispod

  • Pozovite naredbu za višekratnu upotrebu u testnoj skripti.

// kod za višekratnu upotrebu - biblioteka // isječak koda if (bp == "DESKTOP") {obj.width = 1200; obj.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; obj.height = 400; obj.name = bp; }

// Test skripta

before (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // podesimo veličinu prozora ('should set window window', function (done) {// samo je širina bitna driver.setWindowSize (winsize.width, winsize.height, function () {}). call (gotovo);});

• Naredbe za višekratnu upotrebu (prilagođene naredbe):

  • Web Driver IO se lako proširuje.
  • Volim stavljati sve naredbe za višekratnu upotrebu u biblioteku. (možda je ovo stara škola, ali radi!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Opis: // Provjerava poruku o grešci pri provjeri valjanosti prezimena // // Unos: // broj - indeks greške (1-5) // Izlaz: // nema // var verifyLastNameCheckError = function () { var idx = argumenti [0], povratni poziv = argumenti [argumenti.length - 1]; this.getText ("// ul [@class = 'alert alert-hazard']/li [" + idx + "]", function (err, e) {console.log ('Greška pronađena:' + e); (e).should.be.equal ('Molimo unesite prezime');}).call (povratni poziv); }; // izvoz funkcije module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Evo specifičnih promjena potrebnih za pozivanje funkcije za višekratnu upotrebu

Za potpuni radni primjer pogledajte formFieldValidation.js

// zahtijeva naredbu za višekratnu upotrebu - CommonLib

common = require ('./ Common/CommonLib'); … // veže naredbe driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', zajednički.verifyLastNameCheckError.bind (driver)); it ('trebao bi sadržavati 2 greške: ime/prezime', function () {// pozvati upravljački program funkcije za višekratnu upotrebu.verifyFirstNameError (1);.verifyLastNameError (2);});

• Struktura projektne datoteke/direktorija:

  • Evo tipične strukture projekta:

    • "Project" - glavni direktorij projekta
      • README.md - readme za globalni projekat
      • "Common" - direktorij za globalne funkcije zajedničke svim projektima
        • common -lib.js - globalna biblioteka funkcija
        • README.md - readme za globalne funkcije

      • "Proizvod1" - direktorij za proizvod 1

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

        • "Common" - direktorij za lokalne funkcije za projekt 1

          • prod1 -lib.js - lokalna biblioteka funkcija za projekt 1
          • README.md - readme za lokalne funkcije u projektu 1

      • "Product2"-direktorij za proizvod 2test-script1.jstest-script2.js

        • "Common" - direktorij za lokalne funkcije za projekt 2

          • prod2 -lib.js - lokalna biblioteka funkcija za projekt 2
          • README.md - readme za lokalne funkcije u projektu 2

• Razbijte testne skripte u više datoteka:

  • Evo primjera korištenja više datoteka:

    • Sanity Check - osnovna testna skripta za provjeru da li sve radi
    • Validacija statičkih elemenata i teksta - provjerite sve elemente i tekst
    • Validacija greške obrasca/stranice - potvrda greške
    • Rezultati pretraživanja - testirajte dinamički sadržaj

• Povratni pozivi VS. Obećanja:

  • Verzija 3 Web upravljačkog programa IO podržava povratne pozive i obećanja.

    Obećanja su preferirana metoda jer smanjuje kôd za rukovanje greškama. U nastavku pogledajte isti primjer napisan uz povratne pozive i obećanja.

Povratni pozivi

// Postavljanje/provjera imena/prezimena pomoću Povratnog poziva

it ('treba postaviti/potvrditi ime/prezime pomoću povratnih poziva', funkcija (gotovo) {driver.setValue ("#fname", "Tony", funkcija (e) {driver.getValue ("#ime", funkcija (greška, e) {(e).should.be.equal ("Tony"); console.log ("Ime:" + e); driver.setValue ("#lname", "Keith", funkcija (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Prezime:" + e); done ();});});});});});

Obećanja

// Postavljanje/provjera imena/prezimena pomoću Obećanja

it ('treba postaviti/potvrditi ime/prezime koristeći Promises', 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 ("Prezime:" + e);});});

Korak 7: Više resursa

Evo nekoliko dodatnih izvora za vašu referencu:

• Grupe za diskusiju (Gitter)

  • IO diskusiona grupa za upravljački program za web
  • Mocha diskusiona grupa

• Ostali zanimljivi projekti

  • Supertest - HTTP tvrdnje
  • Chai - tvrdnje

Korak 8: Zaključak

Proveo sam neko vrijeme istražujući tehnologije koje ću koristiti za svoj projekt. Prvobitno sam počeo sa Selenium Web Driver -om, ali sam prešao na IO Web Driver. Činilo se da je IO Web Driver IO lakši za upotrebu i mnogo lakši za proširenje (barem je dokumentacija za proširenje - naredbe za višekratnu upotrebu bile bolje).

Kad sam tek počeo proučavati tehnologije, bilo je teško pronaći dobre primjere koji su u odnosu na sve što sam pokušavao učiniti. To je razlog zašto sam htio podijeliti ove informacije i znanje s vama.

Tehnologije su radile mnogo bolje nego što sam očekivao, međutim bila je uključena i krivulja učenja. Kad sam shvatio kako sve komponente rade zajedno, mogao sam napisati komplikovane testne skripte u vrlo kratkom vremenu. Najteže skripte bile su komponente zasnovane na JavaScriptu, poput birača datuma i modalnih birača.

Nikada se nisam označio kao JavaScript programer niti sam želio biti stručnjak za JavaScript, ali korištenje ovih tehnologija definitivno me je motiviralo da usavršim svoje JS vještine.

Nadam se da je ovaj članak koristan, a primjeri jasni i informativni.

Javite mi ako imate bilo kakvih pitanja ili komentara.

Hvala ti, Tony Keith