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

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

IO vodič za IO web upravljačkog programa 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 uvesti automatizirano testiranje u odjel za Q/A s vrlo malo tehničkog iskustva i bez znanja o programiranju.

Ovo su zaista bila dva (2) odvojena izazova. Prvi je bio identificirati tehnologije za izvođenje automatiziranog testiranja. Drugi je bio osposobljavanje Q/A odjela.

Članak će se osvrnuti samo na korištene tehnologije i ono što sam pritom naučio.

Tehnologije su dobro funkcionirale, ali stvarno 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 su sve zajedno radile.

Htio sam podijeliti ove podatke, pa sam napisao ovaj članak zajedno s radnim primjerima testnih skripti i testnom web lokacijom radi izvođenja skripti.

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

Nadam se da će vam biti od koristi. Ako to učinite, 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

Popis tehnologija koje odabirem:

• mocha - test runner - izvršava testne skripte
• shouldjs - knjižnica tvrdnji
• webdriverio - upravljačke veze preglednika (jezične veze)
• selenium - tvornica apstrakcije i rada preglednika

• 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 trebate imati instaliran samostalni poslužitelj Node JS, Web Driver IO, Mocha, Should i Selenium.

Ovdje su upute za instalaciju sustava Windows 7.

(Ja sam korisnik Mac/Linuxa, ali morao sam sve instalirati na strojeve sa sustavom Windows 7, zato sam ga uključio za vašu referencu. Postupak instalacije na Mac/Linux je sličan. Za više informacija konzultirajte se s mrežnim referencama informacija.)

Iz preglednika:

• Instalirajte čvor koji uključuje NPM (Node Package Manager)
• idite na
  • Pritisnite instaliraj
  • Spremite i pokrenite datoteku
  • Postavite put i varijablu (NODE_PATH)

  • Idite na Upravljačka ploča-> Sustav i sigurnost-> Sustav

    • Napredne postavke sistema

    • Postavka okruženja (korisničke varijable)

      • Dodaj na PATH

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

      • Dodajte NODE_PATH (sistemske varijable)

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

Napomena: Sav softver ispod sam instalirao koristeći globalnu opciju npm (-g). To 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 instalirati webdriverio -g

    Ovo će globalno instalirati upravljački program IO za web na vašem računalu

• Instalirajte "mocha" testni softver za pokretanje

  • npm instalirati mocha -g

    Ovo će instalirati mocha globalno na vaš stroj

• Instalirajte knjižnicu tvrdnji "treba"

  • npm instalirati treba -g

    Ovo će globalno instalirati “should” na vaš stroj

• Instalirajte Selenium Stand Alone Server

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

• Instalirajte preglednike i upravljačke programe preglednika za testiranje

  • Iz cmd upita:

    • Napravite direktorij "selenium"
    • C: / Korisnici {USERNAME} selenium

    • Naredbe:

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

    • Firefox

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

      • Upravljačka ploča-> Sustav i sigurnost-> Sustav

        • Napredne postavke sistema
        • Postavke okruženja
        • Dodaj (dodaj korištenje točke sa zarezom) u varijablu puta
        • C: / Program Files (x86) Mozilla Firefox
      • Za Firefox nisu potrebni posebni web upravljački programi.

    • Krom

      • 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:

      • Upravljačka ploča-> Sustav i sigurnost-> Sustav

        • Napredne postavke sistema
        • Postavke okruženja
        • Dodaj (dodaj korištenje točke sa zarezom) u varijablu puta
        • 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 knjižnice var webdriverio = require ('webdriverio'), should = require ('should'); // testni blok ili paket skripti opisuju ('Test naslova za IO web upravljačkog programa - web stranica stranice za testiranje vodiča', function () {// postavlja vremensko ograničenje na 10 sekundi this.timeout (10000); var driver = {}; // hook za pokretanje prije testiranja prije (function (done) {// učitavanje upravljačkog programa za upravljački program preglednika = webdriverio.remote ({željene mogućnosti: {naziv pretraživača: 'firefox'}}); driver.init (gotovo);}); // test spec - "specification" it ("trebao bi biti učitavanje ispravne stranice i naslova", function () {// učitavanje stranice, zatim poziv function () return driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // dobiti naslov, zatim proslijediti naslov funkciji ().getTitle (). then (function (title) {// provjeriti naslov (title).should.be.equal ("Web upravljački program IO - Tutorial Test stranica "); // ukloniti komentar za otklanjanje pogrešaka u konzoli // console.log ('Trenutni naslov stranice:' + naslov);});}); //" kuka "za pokretanje nakon svih testova u ovom bloku nakon (funkcija (gotovo) {driver.end (gotovo);});});

