Veebidraiveri IO õpetus reaalajas veebisaidi kasutamine ja töönäited: 8 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Veebidraiveri IO õpetus reaalajas veebisaidi ja töötavate näidete abil

Viimane värskendus: 26.07.2015

(Tulge sageli tagasi, kui värskendan seda juhendit üksikasjalikuma teabe ja näidetega)

Taust

Hiljuti esitati mulle huvitav väljakutse. Mul oli vaja tutvustada automaatset testimist Q/A osakonnale, kellel oli väga vähe tehnilist kogemust ja programmeerimise taust.

See oli tõesti kaks (2) eraldi väljakutset. Esimene neist oli tuvastada automaatse testimise tehnoloogiad. Teine oli koolitada Q/A osakonda.

Artiklis käsitletakse ainult kasutatud tehnoloogiaid ja seda, mida ma selle käigus õppisin.

Tehnoloogiad töötasid hästi, kuid pidin tõesti teavet otsima ja veetsin mitu tundi probleemide väljaselgitamiseks.

Mul oli raske leida Internetist teavet nende tehnoloogiate kohta, mis kõik koos töötasid.

Tahtsin seda teavet jagada, seega kirjutasin selle artikli koos töötavate näidiskriptidega ja testveebisaidiga, mille vastu skripte käivitada.

Kõik testiskriptid leiate saidilt github ja töötav testimiskoht asub veebidraiveri IO juhendaja testisaidil

Loodan, et leiate sellest kasu. Kui soovite, andke palun sellest teada.

Kasutage tehnoloogiaid, et:

• Kontrollige veebisaidi funktsionaalsust
• Testige JavaScripti funktsionaalsust
• Saab käivitada käsitsi
• Saab käivitada automaatselt

• Lihtne õppida keelt programmeerijatele

  Q/A personal, kellel on elementaarsed teadmised HTML -ist ja JavaScriptist

• Kasutage ainult avatud lähtekoodiga tarkvara

Tehnoloogiad

Minu valitud tehnoloogiate loend:

• mocha - testjooksja - täidab testiskripte
• shouldjs - väitekogu
• webdriverio - brauseri juhtköited (keeleköited)
• selenium - brauseri abstraktsioon ja töötav tehas

• Brauseri/mobiili draiverid + brauserid

  • Firefox (ainult brauser)
  • Chrome (brauser ja draiver)
  • IE (brauser ja draiver)
  • Safari (brauseri ja draiveri pistikprogramm)

Samm: tarkvara installimine

Alustamiseks peab teil olema installitud eraldiseisev server Node JS, veebidraiver IO, Mocha, Should ja Selenium.

Siin on Windows 7 installimisjuhised.

(Olen Maci/Linuxi kasutaja, kuid pidin kõik installima Windows 7 masinatesse, seetõttu lisasin selle teie jaoks viitamiseks. Macile/Linuxile installimise protseduur on sarnane. Lisateabe saamiseks vaadake veebiviiteid. teave.)

Brauserist:

• Installige sõlm, mis sisaldab NPM -i (Node Package Manager)

• minge aadressile

  • Klõpsake installil
  • Salvestage ja käivitage fail
  • Tee ja muutuja määramine (NODE_PATH)

  • Avage Juhtpaneel-> Süsteem ja turvalisus-> Süsteem

    • Täpsemad süsteemiseaded

    • Keskkonna seadistus (kasutaja muutujad)

      • Lisa PATH -i

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

      • Lisage NODE_PATH (süsteemimuutujad)

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

Märkus: installisin kogu tarkvara allpool, kasutades npm globaalset valikut (-g). See pole tavaliselt soovitatav, kuid selle installimise jaoks pidin installima ülemaailmselt, kuna seda kasutatakse mitmes projektis.

Ava käsuviip (cmd):

(kohalik kasutaja administraator)

