Žiniatinklio tvarkyklės IO pamoka naudojant tiesioginę svetainę ir darbo pavyzdžiai: 8 žingsniai

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Žiniatinklio tvarkyklės IO pamoka naudojant tiesioginę svetainę ir darbo pavyzdžius

Paskutinis atnaujinimas: 2015-07-26

(Dažnai tikrinkite, kai atnaujinu šias instrukcijas, pateikdamas daugiau informacijos ir pavyzdžių)

Fonas

Neseniai man buvo pateiktas įdomus iššūkis. Man reikėjo pristatyti automatizuotą testavimą Q/A skyriui, turinčiam labai mažai techninės patirties ir neturinčiam programavimo žinių.

Tai iš tikrųjų buvo du (2) atskiri iššūkiai. Pirmasis buvo nustatyti technologijas, skirtas automatiniam bandymui atlikti. Antrasis buvo apmokyti Q/A skyrių.

Straipsnyje bus kalbama tik apie naudojamas technologijas ir tai, ko išmokau proceso metu.

Technologijos veikė gerai, bet aš tikrai turėjau ieškoti informacijos ir daug valandų praleidau spręsdamas problemas.

Man buvo sunku rasti internete informacijos apie šias technologijas, veikiančias kartu.

Norėjau pasidalinti šia informacija, todėl parašiau šį straipsnį kartu su darbiniais bandomųjų scenarijų pavyzdžiais ir bandomąja svetaine, kad galėčiau paleisti scenarijus.

Visus bandymo scenarijus galima rasti „github“, o darbo bandymų svetainė yra „Web Driver IO Tutorial Test Site“

Tikiuosi, kad jums tai naudinga. Jei tai padarysite, praneškite man.

Naudokite technologijas, kad:

• Išbandykite svetainės funkcionalumą
• Išbandykite „JavaScript“funkcionalumą
• Galima paleisti rankiniu būdu
• Galima paleisti automatiškai

• Lengva išmokti kalbą ne programuotojams

  Klausimų/atsakymų personalas, turintis pagrindinių žinių apie HTML ir „JavaScript“

• Naudokite tik atvirojo kodo programinę įrangą

Technologijos

Mano pasirinktų technologijų sąrašas:

• mocha - bandymų bėgikas - vykdo bandymų scenarijus
• shouldjs - teiginių biblioteka
• „webdriverio“- naršyklės valdymo įrišimai (įrišimai kalbomis)
• selenas - naršyklės abstrakcija ir veikianti gamykla

• Naršyklės/mobiliųjų įrenginių tvarkyklės + naršyklės

  • „Firefox“(tik naršyklė)
  • „Chrome“(naršyklė ir tvarkyklė)
  • IE (naršyklė ir tvarkyklė)
  • „Safari“(naršyklės ir tvarkyklės papildinys)

1 veiksmas: programinės įrangos diegimas

Norėdami pradėti, turite įdiegti atskirus „Node JS“, „Web Driver IO“, „Mocha“, „Should“ir „Selen“atskirus serverius.

Čia yra „Windows 7“diegimo instrukcijos.

(Aš esu „Mac“/„Linux“vartotojas, bet turėjau viską įdiegti „Windows 7“kompiuteriuose, todėl įtraukiau jį kaip nuorodą. Diegimo „Mac“/„Linux“procedūra yra panaši. Daugiau informacijos rasite internetinėse nuorodose informacija.)

Iš naršyklės:

• Įdiekite mazgą, kuriame yra NPM („Node Package Manager“)

• eikite į

  • Spustelėkite įdiegti
  • Išsaugokite ir paleiskite failą
  • Nustatykite kelią ir kintamąjį (NODE_PATH)
  • Eikite į Valdymo skydas-> Sistema ir sauga-> Sistema
    • Išplėstiniai sistemos nustatymai

    • Aplinkos nustatymas (vartotojo kintamieji)

      • Pridėti prie PATH

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

      • Pridėti NODE_PATH (sistemos kintamieji)

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

Pastaba: visą programinę įrangą įdiegiau žemiau, naudodamas npm visuotinę parinktį (-g). Paprastai tai nerekomenduojama, tačiau šiam diegimui turėjau įdiegti visame pasaulyje, nes jis būtų naudojamas keliuose projektuose.

Atidarykite komandų eilutę (cmd):

(vietinis vartotojo administratorius)

• Įdiekite seleno „interneto tvarkyklę IO“

  • npm įdiegti webdriverio -g

    Taip jūsų kompiuteryje bus įdiegta žiniatinklio tvarkyklės IO visame pasaulyje