Opažanja:

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

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

  • Komentari zaglavlja (//)
  • Potrebne knjižnice
  • Postavi opcije (izborno)
  • Kuka: Učitajte upravljački program preglednika
  • Testni paket (opišite)
  • Testne specifikacije (može biti mnogo specifikacija u paketu)
  • Kuka: Očistite

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

  • Niz - opis programskog paketa
    • "Provjerite ispravnu riječ na stranici"
    • "Provjerite rad gumba za odabir"

  • function - blok koda za izvršavanje

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

• Testni paket sadržavat će 1 ili više testnih specifikacija (specifikacija)

• Specifikacije započinju funkcijom koja uzima dva parametra:

  • Niz - opis specifikacije testa
    • "Trebali bi biti točan tekst veze i URL veze"
    • "Treba sadržavati točan 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

  Knjižnica "trebala" pruža 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 pošaljite
    • Provjerite CSS elementa

Pogledajmo pobliže primjer s komentarima

Učitajte potrebne knjižnice: IO upravljačkog programa za web i trebao bi.

// potrebne knjižnice

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

Definirajte ispitni paket. Ovaj paket naziva se: "Test Title for Web Driver IO - Tutorial Test Page Website"

// testni blok ili paket skripti

description ('Test naslova za IO web upravljačkog programa - web stranica stranice s testnim vodičem', funkcija () {…});

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

// postavljanje vremenskog ograničenja na 10 sekundi

this.timeout (10000);

Za 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 (učinjeno) {// učitavanje upravljačkog programa za upravljački program preglednika = webdriverio.remote ({željene mogućnosti: {ime preglednika: 'firefox'}}); driver.init (gotovo);});

Definirajte specifikaciju ispitivanja.

// testna specifikacija - "specifikacija"

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

Učitajte stranicu web stranice

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

Dohvati naslov, a zatim proslijedi naslov funkciji ()

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

… });

Provjerite naslov pomoću biblioteke tvrdnji should.

(naslov).should.be.equal ("IO web upravljačkog programa - Stranica s testnim vodičem");

Kuka za napuštanje i čišćenje vozača kada završite.

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

after (funkcija (učinjeno) {driver.end (gotovo);});

Korak 3: Pokrenite testnu skriptu

Pogledajmo sada što testna skripta radi kada se pokrene.

Prvo pokrenite Selenium Stand Alone Server:

• Za Windows koristite naredbeni redak (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 snimku zaslona gore

Zatim pokrenite testnu skriptu:

• Za Windows koristite naredbeni redak (cmd):

  • moka
  • # mocha tutorial1.js

• Za Mac ili Linux otvorite terminal:

  • moka
  • $ mocha tutorial.js
• Pogledajte snimku zaslona gore

Dakle, što 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 testne skripte mogu se preuzeti s githuba.

Korak 5: Posebni primjeri

Sav kôd dostupan je na githubu: IO vodič za upravljački program web upravljača na githubu

• Provjerite vezu i tekst veze na neuređenom popisu - "linkTextURL1.js"

  • Neuređeni popis ima oznaku, a veza je četvrta stavka popisa.
  • 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 ('Veza je pronađena:' + veza); (veza).should.equal ("Kontaktirajte nas");});}); // Potvrdi URL za kontaktiranje it ('trebao bi sadržavati URL za kontakt s nama', funkcija () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (funkcija (veza) {(veza).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL pronađen:' + veza);});});

• Provjerite tekst autorskih prava - "Copyright1.js"

  • Autorska prava nalaze se 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 pridržana.");});}); // Provjera teksta o autorskim pravima pomoću xpath kao izbornika 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 pridržana.");});});

• Popuni polja obrasca i pošalji - "formFillSubmit1.js"

  • Ispunite 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
    • xpath iz obrasca-> unos
  • Također pokazuje kako očistiti polje za unos

// Postavi ime koristeći id na: Tony