• Installige seleen "veebidraiver IO"

  • npm installige webdriverio -g

    See installib teie arvutisse globaalselt veebidraiveri IO

• Installige testjooksja tarkvara „mocha”

  • npm install mocha -g

    See installib teie masinasse globaalselt mocha

• Installige kinnituste kogu „peaks”

  • npm install peaks -g

    See installib teie arvutisse globaalselt „peaks”

• Installige Selenium Stand Alone Server

  • Minge aadressile
  • Laadige jar -fail alla ja liikuge kataloogi “selenium”.

• Installige testimiseks brauserid ja draiverid

  • Cmd -viipast:

    • Looge kataloog "seleen"
    • C: / Users {USERNAME} selenium

    • Käsud:

      • cd C: / Kasutajad {USERNAME}
      • mkdir seleen

    • Firefox

      • Installige Firefoxi brauser, kui see pole juba installitud.
      • Firefoxi käivitamiseks käsurealt (cmd) tuleb määrata tee.

      • Juhtpaneel-> Süsteem ja turvalisus-> Süsteem

        • Täpsemad süsteemiseaded
        • Keskkonna seaded
        • Lisage muutujale (lisage poolkool)
        • C: / Program Files (x86) Mozilla Firefox
      • Firefoxi jaoks pole vaja spetsiaalset veebidraiverit.

    • Chrome

      • Installige Chrome'i brauser, kui see pole juba installitud.
      • Tee VÕIB olla määratud käivitama Chrome'i käsurealt (cmd).
      • Esmalt testige: chrome.exe käsurealt (cmd)
      • Kui Chrome ei käivitu, tehke järgmist.

      • Juhtpaneel-> Süsteem ja turvalisus-> Süsteem

        • Täpsemad süsteemiseaded
        • Keskkonna seaded
        • Lisage muutujale (lisage poolkool)
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome'i jaoks on vaja spetsiaalset veebidraiverit.

        Minge saidile chromium.org ja pakkige 32 -bitine draiver pakendisse “selenium”

    • Internet Explorer (ainult Windowsi jaoks - ei tööta teistel platvormidel)

      • IE jaoks on vaja spetsiaalset veebidraiverit.

        • Minge aadressile
        • Laadige 64 -bitine draiver alla ja pakkige see kataloogi “selenium” lahti.

2. samm: põhiline testiskript

Alustame mõnest põhitõest.

Siin on lihtne mocha -skript, mis avab veebisaidi ja kontrollib pealkirja.

// õpetus1.js

// // See on lihtne testiskript veebisaidi avamiseks ja pealkirja kinnitamiseks. // nõutavad teegid var webdriverio = nõuda ('webdriverio'), peaks = nõudma ('peaks'); // testskripti plokk või komplekt kirjeldus ('Veebidraiveri pealkirja test IO - juhendaja testlehe veebisait', function () {// määrake aeg 10 sekundiks this.timeout (10000); var driver = {}; // konks enne testide käivitamist (funktsioon (valmis) {// draiveri laadimine brauseri draiverile = webdriverio.remote ({soovitud võimalused: {brauseriNimi: 'firefox'}}); driver.init (tehtud);}); // test spec - "spetsifikatsioon" it ('peaks laadima õige lehe ja pealkirja', function () {// laadima lehe, seejärel helistama funktsiooni () tagastama draiveri.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // hangi pealkiri, seejärel edasta pealkiri funktsioonile ().getTitle (). seejärel (funktsioon (pealkiri) {// kontrolli pealkirja (pealkiri).should.be.equal ("Veebidraiveri IO - õpetuse testleht "); // uncomment for console debug // console.log ('Praegune lehe pealkiri:' + pealkiri];});}); // //" konks ", mis käivitatakse pärast kõiki selle ploki teste pärast (funktsioon (tehtud (tehtud) {driver.end (valmis);});});

Tähelepanekud:

• Kõigepealt peaksite tähele panema, et testiskript on kirjutatud JAVASCRIPTis (lõpeb laiendiga.js).