• Įdiekite „mocha“bandymo bėgimo programinę įrangą

  • npm įdiegti moką -g

    Taip jūsų kompiuteryje bus įdiegta moka visame pasaulyje

• Įdiekite teiginių biblioteką „turėtų“

  • npm įdiegti turėtų -g

    Tai jūsų kompiuteryje bus įdiegta „turėtų“visame pasaulyje

• Įdiekite „Selenium Stand Alone Server“

  • Eikite į
  • Atsisiųskite jar failą ir pereikite prie „seleno“katalogo.

• Įdiekite naršykles ir naršyklės tvarkykles, kurias norite išbandyti

  • Iš cmd raginimo:

    • Sukurkite „seleno“katalogą
    • C: / Users {USERNAME} selenas

    • Komandos:

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

    • „Firefox“

      • Įdiekite „Firefox“naršyklę, jei dar neįdiegta.
      • Kelias turi būti nustatytas norint paleisti „Firefox“iš komandinės eilutės (cmd).
      • Valdymo skydas-> Sistema ir sauga-> Sistema
        • Išplėstiniai sistemos nustatymai
        • Aplinkos nustatymai
        • Pridėkite (pridėkite naudoti dvitaškį) prie kelio kintamojo
        • C: / Program Files (x86) Mozilla Firefox
      • „Firefox“nereikia jokios specialios žiniatinklio tvarkyklės.

    • „Chrome“

      • Įdiekite „Chrome“naršyklę, jei dar neįdiegta.
      • Kelias GALI būti nustatytas paleisti „Chrome“iš komandinės eilutės (cmd).
      • Pirmiausia išbandykite: chrome.exe iš komandinės eilutės (cmd)
      • Jei „Chrome“neprasideda, atlikite šiuos veiksmus:
      • Valdymo skydas-> Sistema ir sauga-> Sistema
        • Išplėstiniai sistemos nustatymai
        • Aplinkos nustatymai
        • Pridėkite (pridėkite naudoti dvitaškį) prie kelio kintamojo
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • „Chrome“reikalinga speciali žiniatinklio tvarkyklė.

        Eikite į chromium.org ir išpakuokite 32 bitų tvarkyklę į katalogą „selenas“

    • „Internet Explorer“(tik „Windows“- neveiks kitose platformose)

      • IE reikalinga speciali žiniatinklio tvarkyklė.

        • Eikite į
        • Atsisiųskite ir išpakuokite 64 bitų tvarkyklę į katalogą „selenas“.

2 veiksmas: pagrindinis bandymo scenarijus

Pradėkime nuo kai kurių pagrindų.

Čia yra paprastas mokos scenarijus, kuris atidarys svetainę ir patvirtins pavadinimą.

// pamoka1.js

// // Tai yra paprastas bandomasis scenarijus, skirtas atidaryti svetainę ir // patvirtinti pavadinimą. // reikalingos bibliotekos var webdriverio = reikalauja ('webdriverio'), turėtų = reikalauti ('turėtų'); // bandomojo scenarijaus bloko arba rinkinio aprašymas ('Web Test IO - Tutorial Test Page Website Title Test for Web - mokomojo bandymo puslapio svetainė', funkcija () {// nustatykite skirtąjį laiką į 10 sekundžių this.timeout (10000); var driver = {}; // kablys, kurį reikia paleisti prieš bandymus (funkcija (atlikta) {// įkelti tvarkyklę į naršyklės tvarkyklę = webdriverio.remote ({nori bandymo specifikacija - „specifikacija“it („turėtų būti įkeliamas teisingas puslapis ir pavadinimas“, funkcija () {// įkelti puslapį, tada iškviesti funkciją () grąžinti tvarkyklę.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // gauti pavadinimą, tada perduoti pavadinimą į funkciją ().getTitle (). tada (funkcija (pavadinimas) {// patikrinti pavadinimą (pavadinimas).should.be.equal ("Žiniatinklio tvarkyklės IO - mokymo programos bandomasis puslapis "); // uncomment for console debug // console.log ('Dabartinio puslapio pavadinimas:' + pavadinimas);});}); // //" kablys ", kuris bus paleistas po visų šio bloko bandymų (funkcija (atlikta) {driver.end (baigta);});});

Stebėjimai:

• Pirmiausia turėtumėte pastebėti, kad bandymo scenarijus parašytas JAVASCRIPT (baigiasi.js plėtiniu).