it ('trebao bi ime postaviti na Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Ime:" + e);});}); // Očisti ime koristeći id it ('treba očistiti ime', function () {return driver.clearElement ("#fname").getValue ("#ime"). Then (funkcija (e) {(e).should.be.equal (""); console.log ("Ime:" + e);});}); // Postavljanje imena pomoću xpath od ulaza na: 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 izbrisati 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 obrasca 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 pomoću 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 ');});});

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

  • Tekst je u elementu show/hide. Gumb kontrolira stanje.

  • Ovaj primjer pokazuje:

    • Pritisnite gumb 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 ('trebao bi kliknuti gumb s 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 ("Ovdje ide sve dobro!");});});

• Provjerite pogreške polja obrasca - "formFieldValidation.js"

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

  • Ovaj primjer pokazuje:

    Provjerite tekstualne poruke o pogrešci i provjerite lokaciju (neuređen položaj popisa)

it ('trebao bi sadržavati 5 pogreš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 pogreška:' + e); (e).should.be.equal ('Molimo unesite prezime');}).getText ("// ul [@class = 'alert alert-hazard ']/li [3] "). then (function (e) {console.log (' Greška 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 (function (e) {console.log ('Pogreš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: Upotrijebite niz podataka JSON -a za spremanje veze i imena, a zatim ponovite

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

// Podaci o poveznici - 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 ('trebao bi sadržavati tekst/vezu pa otići na stranicu -' + d.name, function () {return driver // provjerite jeste li na početnoj stranici.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (function (title) {// provjera 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');});});});

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

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

// niz podataka - firstName i lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" 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) {// provjerite title (title).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("First Name: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName); console.log ("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 svojstva CSS -a - "cssValidation1.js"

  • Ovaj primjer pokazuje kako:

    • Potvrdite sljedeća svojstva CSS -a:

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

it ('trebao bi sadržavati ispravnu boju teksta pogreš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 ('treba sadržavati ispravan razmak u ćeliji tablice', function () {

return driver // 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 = 'popis 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 ("// 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 ('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 pogrešaka:

  • Uključite zapisivanje na razini upravljačkog programa za više otklanjanja pogrešaka i stvaranje dnevnika.

    • Postavi logLevel na 'detaljno'
    • Postavi logOutput na naziv direktorija ('logs')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {željene mogućnosti: {Ime preglednika: 'firefox'}});

• Za ispravljanje pogrešaka koristite console.log (), debug (), getText ().

  • console.log () - Koristi se za prikaz informacija za određivanje stanja.
  • debug () - Koristite pauziranje preglednika/skripte sve dok se ne pritisne enter u naredbenom retku.

  • getText () - Upotrijebite za provjeru interakcije s ispravnim elementom.

    Posebno korisno s izrazima xpath

// Kliknite na stavku 3 s popisa

it ('trebao bi kliknuti na stavku 3 s popisa', function () {// upotrijebiti getText () za provjeru ispravnosti xpath -a za upravljački program za vraćanje 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");}) // upotrijebite debug () da zaustavite radnju da vidite što se događa u pregledniku.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link kliknuta');}) // pričekajte da se pojavi google obrazac za pretraživanje.waitForVisible ("#tsf", 20000).then (function (e) {console.log ('Rezultati pretraživanja su pronađeni');});});

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

  • Upotrijebite 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 preglednik

driver = webdriverio.remote ({željene mogućnosti: {Ime preglednika: process.env. SELENIUM_BROWSER || 'krom'}});

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 mocha

• Opera 12+

  SELENIUM_BROWSER = operna moka

• Safari

  SELENIUM_BROWSER = safari mocha

Testiranje:

• Za Windows koristite git bash ljusku:

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

• Za Mac ili Linux otvorite terminal:

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

• Odzivno testiranje:

  • Odredite točke prekida na temelju projekta ili okvira (npr. Bootstrap).

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

    • RADNI STOL - 1200 px
    • TABLET - 992 px
    • MOBILNI - 768 px

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

    Vidi primjer ispod

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

// kod za višekratnu uporabu - knjižnica // isječak koda 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 == "MOBILNI") {obj.width = 768; obj.visina = 400; obj.name = bp; }

// Testna skripta

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

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

  • Web upravljački program IO lako se 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 pogrešci pri potvrdi oblika prezimena // // Unos: // broj - indeks pogreš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 funkcijskog modula.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Evo posebnih promjena potrebnih za pozivanje funkcije za višekratnu uporabu

Za potpuni radni primjer pogledajte formFieldValidation.js

// zahtijevaju naredbu za višekratnu upotrebu - CommonLib

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

• Struktura datoteke/direktorija projekta:

  • Evo tipične strukture projekta:

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

      • "Proizvod1" - imenik za proizvod 1

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

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

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

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

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

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

• Podijelite testne skripte u više datoteka:

  • Evo primjera korištenja više datoteka:

    • Sanity Check - osnovna testna skripta za provjeru radi li sve
    • Validacija statičkih elemenata i teksta - provjerite sve elemente i tekst
    • Validacija pogreške obrasca/stranice - provjera pogreške
    • Rezultati pretraživanja - testiranje dinamičkog sadržaja

• 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 obradu pogrešaka. 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/provjeriti ime/prezime pomoću povratnih poziva', funkcija (učinjeno) {driver.setValue ("#fname", "Tony", funkcija (e) {driver.getValue ("#ime", funkcija (pogreš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 pomoću 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 raspravu (Gitter)

  • IO diskusiona grupa za upravljački program weba
  • 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. Prvotno sam počeo sa Selenium Web Driver -om, ali sam prešao na IO Web Driver. Činilo se da je IO web upravljačkog programa lakši za korištenje 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 puno bolje nego što sam očekivao, međutim tu je bila i krivulja učenja. Kad sam shvatio kako sve komponente rade zajedno, mogao sam napisati komplicirane testne skripte u vrlo kratkom vremenu. Najteže skripte bile su komponente temeljene na JavaScriptu, poput alata za odabir 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 motiviralo da izoštrim 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 vam, Tony Keith