• Põhistruktuur on kõigi testskriptide puhul peaaegu identne.

  • Päise kommentaarid (//)
  • Nõutavad raamatukogud
  • Määra valikud (valikuline)
  • Konks: laadige brauseri draiver
  • Test Suite (kirjeldage)
  • Testi spetsifikatsioonid (sviidis võib olla palju spetsifikatsioone)
  • Konks: puhastage

• Testikomplekt algab kirjeldusfunktsiooniga, millel on kaks parameetrit:

  • String - testkomplekti kirjeldus

    • "Kontrollige lehte õige sõnastuse osas"
    • „Raadionupu toimimise kontrollimine”

  • funktsioon - käivitatav koodiplokk

    kirjeldada (‘Test suite kirjeldus’, function () {});

• Testikomplekt sisaldab ühte või enamat testispetsifikatsiooni (spetsifikatsioon)

• Spetsifikatsioonid algavad funktsiooniga, millel on kaks parameetrit:

  • String - testi spetsifikatsiooni kirjeldus

    • "Peaks olema õige lingi tekst ja lingi URL"
    • „Peaks sisaldama õiget sõnastust (koopiapakk)
  • funktsioon - käivitatav koodiplokk
  • it (‘Testi spetsifikatsiooni kirjeldus’, funktsioon () {});
• Spetsifikatsioon sisaldab ühte või mitut ootust, mis testivad koodi olekut

• Neid nimetatakse väideteks

  Raamatukogu "peaks" pakub väiteid

• Peaaegu kõigil juhtudel peate valija abil leidma ühe või mitu elementi ja seejärel tegema elemendi (de) ga teatud toiminguid

  • Näited:

    • Leidke lehelt tekst ja kontrollige seda
    • Täitke vorm ja esitage
    • Kontrollige elemendi CSS -i

Vaatame näidet koos kommentaaridega lähemalt

Laadige vajalikud teegid: veebidraiveri IO ja peaks.

// nõutavad teegid

var webdriverio = nõuda ('webdriverio'), peaks = nõudma ('peaks');

Määrake testikomplekt. Selle komplekti nimi on: "Veebidraiveri IO tiitlitest - juhendaja testlehe veebisait"

// testskripti plokk või komplekt

kirjeldada ('Veebidraiveri pealkirja test IO - juhendaja testlehe veebisait', funktsioon () {…});

Seadke ajalõpp 10 sekundile, et skript ei laadiks lehe laadimisel ajalõpu.

// määrake aeg 10 sekundiks

this.timeout (10000);

Konks brauseri draiveri laadimiseks enne spetsifikatsioonide "spetsifikatsioonide" käivitamist. Selles näites laaditakse Firefoxi draiver.

// konks enne katseid jooksma

before (function (done) {// draiveri laadimine brauseri draiverile = webdriverio.remote ({soovitud võimalused: {brauseri_nimi: 'firefox'}}); driver.init (tehtud);});

Määratlege testi spetsifikatsioon.

// test spec - "spetsifikatsioon"

it ('peaks laadima õige lehe ja pealkirja', function () {…});

Laadige veebisaidi leht

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

Hankige pealkiri, seejärel edastage pealkiri funktsioonile ()

.getTitle (). seejärel (funktsioon (pealkiri) {

… });

Kontrollige pealkirja, kasutades väite teeki peaks.

(title).should.be.equal ("Veebidraiveri IO - õpetuse testleht");

Konks, et lõpetada ja draiver puhastada, kui olete lõpetanud.

// "konks", mis töötab pärast kõiki selle ploki katseid

pärast (funktsioon (tehtud) {driver.end (tehtud);});

Samm: käivitage testskript

Nüüd vaatame, mida testskript teeb, kui see käivitatakse.

Esmalt käivitage Selenium Stand Alone Server:

• Windowsi jaoks kasutage käsurida (cmd):

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

• Maci või Linuxi puhul avage terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Vaadake ülaltoodud ekraanipilti

Järgmisena käivitage testskript:

• Windowsi jaoks kasutage käsurida (cmd):

  • mokka
  • # mocha tutorial1.js

• Maci või Linuxi puhul avage terminal:

  • mokka
  • $ mocha tutorial.js
• Vaadake ülaltoodud ekraanipilti

Mis juhtus?

Mocha kutsub välja skripti "tutorial1.js". Draiver käivitas brauseri (Firefox), laadis lehe ja kinnitas pealkirja.

Samm 4: veebisaidi näide

Kõik näited on selle saidi vastu.

Näidisveebisait asub aadressil: Web Driver IO Tutorial Test Page

Kõik testiskriptid saab alla laadida saidilt github.

5. samm: konkreetsed näited

Kogu kood on saadaval githubis: veebidraiveri IO õpetus githubis

• Lingi ja lingi teksti kinnitamine tellimata loendis - "linkTextURL1.js"

  • Korrastamata loendis on ja link on neljas loendiüksus.
  • URL peaks olema "https://tlkeith.com/contact.html"

// Verify Contact Us linki teksti

it ('peaks sisaldama meiega ühendust võtva lingi teksti', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Link leitud:' + link); (link).should.equal ("Võtke meiega ühendust");});}); // Verify Contact Us URL URL it ('peaks sisaldama kontakti URL -i', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href"). then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL leitud:' + link);});});