• Pagrindinė visų bandomųjų scenarijų struktūra yra beveik identiška.

  • Antraštės komentarai (//)
  • Reikalingos bibliotekos
  • Nustatymų parinktys (neprivaloma)
  • Kablys: įkelti naršyklės tvarkyklę
  • Test Suite (aprašykite)
  • Bandymo specifikacijos (komplekte gali būti daug specifikacijų)
  • Kablys: išvalyti

• Bandymų rinkinys prasideda aprašymo funkcija, kuri turi du parametrus:

  • Styga - bandymų rinkinio aprašymas

    • „Patikrinkite, ar puslapyje nėra tinkamų žodžių“
    • „Patikrinkite radijo mygtukų veikimą“

  • funkcija - kodo blokas, kurį reikia vykdyti

    apibūdinti („Test suite aprašymas“, funkcija () {});

• Bandymų rinkinyje bus 1 ar daugiau bandymų specifikacijų (specifikacija)

• Specifikacijos prasideda nuo jos funkcijos, kuri turi du parametrus:

  • Styga - bandymo specifikacijos aprašymas

    • „Turėtų būti teisingas nuorodos tekstas ir nuorodos URL“
    • „Turi būti teisingas žodis (kopijavimo dėžė)
  • funkcija - kodo blokas, kurį reikia vykdyti
  • it („Bandymo specifikacijos aprašymas“, funkcija () {});
• Specifikacijoje yra vienas ar daugiau lūkesčių, kuriais tikrinama kodo būsena

• Tai vadinama teiginiais

  Biblioteka „turėtų“pateikia teiginius

• Beveik visais atvejais turėsite rasti vieną ar daugiau elementų naudodami selektorių, tada atlikti tam tikrą veiksmą su elementu (-ais)

  • Pavyzdžiai:

    • Raskite tekstą puslapyje ir patikrinkite tekstą
    • Užpildykite formą ir pateikite
    • Patikrinkite elemento CSS

Pažvelkime atidžiau į pavyzdį su komentarais

Įkelkite reikalingas bibliotekas: žiniatinklio tvarkyklės IO ir turėtų.

// reikalingos bibliotekos

var webdriverio = reikalauti ('webdriverio'), turėtų = reikalauti ('turėtų');

Apibrėžkite bandymų rinkinį. Šis rinkinys vadinamas „Interneto tvarkyklės IO pavadinimo testas - mokymo programos puslapio svetainė“

// bandomojo scenarijaus blokas arba rinkinys

aprašyti („Žiniatinklio tvarkyklės IO pavadinimo testas - mokymo programos tinklalapio svetainė“, funkcija () {…});

Nustatykite skirtąjį laiką 10 sekundžių, kad scenarijus nesibaigtų įkeliant puslapį.

// nustatykite skirtąjį laiką 10 sekundžių

this.timeout (10000);

Prieš paleisdami specifikacijų specifikacijas, užsikabinkite už naršyklės tvarkyklės. Šiame pavyzdyje įkelta „Firefox“tvarkyklė.

// kablys paleisti prieš bandymus

before (funkcija (atlikta) {// įkelti tvarkyklę, skirtą naršyklės tvarkyklei = webdriverio.remote ({pageidaujamos galimybės: {naršyklės pavadinimas: 'firefox'}}); tvarkyklė.init (padaryta);});

Apibrėžkite bandymo specifikaciją.

// bandymo specifikacija - "specifikacija"

it ('turėtų būti įkeliamas teisingas puslapis ir pavadinimas', funkcija () {…});

Įkelkite svetainės puslapį

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

Gaukite pavadinimą, tada perduokite pavadinimą funkcijai ()

.getTitle (). tada (funkcija (pavadinimas) {

… });

Patvirtinkite pavadinimą naudodami teiginių biblioteką.

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

Kablys, kad išeitumėte ir išvalytumėte vairuotoją, kai baigsite.

// „kablys“paleisti po visų šio bloko bandymų

po (funkcija (padaryta) {tvarkyklė.pabaigos (padaryta);});

3 veiksmas: paleiskite bandymo scenarijų

Dabar pažiūrėkime, ką bandomasis scenarijus veikia paleidus.

Pirmiausia paleiskite „Selenium Stand Alone Server“:

• „Windows“naudokite komandinę eilutę (cmd):

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

• Jei naudojate „Mac“arba „Linux“, atidarykite terminalą:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Žr. Ekrano kopiją aukščiau

Toliau paleiskite bandomąjį scenarijų:

• „Windows“naudokite komandinę eilutę (cmd):

  • mokas
  • # mokos pamoka1.js

• Jei naudojate „Mac“arba „Linux“, atidarykite terminalą:

  • mokas
  • $ mocha tutorial.js
• Žr. Ekrano kopiją aukščiau

Taigi, kas atsitiko?

Mocha iškviečia scenarijų „tutorial1.js“. Vairuotojas paleido naršyklę („Firefox“), įkėlė puslapį ir patvirtino pavadinimą.

4 žingsnis: Svetainės pavyzdys

Visi pavyzdžiai prieštarauja šiai svetainei.

Svetainės pavyzdys yra: Web Driver IO Tutorial Test Page

Visus bandymo scenarijus galima atsisiųsti iš „github“.

5 žingsnis: konkretūs pavyzdžiai

Visą kodą galite rasti „github“: „Web Driver IO Tutorial“github

• Patvirtinkite nuorodą ir nuorodos tekstą neužsakytame sąraše - „linkTextURL1.js“

  • Netvarkingas sąrašas turi, o nuoroda yra ketvirtasis sąrašo elementas.
  • URL turėtų būti „https://tlkeith.com/contact.html“

// Patvirtinkite Susisiekite su mumis nuorodos tekstą

it ('turėtų būti nuorodos tekstas Susisiekite su mumis', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). tada (funkcija (nuoroda) {console.log ('Nuoroda rasta:' + nuoroda); (nuoroda).should.equal ("Susisiekite su mumis");});}); // Patvirtinkite Susisiekite su mumis URL it („turėtų būti kontaktinio URL“, funkcija () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href"). then (funkcija (nuoroda) {(nuoroda).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL rastas:' + nuoroda);});});

• Patvirtinkite autorių teisių tekstą - „Copyright1.js“

  • Šiame pavyzdyje pateikiami 2 skirtingi būdai, kaip rasti autorių teisių tekstą:

    • elementų parinkikliu
    • naudojant elementų parinkiklį „xpath“

// Patvirtinkite autorių teisių tekstą naudodami ID kaip elementų parinkiklį

it ('turi būti autorių teisių tekstas', function () {return driver.getText ("#copyright"). lygus ("Tony Keith - tlkeith.com @ 2015 - Visos teisės saugomos.");});}); // Patvirtinkite autorių teisių tekstą naudodami elementų parinkiklį „xpath“(„turėtų būti autorių teisių tekstas“, function () {return driver.getText ("// poraštė/centras/p"). Tada (funkcija (nuoroda) {console.log ('Rasta autorių teisių:' + nuoroda); (nuoroda).should.equal ("Tony Keith - tlkeith.com @ 2015 - Visos teisės saugomos.");});});