• Autoriõiguse teksti kinnitamine - "Copyright1.js"

  • See näide näitab autoriõiguse teksti leidmiseks kahte erinevat viisi:

    • elemendi valija abil
    • kasutades elemendi valijana xpath

// Autoriõiguse teksti kinnitamine, kasutades elemendi valijana id

it ('peaks sisaldama autoriõiguse teksti', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Autoriõigus leitud:' + link); (link). peaks. võrdne ("Tony Keith - tlkeith.com @ 2015 - kõik õigused reserveeritud.");});}); // Kinnita autoriõiguse tekst, kasutades elemendi valijana xpath ('peaks sisaldama autoriõiguse teksti', function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Autoriõigus leitud:' + link); (link). Peaks olema.equal ("Tony Keith - tlkeith.com @ 2015 - kõik õigused kaitstud.");});});

• Täitke vormiväljad ja esitage - "formFillSubmit1.js"

  • Sisestage eesnimi, perekonnanimi ja esitage, seejärel oodake tulemusi.

  • See näide näitab eesnime sisestusvälja täitmise kolme meetodit:

    • ID järgi
    • xpath poolt sisendist
    • xpath poolt vorm-> sisend
  • Samuti näitab see, kuidas sisestusvälja tühjendada

// Määra eesnimi kasutades id: Tony