• Užpildykite formos laukus ir pateikite - „formFillSubmit1.js“

  • Įveskite vardą, pavardę ir pateikite, tada laukite rezultatų.

  • Šiame pavyzdyje pateikiami 3 vardo įvesties lauko užpildymo būdai:

    • pagal id
    • xpath iš įvesties
    • xpath iš formos-> įvesties
  • Taip pat parodyta, kaip išvalyti įvesties lauką

// Nustatykite pirmą vardą naudodami id: Tony

it ('turėtų nustatyti vardą Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Vardas:" + e);});}); // Išvalykite vardą naudodami ID it ('turėtų išvalyti vardą', function () {return driver.clearElement ("#fname").getValue ("#fname"). Tada (funkcija (e) {(e).turėtų.be.equal (""); console.log ("Vardas:" + e);});}); // Nustatykite vardą naudodami xpath iš įvesties į: Tony it ('turėtų nustatyti vardą Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// įvestis [@name = 'fname']"). tada (funkcija (e) {(e).should.be.equal ("Tony"); console.log ("Vardas:" + e);});}); // Išvalykite vardą naudodami xpath iš jo įvesties ('turėtų išvalyti vardą', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). tada (funkcija (e) {(e).turi.be.equal (" "); console.log (" Vardas: " + e);});}); // Naudodami xpath nustatykite vardą iš formos į: Tony it ('turėtų nustatyti vardą Tony', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Tada (funkcija (e) {(e).should.be.equal ("Tony"); console.log ("Vardas:" + e);});}); // Nustatykite pavardę naudodami id į: Keith it ('turėtų nustatyti Keith pavardę', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Tada (funkcija (e) {(e).should.be.equal ("Keith"); console.log ("Pavardė:" + e);});}); // Pateikite formą ir laukite paieškos rezultatų („turėtų pateikti formą ir laukti rezultatų“, function () {return driver.submitForm ("#search-form"). Pateikti paieškos formą ');}).waitForVisible ("#paieškos rezultatai", 10000).tada (funkcija (e) {console.log (' Rasti paieškos rezultatai ');});});

• Spustelėkite Rodyti/slėpti mygtuką ir patvirtinkite tekstą - „showHideVerify1.js“

  • Tekstas yra rodymo/slėpimo elemente. Mygtukas valdo būseną.

  • Šis pavyzdys rodo:

    • Spustelėkite mygtuką, kad išplėstumėte
    • Palaukite, kol elementas bus matomas (išplėstas)
    • Patikrinkite tekstą (kopijavimo skyrius)

// spustelėkite mygtuką „Daugiau informacijos“ir patikrinkite tekstą išplėstiniame elemente

it ('turėtų spustelėti daugiau informacijos mygtuką ir patikrinti tekstą', function () {return driver.click ("#moreinfo"). then (function () {console.log ('Mygtukas Daugiau informacijos mygtukas');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). tada (funkcija (e) {console.log ('Tekstas:' + e); (e).should.be.equal ("Čia viskas gerai!");});});

• Patvirtinkite formos lauko klaidas - „formFieldValidation.js“

  • Naudokite bandymo scenarijus, kad patikrintumėte, ar klaidos pranešimai pateikiami teisingai.

  • Šis pavyzdys rodo:

    Patikrinkite klaidos tekstinius pranešimus ir vietą (neužsakytą sąrašo padėtį)

it ('turi būti 5 klaidos: first/last/address/city/state', function () {

grąžinti tvarkyklę.getText ("// ul [@class = 'alert alert-risks']/li [1]"). tada (funkcija (e) {console.log ('Rasta klaida:' + e); (e).should.be.equal ('Įveskite vardą');}).getText ("// ul [@class = 'alert alert-risks']/li [2]"). tada (funkcija (e) {console.log ('Rasta klaida:' + e); (e).should.be.equal ('Prašome įvesti pavardę');}).getText ("// ul [@class = 'alert alert-pavojus" ']/li [3] "). tada (funkcija (e) {console.log (' Rasta klaida: ' + e); (e).should.be.equal (' Prašome įvesti adresą ');}). getText ("// ul [@class = 'alert alert-risks']/li [4]"). tada (funkcija (e) {console.log ('Rasta klaida:' + e); (e). turėtų būti.be.equal ('Prašome įvesti miestą');}).getText ("// ul [@class = 'alert alert-risks']/li [5]"). tada (funkcija (e) {console.log ('Rasta klaida:' + e); (e).should.be.equal ('Prašome įvesti būseną');}); });

• Duomenų kartojimas, siekiant patvirtinti URL nuorodą/tekstą/puslapį - „LoopDataExample1.js“

  • Šiame pavyzdyje parodyta: Norėdami išsaugoti nuorodą ir pavadinimą, naudokite JSON duomenų masyvą, tada kartokite

    • Patikrinkite kiekvieno URL tekstą ir nuorodą
    • Spustelėkite nuorodą ir įkelkite puslapį

// Nuorodų duomenys - nuoroda ir tekstas

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 "," vardas ": "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 "}]; … // ciklas per kiekvieną nuorodąArray linkArray.forEach (funkcija (d) {it ('turėtų būti tekstas/nuoroda, tada eikite į puslapį -' + d.vardas, funkcija () {grąžinti tvarkyklę // įsitikinkite, kad esate pradiniame puslapyje.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). tada (funkcija (pavadinimas) {// patikrinkite pavadinimą (pavadinimas).should.be.equal ("Interneto tvarkyklės IO - Mokymo bandomasis puslapis ");}) // suraskite URL.getAttribute ('a =' + d.vardas," href "). Tada (funkcija (nuoroda) {(nuoroda).turi būti.lygus (d.link); console.log ('URL rastas:' + d.link);}) // eikite į URL puslapį ir patikrinkite, ar jis egzistuoja. spustelėkite ('a =' + d.name).waitForVisible ("#js-repo-pjax- konteineris ", 10000).tada (function () {console.log ('Github Page Found');});});});

• Statinių duomenų kaupimas formų laukuose - „loopDataExample2.js“

  • Šiame pavyzdyje parodyta: Vardui/pavardei išsaugoti naudokite JSON duomenų masyvą

    • Peržiūrėkite duomenis, kad užpildytumėte formos laukus, tada pateikite formą
    • Palaukite rezultatų puslapio
    • Rezultatų puslapyje patikrinkite vardą / pavardę

// duomenų masyvas - firstName ir lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," pavardė ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // ciklas per kiekvieną dataArray dataArray.forEach (funkcija (d) {it ('turėtų užpildyti laukus, sumos puslapį', funkcija () {grąžinimo tvarkyklė // įsitikinkite, kad esate pradiniame puslapyje.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). tada (funkcija (pavadinimas) {// patikrinkite pavadinimą (pavadinimas).should.be.equal („Web Driver IO - Tutorial Test Page“);}).setValue ("#fname", d.firstName).getValue ("#fname"). tada (funkcija (e) {(e).should.be.equal (d.firstName); console.log ("Pirma Pavadinimas: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Tada (funkcija (e) {(e).should.be.equal (d.lastName)); console.log ("Pavardė:" + e);}).submitForm ("#search-form"). tada (function () {console.log ('Pateikti paieškos formą');}).waitForVisible ("#paieškos rezultatai", 10000).tada (function () {console.log ('Rezultatų puslapis rastas');}).getText ("// h1"). tada (funkcija (nuoroda) {console.log ('Rastas tekstas:' + nuoroda); (nuoroda).should.equal ("Sveiki atvykę" + d.pavardė + "" + d.pavardė + ".");});});});

• Patvirtinkite CSS ypatybes - „cssValidation1.js“

  • Šis pavyzdys parodo, kaip:

    • Patvirtinkite šias CSS ypatybes:

      • spalva
      • paminkštinimas (viršuje, apačioje, dešinėje, kairėje)
      • fono spalva

it ('turėtų būti teisingos klaidos teksto spalvos', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-risks']/li [1]", "spalva"). tada (function (result) {console.log ('Rasta spalva:' + result.parsed.hex + "arba" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('lentelės langelyje turėtų būti teisingas užpildymas', function () {

return driver // padding: viršuje dešinėje apačioje kairėje.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). tada (funkcija (rezultatas) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). tada (funkcija (rezultatas) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- dešinė "). tada (funkcija (rezultatas) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). tada (funkcija (rezultatas) {console.log ('padding-left found: ' + rezultatas.value); (result.value).turėtų.būti lygus (' 5px ');}); });

it ('lentelės antraštėje turėtų būti teisinga fono spalva', function () {

grąžinti tvarkyklę.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). tada (funkcija (rezultatas) {console.log ('rasta fono spalva:' + result.parsed. šešiakampis); (rezultatas.parsed.hex).turi.būti lygus ('#eeeeee');}); });

6 žingsnis: patarimai ir gudrybės

• Derinimas:

  • Įjunkite registravimą tvarkyklės lygiu, kad gautumėte daugiau derinimo ir sukurtumėte žurnalus.

    • Nustatyti „logLevel“į „daugžodžiauti“
    • Nustatyti žurnalo išvestį į katalogo pavadinimą („žurnalai“)

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'žurnalai', {pageidaujamos galimybės: {browserName: 'firefox'}});

• Norėdami derinti, naudokite console.log (), debug (), getText ().

  • console.log () - Naudokite informacijai rodyti, kad nustatytumėte būseną.
  • debug () - Naudokite pristabdyti naršyklę/scenarijų, kol komandų eilutėje bus paspaustas enter.

  • getText () - naudokite norėdami patikrinti, ar sąveikaujate su tinkamu elementu.

    Ypač naudinga naudojant „xpath“išraiškas

// Spustelėkite 3 elementą iš sąrašo

it ('turėtų spustelėti 3 elementą iš sąrašo'), funkcija () {// naudokite getText (), kad patikrintumėte, ar xpath yra teisingas elemento grąžinimo tvarkyklei.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Tada (funkcija (nuoroda) {// naudokite console.log (), kad išvestumėte informaciją console.log ('Nuoroda rasta:' + nuoroda); (nuoroda).should.equal ("3 elementas");}) // naudokite debug (), kad sustabdytumėte veiksmus, kad pamatytumėte, kas vyksta naršyklėje.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Nuoroda paspausta');}) // palaukite, kol pasirodys „Google“paieškos forma.waitForVisible („#tsf“, 20000). Tada (funkcija (e) {console.log („Rasti paieškos rezultatai“);});});

• Norėdami dinamiškai keisti naršyklę, naudokite aplinkos kintamąjį:

  • Naudokite aplinkos kintamąjį SELENIUM_BROWSER, kad iškviestumėte kitą naršyklę, nekeisdami bandomojo scenarijaus kiekvieną kartą.
  • Norint palaikyti, reikia šiek tiek pakeisti kodavimą.

Kodo pakeitimai:

// įkelti naršyklės tvarkyklę

tvarkyklė = webdriverio.remote ({pageidaujamos galimybės: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Palaikomos naršyklės:

• „Internet Explorer“- IE 8+ (tik „Windows“)

  SELENIUM_BROWSER = ty mokas

• „Firefox 10+“(„Windows“/„Max“/„Linux“)

  SELENIUM_BROWSER = firefox mocha

• „Chrome 12+“(„Windows“/„Max“/„Linux“)

  SELENIUM_BROWSER = chromo mokos

• Opera 12+

  SELENIUM_BROWSER = operos mokinys

• „Safari“

  SELENIUM_BROWSER = safari mokos

Bandymas:

• „Windows“naudokite „git bash shell“:

  • SELENIUM_BROWSER = chromo mokos
  • $ SELENIUM_BROWSER = „chrome mocha DynamicBrowser.js“

• Jei naudojate „Mac“arba „Linux“, atidarykite terminalą:

  • SELENIUM_BROWSER = chromo mokos
  • $ SELENIUM_BROWSER = „chrome mocha DynamicBrowser.js“

• Atsakingas testavimas:

  • Nustatykite lūžio taškus pagal projektą ar sistemą (pvz., Įkrovos paleidimą).

  • Apibrėžkite kiekvienos lūžio vietos aplinkos kintamuosius:

    • Stalviršis - 1200 piks
    • TABLETĖ - 992 piks
    • MOBILUS - 768 piks

  • Sukurkite daugkartinio naudojimo komandą, kad nuskaitytumėte aplinkos kintamąjį ir nustatytumėte naršyklės dydį.

    Žr. Pavyzdį žemiau

  • Skambinkite daugkartinio naudojimo komandai savo bandymo scenarijuje.

// daugkartinio naudojimo kodas - biblioteka // kodo fragmentas if (bp == "DESKTOP") {obj.width = 1200; aukštis = 600; obj.pavadinimas = bp; } else if (bp == "TABLETAS") {obj.width = 992; aukštis = 600; obj.pavadinimas = bp; } else if (bp == "MOBILUS") {obj.width = 768; aukštis = 400; obj.pavadinimas = bp; }

// Bandomasis scenarijus

before (funkcija (padaryta) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (tvarkyklė));} // nustatyti lango dydį ('turėtų nustatyti lango dydį', function (done) {// tik plotis yra svarbus driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Daugkartinio naudojimo komandos (pasirinktinės komandos):

  • „Web Driver IO“yra lengvai išplečiamas.
  • Man patinka dėti visas daugkartinio naudojimo komandas į biblioteką. (gal tai senoji mokykla, bet ji veikia!)

common/commonLib.js

// patikrintiLastNameCheckError ()

// // Aprašymas: // Tikrina pavardės formos patvirtinimo klaidos pranešimą // Įvestis: // skaičius - klaidos indeksas (1–5) var idx = argumentai [0], atšaukimas = argumentai [argumentai.ilgis - 1]; this.getText ("// ul [@class = 'alert alert-risks']/li [" + idx + "]", funkcija (err, e) {console.log ('Rasta klaida:' + e); e).should.be.equal ('Prašome įvesti pavardę');}).call (atgalinis skambutis); }; // eksportuoti funkcijos modulį.exports.verifyLastNameCheckError = patikrintiLastNameCheckError;

Štai konkretūs pakeitimai, reikalingi pakartotinai naudojamai funkcijai iškviesti

Visą darbo pavyzdį žr. FormFieldValidation.js

// reikalauti daugkartinio naudojimo komandos - „CommonLib“

common = reikalauti ('./ Common/CommonLib'); … // surišti komandas driver.addCommand ('ellenőrizytipirminio pavadinimo klaida', common.verifyFirstNameCheckError.bind (tvarkyklė)); driver.addCommand ('ellenőrzésLastNameError', common.verifyLastNameCheckError.bind (tvarkyklė)); it ('turi būti 2 klaidos: vardas/pavardė', function () {// iškviesti daugkartinio naudojimo naudoto tvarkyklės.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projekto failo/katalogo struktūra:

  • Čia yra tipiška projekto struktūra:

    • "Projektas" - pagrindinis projekto katalogas

      • README.md - skaitymas pasauliniam projektui

      • „Bendras“- visuotinių funkcijų, bendrų visiems projektams, katalogas

        • common -lib.js - visuotinė funkcijų biblioteka
        • README.md - pasaulinių funkcijų skaitymas

      • „Product1“- 1 produkto katalogas

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

        • „Bendras“- 1 projekto vietinių funkcijų katalogas

          • prod1 -lib.js - 1 projekto vietinė funkcijų biblioteka
          • README.md - Readme vietinėms funkcijoms 1 projekte

      • „Product2“-2test-script1.jstest-script2.js produkto katalogas

        • „Bendras“- 2 projekto vietinių funkcijų katalogas

          • prod2 -lib.js - vietinė 2 projekto biblioteka
          • README.md - vietinių funkcijų skaitymas 2 projektui

• Padalinkite bandymo scenarijus į kelis failus:

  • Štai kelių failų naudojimo pavyzdys:

    • Sveiko proto patikrinimas - pagrindinis bandymo scenarijus, skirtas patikrinti, ar viskas veikia
    • Statinis elementas ir teksto patvirtinimas - patikrinkite visus elementus ir tekstą
    • Formos/puslapio klaidos patvirtinimas - klaidos patvirtinimas
    • Paieškos rezultatai - išbandykite dinaminį turinį

• Atskambinimas VS. Pažadai:

  • „Web Driver IO“3 versija palaiko ir atgalinius skambučius, ir pažadus.

    Pirmenybė teikiama pažadams, nes tai sumažina klaidų tvarkymo kodą. Žemiau žr. Tą patį pavyzdį, parašytą naudojant atgalinius skambučius ir pažadus.

Atskambinimai

// Nustatykite/patvirtinkite vardą/pavardę naudodami atgalinį skambutį

it ('turėtų nustatyti/patvirtinti vardą/pavardę naudojant atgalinį skambutį', funkcija (padaryta) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("Vardas:" + e); driver.setValue ("#lname", "Keith", funkcija (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Pavardė:" + e); done ();});});});});});

Pažadai

// Nustatykite/patvirtinkite vardą/pavardę naudodami pažadus

it ('turėtų nustatyti/patvirtinti vardą/pavardę naudojant pažadus', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). tada (funkcija (e) {(e).should.be.equal ("Tony"); console.log ("Vardas:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). tada (funkcija (e) {(e).should.be.equal ("Keith"); console.log ("Pavardė:" + e);});});

7 žingsnis: daugiau išteklių

Štai keletas papildomų šaltinių, kuriuos galite naudoti:

• Diskusijų grupės („Gitter“)

  • Žiniatinklio tvarkyklės IO diskusijų grupė
  • Mocha diskusijų grupė

• Kiti įdomūs projektai

  • Supertestas - HTTP tvirtinimai
  • Chai - teiginiai

8 žingsnis: Išvada

Aš praleidau šiek tiek laiko tyrinėdamas technologijas, kurios bus naudojamos mano projektui. Iš pradžių pradėjau nuo „Selenium Web Driver“, bet perėjau prie „Web Driver IO“. Atrodė, kad žiniatinklio tvarkyklės IO buvo lengviau naudoti ir daug lengviau išplėsti (bent jau išplėtimo dokumentai - daugkartinio naudojimo komandos buvo geresnės).

Kai pirmą kartą pradėjau ieškoti technologijų, buvo sunku rasti gerų pavyzdžių, kurie būtų susiję su viskuo, ką bandžiau padaryti. Dėl šios priežasties norėjau su jumis pasidalinti šia informacija ir žiniomis.

Technologijos veikė daug geriau, nei tikėjausi, tačiau buvo mokymosi kreivė. Kai supratau, kaip visi komponentai veikia kartu, galėjau per labai trumpą laiką parašyti sudėtingus bandymų scenarijus. Sunkiausi scenarijai buvo „JavaScript“pagrįsti komponentai, tokie kaip datos parinkiklis ir modaliniai parinkikliai.

Niekada nesivadinau „JavaScript“kūrėju ir nenorėjau būti „JavaScript“ekspertu, tačiau šių technologijų naudojimas neabejotinai paskatino mane tobulinti savo JS įgūdžius.

Tikiuosi, kad šis straipsnis yra naudingas, o pavyzdžiai yra aiškūs ir informatyvūs.

Praneškite man, jei turite klausimų ar pastabų.

Ačiū, Tony Keithas