it ('peaks eesnimeks määrama Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e). peaks.be.equal ("Tony"); console.log ("Eesnimi:" + e);});}); // Kustutage eesnimi, kasutades id it ('peaks kustutama eesnime', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e). peaks.be.equal (""); console.log ("Eesnimi:" + e);});}); // Määra eesnimi xpath abil sisendist järgmisele: Tony it ('peaks eesnimeks määrama Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Eesnimi:" + e);});}); // Eemaldage eesnimi xpath abil selle sisestamisest ('peaks kustutama eesnime', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). siis (funktsioon (e) {(e). peaks olema.be.equal (" "); console.log (" Eesnimi: " + e);});}); // Määra eesnimi vormi xpath abil vormist järgmisele: Tony it ('peaks eesnimeks määrama 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 ("Eesnimi:" + e);});}); // Määra perekonnanimi id abil: Keith it ('peaks perekonnanimeks määrama Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Siis (funktsioon (e) {(e). peaks olema.be.equal ("Keith"); console.log ("Perekonnanimi:" + e);});}); // Esitage vorm ja oodake otsingutulemusi (see peaks vormi esitama ja tulemusi ootama. Esita otsinguvorm ');}).waitForVisible ("#search-results", 10000). Then (function (e) {console.log (' Otsingutulemused leitud ');});});

• Klõpsake nuppu Kuva/peida ja kinnitage tekst - "showHideVerify1.js"

  • Tekst asub näitamise/peitmise elemendis. Nupp juhib olekut.

  • See näide näitab:

    • Laiendamiseks klõpsake nuppu
    • Oodake, kuni element on nähtav (laiendatud)
    • Teksti kinnitamine (koopiapakk)

// klõpsake nuppu "Lisateave" ja kontrollige laiendatud elemendi teksti

it ('peaks klõpsama lisateabe nuppu ja kontrollima teksti', function () {return driver.click ("#moreinfo"). then (function () {console.log ('nupp Lisateave');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). then (function (e) {console.log ('Tekst:' + e); (e).suld peaks.be.equal ("Kõik hea läheb siia!");});});

• Vormivälja vigade kinnitamine - "formFieldValidation.js"

  • Kasutage testskripte õigete veateadete kontrollimiseks.

  • See näide näitab:

    Kontrollige tõrketeateid ja asukohta (järjestamata loendi asukoht)

it ('peaks sisaldama 5 viga: esimene/viimane/aadress/linn/osariik', function () {

tagasi draiver.getText ("// ul [@class = 'alert alert-oht']/li [1]"). then (function (e) {console.log ('Viga leitud:' + e); (e).should.be.equal ('Palun sisesta eesnimi');}).getText ("// ul [@class = 'alert alert-oht']/li [2]"). siis (funktsioon (e) {console.log ('Viga leitud:' + e); (e).should.be.equal ('Palun sisestage perekonnanimi');}).getText ("// ul [@class = 'alert alert-oht ']/li [3] "). siis (funktsioon (e) {console.log (' Leiti tõrge: ' + e); (e).should.be.equal (' Palun sisestage aadress ');}). getText ("// ul [@class = 'alert alert-oht']/li [4]"). then (function (e) {console.log ('Viga leitud:' + e); (e). peaks.be.equal ('Palun sisesta linn');}).getText ("// ul [@class = 'alert alert-oht']/li [5]"). siis (funktsioon (e) {console.log ('Viga leitud:' + e); (e).should.be.equal ('Palun sisestage olek');}); });

• Andmete kordamine URL -i lingi/teksti/lehe kinnitamiseks - "LoopDataExample1.js"

  • See näide näitab: kasutage lingi ja nime salvestamiseks massiivi JSON -andmeid, seejärel korrake

    • Kontrollige iga URL -i teksti ja linki
    • Klõpsake linki ja laadige leht

// Lingiandmed - link ja 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 "," nimi ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," nimi ":" 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 "," nimi ": "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 "}]; … // silmus iga linki kaudu.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). siis (funktsioon (pealkiri) {// kinnitage pealkiri (pealkiri).should.be.equal ("Veebidraiveri IO - Õpetuse testleht ");}) // leidke URL.getAttribute ('a =' + d.nimi," href "). Seejärel (funktsioon (link) {(link).should.equal (d.link); console.log ('URL leitud:' + d.link);}) // minge URL-i lehele ja kontrollige selle olemasolu. klõpsake ('a =' + d.name).waitForVisible ("#js-repo-pjax- konteiner ", 10000). Siis (function () {console.log ('Githubi leht leitud');});});});

• Staatiliste andmete kordamine vormiväljade täitmiseks - "loopDataExample2.js"

  • See näide näitab: Kasutage ees-/perekonnanime salvestamiseks massiivi JSON -andmeid

    • Vormiväljade täitmiseks lugege andmeid, seejärel esitage vorm
    • Oodake tulemuste lehte
    • Kinnitage tulemuste lehel ees- ja perekonnanimi

// andmestik - eesnimi ja perekonnanimi ":" Jane "," perenimi ":" Doe "}, {" firstName ":" Don "," perenimi ":" Johnson "}]; … // silmust läbi iga dataArray dataArray.forEach (function (d) {it ('peaks täitma väljad, sumbit page', function () {return driver // veenduge, et olete avalehel.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). seejärel (funktsioon (pealkiri) {// kinnitage pealkiri (pealkiri).should.be.equal ("Veebidraiveri IO - õpetuse testleht");}).setValue ("#fname", d.firstName).getValue ("#fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("Esimene Nimi: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName)); console.log ("Perekonnanimi:" + e);}).submitForm ("#otsinguvorm"). seejärel (function () {console.log ('Esita otsinguvorm');}).waitForVisible ("#otsingutulemused", 10000). Siis (function () {console.log ('Tulemuste leht leitud');}).getText ("// h1"). seejärel (funktsioon (link) {console.log ('Leitud tekst:' + link); (link). Peaks olema.equal ("Tere tulemast" + d.eesnimi + "" + d.perekonnanimi + ".");});});});

• Kinnitage CSS -i atribuudid - "cssValidation1.js"

  • See näide näitab, kuidas:

    • Kinnitage järgmised CSS -i omadused:

      • värvi
      • polster (üleval, all, paremal, vasakul)
      • taustavärv

it ('peaks sisaldama veateksti õiget värvi'), function () {return driver.getCssProperty ("// ul [@class = 'alert alert-oht']/li [1]", "värv"). siis (function (result) {console.log ('Värv leitud:' + result.parsed.hex + "või" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('peaks tabeli lahtris sisaldama õiget polsterdust', function () {

return driver // padding: üleval paremal all vasakul.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). siis (funktsioon (result) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). siis (funktsioon (tulemus) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- paremale "). siis (funktsioon (tulemus) {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: ' + tulemus.väärtus); (tulemus.väärtus). peaks olema.võrdne (' 5 pikslit ');}); });

it ('peaks tabeli päises sisaldama õiget taustavärvi', function () {

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

6. samm: näpunäited ja nipid

• Silumine:

  • Rohkem silumiseks ja logide loomiseks lülitage logimine sisse draiveri tasemel.

    • Määra logLevel väärtuslikuks
    • Määra logOutput kataloogi nimeks ('logid')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {soovitud võimalused: {browserName: 'firefox'}});

• Silumiseks kasutage console.log (), silumist (), getText ().

  • console.log () - kasutage teabe kuvamiseks oleku määramiseks.
  • silumine () - kasutage brauseri/skripti peatamist, kuni käsureal vajutatakse sisestusklahvi.

  • getText () - kasutage kinnitamiseks, et suhtlete õige elemendiga.

    Eriti kasulik xpath -avaldiste puhul

// Klõpsake loendil üksust 3

it ('peaks klõpsama loendi 3. elemendil'), funktsioon () {// kasutage getText (), et kontrollida, kas xpath on elemendi tagastamise draiveri jaoks.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Siis (funktsioon (link) {// teabe väljastamiseks kasutage console.log () console.log ('Link leitud:' + link); (link).should.equal ("Üksus 3");}) // toimingu peatamiseks kasutage silumist (), et näha brauseris toimuvat.debug ().klõpsake ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link klikitud');}) // oodake, kuni ilmub Google'i otsinguvorm.waitForVisible ("#tsf", 20000). then (function (e) {console.log ('Leiti otsingutulemused');});});

• Kasutage keskkonnamuutujat brauseri dünaamiliseks muutmiseks:

  • Kasutage keskkonnamuutujat SELENIUM_BROWSER teise brauseri käivitamiseks ilma testskripti iga kord muutmata.
  • Toetamiseks on vaja väikest kodeeringu muutmist.

Koodimuudatused:

// laadige brauseri draiver

draiver = webdriverio.remote ({soovitud võimalused: {brauseriNimi: process.env. SELENIUM_BROWSER || 'chrome'}});

Toetatud brauserid:

• Internet Explorer - IE 8+ (ainult Windows)

  SELENIUM_BROWSER = st mocha

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = Firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = kroomitud mokka

• Ooper 12+

  SELENIUM_BROWSER = ooperimokk

• Safari

  SELENIUM_BROWSER = safari mokka

Testimine:

• Windowsi jaoks kasutage git bash shelli:

  • SELENIUM_BROWSER = kroomitud mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Maci või Linuxi puhul avage terminal:

  • SELENIUM_BROWSER = kroomitud mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Tundlik testimine:

  • Määrake katkestuspunktid projekti või raamistiku (st alglaadimis) alusel.

  • Määrake iga murdepunkti jaoks keskkonnamuutujad:

    • LAUD - 1200 pikslit
    • TABLET - 992 pikslit
    • MOBIIL - 768 pikslit

  • Töötage välja keskkonnamuutuja lugemiseks korduvkasutatav käsk ja määrake brauseri suurus.

    Vaadake näidet allpool

  • Helistage oma testiskriptis korduvkasutatavale käsule.

// korduvkasutatav kood - raamatukogu // koodilõik if (bp == "DESKTOP") {obj.width = 1200; obj.kõrgus = 600; obj.nimi = bp; } muidu kui (bp == "TABLET") {obj.laius = 992; obj.kõrgus = 600; obj.nimi = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.kõrgus = 400; obj.nimi = bp; }

// Testi skript

enne (funktsioon (tehtud) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (draiver));} // määrake akna suurus ('peaks määrama akna suuruse', function (done) {// ainult laiusel on draiver.setWindowSize (winsize.width, winsize.height, function () {}). call (tehtud);});

• Korduvkasutatavad käsud (kohandatud käsud):

  • Veebidraiveri IO on hõlpsasti laiendatav.
  • Mulle meeldib panna kõik korduvkasutatavad käsud raamatukokku. (võib -olla on see vana kool, kuid see töötab!)

common/commonLib.js

// VerifyLastNameCheckError ()

// // Kirjeldus: // Kinnitab perekonnanime vormi valideerimise veateate // Sisend: // number - veaindeks (1–5) var idx = argumendid [0], tagasihelistamine = argumendid [argumendid.pikkus - 1]; this.getText ("// ul [@class = 'alert alert-oht']/li [" + idx + "]", function (err, e) {console.log ('Viga leitud:' + e); (e).should.be.equal ('Palun sisestage perekonnanimi');}). helistada (tagasihelistamine); }; // ekspordime funktsiooni moodul.exports.verifyLastNameCheckError = VerifyLastNameCheckError;

Siin on konkreetsed muudatused, mida on vaja korduvkasutatava funktsiooni kutsumiseks

Täieliku töönäite saamiseks vaadake formFieldValidation.js

// nõuda korduvkasutatavat käsku - CommonLib

tavaline = nõuda ('./ Common/CommonLib'); … // siduda käsud driver.addCommand ('veriffi_nimiError', common.verifyFirstNameCheckError.bind (draiver)); driver.addCommand ('pārbaudLastNameError', common.verifyLastNameCheckError.bind (draiver)); it ('peaks sisaldama 2 viga: ees-/perekonnanimi', function () {// helista korduvkasutatava funktsiooni draiverile.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projektifaili/kataloogi struktuur:

  • Siin on tüüpiline projekti struktuur:

    • "Projekt" - peamine projekti kataloog

      • README.md - globaalse projekti lugemislugemine

      • "Ühine" - kõigi projektide ühiste globaalsete funktsioonide kataloog

        • common -lib.js - globaalne funktsiooniteek
        • README.md - globaalsete funktsioonide readme

      • "Toode1" - toote 1 kataloog

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

        • "Common" - kataloog projekti 1 kohalike funktsioonide jaoks

          • prod1 -lib.js - kohaliku projekti raamatukogu projekti 1 jaoks
          • README.md - kohalike funktsioonide lugemisprojekt 1

      • "Toode2"-toote kataloog 2test-script1.jstest-script2.js

        • "Common" - kataloog projekti 2 kohalike funktsioonide jaoks

          • prod2 -lib.js - kohaliku projekti raamatukogu projekti 2 jaoks
          • README.md - kohalike funktsioonide lugemisprojekt 2

• Jagage testiskriptid mitmeks failiks:

  • Siin on näide mitme faili kasutamisest:

    • Tervislikkuse kontroll - põhiline skript, et kontrollida, kas kõik töötab
    • Staatiline element ja teksti valideerimine - kontrollige kõiki elemente ja teksti
    • Vormi/lehe vea valideerimine - vea valideerimine
    • Otsingutulemused - dünaamilise sisu testimine

• Tagasihelistamised VS. Lubadused:

  • Veebidraiveri IO versioon 3 toetab nii tagasihelistamist kui ka lubadusi.

    Lubadused on eelistatud meetod, kuna see vähendab veakäsitluskoodi. Palun vaadake allpool sama näidet, mis on kirjutatud tagasihelistamise ja lubaduste abil.

Tagasihelistamised

// Ees-/perekonnanime määramine/kinnitamine tagasihelistamise abil

it ('peaks seadma/kinnitama ees-/perekonnanime tagasikutsumise abil', function (valmis) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e). peaks olema.be.equal ("Tony"); console.log ("Eesnimi:" + e); driver.setValue ("#lname", "Keith", funktsioon (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Perekonnanimi:" + e); done ();});});});});});

Lubadused

// Ees-/perekonnanime määramine/kinnitamine lubaduste abil

it ('peaks seadma/kinnitama ees- ja perekonnanime lubaduste abil', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e). peaks.be.equal ("Tony"); console.log ("Eesnimi:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). seejärel (funktsioon (e) {(e). peaks olema.be.equal ("Keith"); console.log ("Perekonnanimi:" + e);});});

Samm: rohkem ressursse

Siin on teie jaoks mõned täiendavad ressursid:

• Vestlusgrupid (Gitter)

  • Veebidraiveri IO arutelurühm
  • Mocha vestlusring

• Muud huvitavad projektid

  • Supertest - HTTP kinnitused
  • Chai - väited

8. samm: järeldus

Uurisin mõnda aega oma projekti jaoks kasutatavaid tehnoloogiaid. Alustasin algselt Selenium Web Driveriga, kuid läksin üle Web Driver IO kasutamisele. Veebidraiveri IO -d tundus olevat lihtsam kasutada ja palju lihtsam laiendada (vähemalt laiendamise dokumentatsioon - korduvkasutatavad käsud olid paremad).

Kui ma esimest korda tehnoloogiaid vaatama hakkasin, oli raske leida häid näiteid, mis oleksid seotud kõigega, mida ma üritasin teha. See on põhjus, miks ma tahtsin seda teavet ja teadmisi teiega jagada.

Tehnoloogiad töötasid palju paremini, kui ma ootasin, kuid sellega kaasnes õppimiskõver. Kui olin aru saanud, kuidas kõik komponendid koos töötavad, sain väga lühikese ajaga keerulisi testskripte kirjutada. Kõige keerulisemad skriptid olid JavaScriptil põhinevad komponendid, nagu kuupäeva valija ja modaalivalijad.

Ma ei ole kunagi nimetanud ennast JavaScripti arendajaks ega tahtnud igaüks olla JavaScripti ekspert, kuid nende tehnoloogiate kasutamine on kindlasti motiveerinud mind JS -i oskusi täiendama.

Loodan, et see artikkel on kasulik ja näited on selged ja informatiivsed.

Palun andke mulle teada, kui teil on küsimusi või kommentaare.

Aitäh, Tony Keith