Web Driver IO -opplæring ved bruk av et live nettsted og eksempler på arbeid: 8 trinn

2025 Forfatter: John Day | [email protected]. Sist endret: 2025-01-23 15:02

Web Driver IO -opplæring ved bruk av et levende nettsted og arbeidseksempler

Siste oppdatering: 26.07.2015

(Sjekk tilbake ofte når jeg oppdaterer denne instruksen med flere detaljer og eksempler)

Bakgrunn

Jeg fikk nylig en interessant utfordring presentert for meg. Jeg trengte å introdusere automatisert testing for en Q/A -avdeling med svært liten teknisk erfaring og ingen programmeringsbakgrunn.

Dette var egentlig to (2) separate utfordringer. Den første var å identifisere teknologiene for å utføre den automatiserte testen. Den andre var å trene Q/A -avdelingen.

Artikkelen vil bare ta for seg teknologiene som brukes og det jeg lærte i prosessen.

Teknologiene fungerte bra, men jeg måtte virkelig søke etter informasjon og brukte mange timer på å finne ut problemer.

Jeg hadde vanskelig for å finne informasjon på Internett om at disse teknologiene alle jobber sammen.

Jeg ønsket å dele denne informasjonen, så jeg skrev denne artikkelen sammen med testeksempler på testeksempler og et testnettsted for å kjøre skriptene mot.

Alle testskript kan bli funnet på github, og arbeidsteststedet ligger på Web Driver IO Tutorial Test Site

Jeg håper du synes det er nyttig. Gi meg beskjed hvis du gjør det.

Mål Bruk teknologier til å:

• Test nettstedets funksjonalitet
• Test JavaScript -funksjonalitet
• Kan kjøres manuelt
• Kan kjøres automatisk

• Lett å lære språk for ikke -programmerere

  Q/A personell med grunnleggende kunnskap om HTML og JavaScript

• Bruk bare programvare med åpen kildekode

Teknologier

Liste over teknologier jeg velger:

• mokka - testløper - utfører testskriptene
• shouldjs - påstandsbibliotek
• webdriverio - nettleserkontrollbindinger (språkbindinger)
• selen - nettleserabstraksjon og kjører fabrikk

• Drivere for nettleser/mobil + nettlesere

  • Firefox (bare nettleser)
  • Chrome (nettleser og driver)
  • IE (nettleser og driver)
  • Safari (nettleser og driver-plug-in)

Trinn 1: Programvareinstallasjon

For å komme i gang må du ha Node JS, Web Driver IO, Mocha, Should og Selenium stand alone server installert.

Her er installasjonsinstruksjoner for Windows 7.

(Jeg er en Mac/Linux -bruker, men jeg måtte installere alt på Windows 7 -maskiner, det er derfor jeg har inkludert det som referanse. Prosedyren for å installere på en Mac/Linux er lik. Rådfør deg med online referanser for mer informasjon.)

Fra en nettleser:

• Installer Node som inkluderer NPM (Node Package Manager)

• gå til

  • Klikk på installer
  • Lagre og kjør filen
  • Angi banen og variabelen (NODE_PATH)

  • Gå til Kontrollpanel-> System og sikkerhet-> System

    • Avanserte systeminnstillinger

    • Miljøinnstilling (brukervariabler)

      • Legg til i PATH

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

      • Legg til NODE_PATH (systemvariabler)

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

Merk: Jeg installerte all programvare nedenfor ved å bruke det globale alternativet npm (-g). Dette anbefales normalt ikke, men for denne installasjonen måtte jeg installere globalt siden den ville bli brukt på tvers av flere prosjekter.

Åpne ledeteksten (cmd):

(lokal brukeradministrator)

• Installer selen "web driver IO"

  • npm installer webdriverio -g

    Dette vil installere web driver IO globalt på maskinen din

• Installer “mocha” test runner -programvare

  • npm installer mokka -g

    Dette vil installere mokka globalt på maskinen din

• Installer “should” påstandsbiblioteket

  • npm installere bør -g

    Dette vil installere "burde" globalt på maskinen din

• Installer Selenium Stand Alone Server

  • Gå til
  • Last ned jar -filen og gå til katalogen "selen".

• Installer nettlesere og nettleserdrivere for å teste med

  • Fra cmd -melding:

    • Lag "selen" -katalog
    • C: / Users {USERNAME} selen

    • Kommandoer:

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

    • Firefox

      • Installer Firefox -nettleseren, hvis den ikke allerede er installert.
      • Banen må angis for å starte Firefox fra ledeteksten (cmd).

      • Kontrollpanel-> System og sikkerhet-> System

        • Avanserte systeminnstillinger
        • Miljøinnstillinger
        • Legg til (legg til bruk semikolon) i Path Variable
        • C: / Program Files (x86) Mozilla Firefox
      • Ingen spesiell nettdriver er nødvendig for Firefox.

    • Chrome

      • Installer Chrome -nettleseren, hvis den ikke allerede er installert.
      • Banen KAN settes til å starte Chrome fra ledeteksten (cmd).
      • Test først: chrome.exe fra ledeteksten (cmd)
      • Hvis krom ikke starter så:

      • Kontrollpanel-> System og sikkerhet-> System

        • Avanserte systeminnstillinger
        • Miljøinnstillinger
        • Legg til (legg til bruk semikolon) i Path Variable
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • En spesiell nettdriver er nødvendig for Chrome.

        Gå til chromium.org og pakk ut 32 -biters driveren til "selen" -katalogen

    • Internet Explorer (bare for Windows - fungerer ikke på andre plattformer)

      • En spesiell nettdriver er nødvendig for IE.

        • Gå til
        • Last ned og pakk ut 64 -biters driver til "selen" -katalogen.

Trinn 2: Grunnleggende testskript

La oss starte med noen grunnleggende.

Her er et enkelt mokka -skript som åpner et nettsted og bekrefter tittelen.

// tutorial1.js

// // Dette er et enkelt testskript for å åpne et nettsted og // validere tittel. // obligatoriske biblioteker var webdriverio = require ('webdriverio'), should = require ('should'); // en testskriptblokk eller suite beskriver ('Tittel Test for Web Driver IO - Tutorial Test Page Website', funksjon () {// sett timeout til 10 sekunder this.timeout (10000); var driver = {}; // krok for å kjøre før tester før (funksjon (ferdig) {// last inn driveren for nettleserdriver = webdriverio.remote ({wishCapabilities: {browserName: 'firefox'}}); driver.init (ferdig);}); // en testspesifikasjon - "spesifikasjon" den ('skal være last riktig side og tittel', funksjon () {// last side, ring deretter funksjon () retur driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // få tittel, og overfør deretter tittel til function ().getTitle (). deretter (funksjon (tittel) {// bekreft tittel (tittel).should.be.equal ("Web Driver IO - Tutorial Test Page "); // uncomment for console debug // console.log ('Current Page Title:' + title);});}); // en" krok "for å kjøre etter alle tester i denne blokken etter (funksjon (ferdig) {driver.end (done);});});

Observasjoner:

• Du bør først legge merke til at testskriptet er skrevet i JAVASCRIPT (ender i.js -utvidelsen).

• Den grunnleggende strukturen er nesten identisk for alle testskript.

  • Toppkommentarer (//)
  • Nødvendige biblioteker
  • Angi alternativer (valgfritt)
  • Krok: Last inn nettleserdriver
  • Test Suite (beskriv)
  • Testspesifikasjoner (kan være mange spesifikasjoner i en suite)
  • Krok: Rydd opp

• Testpakken begynner med en beskriv -funksjon som tar to parametere:

  • String - Beskrivelse av testsuite

    • "Sjekk siden for riktig ordspråk"
    • "Bekreft radioknappoperasjoner"

  • funksjon - kodeblokk som skal utføres

    beskriv (‘Description of test suite’, function () {});

• Testpakken vil inneholde 1 eller flere testspesifikasjoner (spesifikasjon)

• Spesifikasjoner begynner med den funksjonen som tar to parametere:

  • String - Beskrivelse av testspesifikasjon

    • "Bør være riktig lenketekst og lenke -URL"
    • “Bør inneholde riktig ord (kopi)
  • funksjon - kodeblokk som skal utføres
  • it (‘Beskrivelse av testspesifikasjon’, funksjon () {});
• En spesifikasjon inneholder en eller flere forventninger som tester kodenes tilstand

• Dette kalles påstander

  "Burde" -biblioteket gir påstandene

• I nesten alle tilfeller må du finne ett eller flere elementer ved hjelp av en velger og deretter utføre en operasjon på elementet / elementene

  • Eksempler:

    • Finn tekst på en side og bekreft teksten
    • Fyll ut et skjema og send inn
    • Verifiser CSS for et element

La oss se nærmere på eksemplet med kommentarer

Last inn de nødvendige bibliotekene: web driver IO og burde.

// nødvendige biblioteker

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

Definer testsuiten. Denne suiten kalles: "Titteltest for Web Driver IO - Tutorial Test Page Website"

// en testskriptblokk eller suite

beskriv ('Tittel Test for Web Driver IO - Tutorial Test Page Website', funksjon () {…});

Sett tidsavbruddet til 10 sekunder, slik at skriptet ikke tar timeout når siden lastes inn.

// sett timeout til 10 sekunder

denne. timeout (10000);

Krok for å laste inn nettleserdriveren før du kjører spesifikasjonene "spesifikasjoner". Firefox -driveren er lastet inn i dette eksemplet.

// krok for å løpe før tester

før (funksjon (ferdig) {// last inn driveren for nettleserdriver = webdriverio.remote ({wantedCapabilities: {browserName: 'firefox'}}); driver.init (ferdig);});

Definer testspesifikasjonen.

// en testspesifikasjon - "spesifikasjon"

det ('skal laste inn riktig side og tittel', funksjon () {…});

Last nettsiden

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

Få tittel, og send deretter tittel til funksjon ()

.getTitle (). deretter (funksjon (tittel) {

… });

Bekreft tittelen ved å bruke biblioteket for påstand.

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

Krok for å avslutte og rydde opp driveren når den er ferdig.

// en "krok" for å kjøre etter alle testene i denne blokken

etter (funksjon (ferdig) {driver.end (ferdig);});

Trinn 3: Kjør testskriptet

La oss nå se hva testskriptet gjør når det kjøres.

Start først Selenium Stand Alone Server:

• For Windows bruker du kommandolinje (cmd):

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

• For Mac eller Linux, åpne terminal:

  • java -jar
  • $ java -jar selen-server-standalone-2.46.0.jar
• Se skjermbilde ovenfor

Kjør deretter testskriptet:

• For Windows, bruk kommandolinje (cmd):

  • mokka
  • # mokka tutorial1.js

• For Mac eller Linux, åpne terminal:

  • mokka
  • $ mokka tutorial.js
• Se skjermbilde ovenfor

Så hva skjedde?

Mocha påkaller skriptet "tutorial1.js". Driveren startet nettleseren (Firefox), lastet inn siden og bekreftet tittelen.

Trinn 4: Eksempel på nettsted

Alle eksemplene kjøres mot dette nettstedet.

Eksempelnettstedet ligger på: Web Driver IO Tutorial Test Page

Alle testskript kan lastes ned fra github.

Trinn 5: Spesifikke eksempler

All kode er tilgjengelig på github: Web Driver IO Tutorial på github

• Bekreft lenke og lenketekst i en uordnet liste - "linkTextURL1.js"

  • Den uordnede listen har en og lenken er det fjerde listeelementet.
  • Nettadressen skal være "https://tlkeith.com/contact.html"

// Bekreft Kontakt oss lenketekst

it ('should contain Contact Us link text', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). deretter (function (link) {console.log ('Link funnet:' + link); (link).should.equal ("Kontakt oss");});}); // Bekreft Kontakt oss URL den ('skal inneholde Kontakt oss URL', funksjon () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (funksjon (lenke) {(lenke).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL funnet:' + link);});});

• Bekreft opphavsrettstekst - "Copyright1.js"

  • Opphavsretten er i bunnteksten Dette eksemplet viser to forskjellige måter å finne opphavsrettsteksten på:

    • med elementvelgeren
    • ved å bruke xpath som elementvelgeren

// Bekreft opphavsrettsteksten ved å bruke ID som elementvelger

den ('skal inneholde opphavsrettstekst', funksjon () {returdriver.getText ("#opphavsrett"). deretter (funksjon (lenke) {console.log ('Opphavsrett funnet:' + lenke); (lenke). burde. like ("Tony Keith - tlkeith.com @ 2015 - Alle rettigheter forbeholdt.");});}); // Bekreft opphavsrettstekst ved å bruke xpath som elementvelger den ('skal inneholde opphavsrettstekst', funksjon () {returdriver.getText ("// bunntekst/senter/p"). Deretter (funksjon (lenke) {console.log ('Opphavsrett funnet:' + lenke); (lenke).should.equal ("Tony Keith - tlkeith.com @ 2015 - Alle rettigheter forbeholdt.");});});

• Fyll ut skjemafelt og send inn "formFillSubmit1.js"

  • Fyll ut fornavn, etternavn og send inn, og vent deretter på resultater.

  • Dette eksemplet viser tre metoder for å fylle ut inndatafeltet fornavn:

    • av id
    • av xpath fra input
    • av xpath fra form-> input
  • Viser også hvordan du sletter et inndatafelt

// Angi fornavnet med id til: Tony

it ('skulle sette fornavn til Tony', funksjon () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). deretter (function (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Slett fornavnet ved å bruke id it ('should clear first name', function () {return driver.clearElement ("#fname").getValue ("#fname"). Deretter (function (e) {(e).should.be.equal (""); console.log ("Fornavn:" + e);});}); // Angi fornavnet ved å bruke xpath fra input til: Tony it ('should set first name to Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). deretter (funksjon (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Slett fornavnet ved å bruke xpath fra input it ('should clear first name', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). deretter (funksjon (e) {(e).should.be.equal (" "); console.log (" Fornavn: " + e);});}); // Angi fornavnet ved å bruke xpath fra skjema til: Tony it ('should set first name to Tony', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Deretter (funksjon (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Angi etternavnet ved å bruke id til: Keith it ('should set last name to Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Deretter (funksjon (e) {(e).should.be.equal ("Keith"); console.log ("Etternavn:" + e);});}); // Send inn skjema og vent på søkeresultatene det ('skal sende inn skjema og vente på resultater', function () {return driver.submitForm ("#search-form"). Deretter (funksjon (e) {console.log (' Send søkeskjema ');}).waitForVisible ("#søkeresultater", 10000). Deretter (funksjon (e) {console.log (' Søkeresultater funnet ');});});

• Klikk på Vis/skjul -knappen og bekreft tekst - "showHideVerify1.js"

  • Teksten er i et vis/skjul -element. Knappen styrer tilstanden.

  • Dette eksemplet viser:

    • Klikk på knappen for å utvide
    • Vent til elementet er synlig (utvidet)
    • Bekreft tekst (kopier)

// klikk på "Mer informasjon" -knappen og bekreft teksten i det utvidede elementet

det ('bør klikke mer info -knapp og bekrefte tekst', funksjon () {returdriver. klikk ("#merinfo"). deretter (funksjon () {console.log ('Klikk på mer info -knapp');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). deretter (funksjon (e) {console.log ('Text:' + e); (e).should.be.equal ("Alt går bra her!");});});

• Valider skjemafeltfeil - "formFieldValidation.js"

  • Bruk testskript for å kontrollere at feilmeldinger er produsert.

  • Dette eksemplet viser:

    Bekreft feilmeldingene og bekreft plassering (uordnet listeposisjon)

det ('skal inneholde 5 feil: første/siste/adresse/by/stat', funksjon () {

returdriver.getText ("// ul [@class = 'alert alert-fare']/li [1]"). deretter (funksjon (e) {console.log ('Feil funnet:' + e); (e).should.be.equal ('Vennligst skriv inn fornavn');}).getText ("// ul [@class = 'alert alert-fare']/li [2]"). deretter (funksjon (e) {console.log ('Feil funnet:' + e); (e).should.be.equal ('Skriv inn etternavn');}).getText ("// ul [@class = 'alert alert-fare ']/li [3] "). deretter (funksjon (e) {console.log (' Feil funnet: ' + e); (e).should.be.equal (' Skriv inn adresse ');}). getText ("// ul [@class = 'alert alert-fare']/li [4]"). deretter (funksjon (e) {console.log ('Feil funnet:' + e); (e).should.be.equal ('Please enter city');}).getText ("// ul [@class = 'alert alert-fare']/li [5]"). deretter (funksjon (e) {console.log ('Feil funnet:' + e); (e).should.be.equal ('Skriv inn tilstand');}); });

• Sløyfedata for å validere URL -lenke/tekst/side - "LoopDataExample1.js"

  • Dette eksemplet viser: Bruk en rekke JSON -data til å lagre koblingen og navnet, og gjenta deretter

    • Bekreft hver URL -tekst og lenke
    • Klikk på lenken og last siden

// Lenke data - lenke og 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 "}]; … // sløyfe gjennom hver linkArray linkArray.forEach (funksjon (d) {it ('skal inneholde tekst/lenke, og gå deretter til siden -' + d. Navn, funksjon () {returdriver // sørg for at du er på startsiden.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). deretter (funksjon (tittel) {// bekreft tittel (tittel).should.be.equal ("Web Driver IO - Tutorial Test Page ");}) // finn URL -adressen.getAttribute ('a =' + d.navn," href "). Deretter (funksjon (lenke) {(lenke).should.equal (d.link); console.log ('URL funnet:' + d.link);}) // gå til URL-siden og bekreft at den finnes. klikk ('a =' + d.name).waitForVisible ("#js-repo-pjax- container ", 10000).then (function () {console.log ('Github siden funnet');});});});

• Sløyfing av statiske data for å fylle ut skjemafelt - "loopDataExample2.js"

  • Dette eksemplet viser: Bruk en rekke JSON -data til å lagre fornavn/etternavn

    • Gå gjennom dataene for å fylle ut skjemafelt, og send deretter inn skjemaet
    • Vent på resultatsiden
    • Bekreft fornavn / etternavn på resultatsiden

// data array - fornavn og lastNamevar dataArray = [{"fornavn": "Tony", "etternavn": "Keith"}, {"fornavn": "John", "etternavn": "Doe"}, {"fornavn ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // gå gjennom hver dataArray dataArray.forEach (funksjon (d) {it ('skal fylle ut felt, sumbit side', funksjon () {returdriver // sørg for at du er på startsiden.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). deretter (funksjon (tittel) {// bekreft tittel (tittel).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#fname"). deretter (funksjon (e) {(e).should.be.equal (d.firstName); console.log ("First Navn: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Deretter (funksjon (e) {(e).should.be.equal (d.lastName); console.log ("Etternavn:" + e);}).submitForm ("#search-form"). deretter (function () {console.log ('Send søkeskjema');}).waitForVisible ("#søkeresultater", 10000).then (function () {console.log ('Resultatside funnet');}).getText ("// h1"). deretter (funksjon (lenke) {console.log ('Tekst funnet:' + lenke); (lenke).should.equal ("Velkommen" + d.firstName + "" + d.lastName + ".");});});});

• Valider CSS -egenskaper - "cssValidation1.js"

  • Dette eksemplet viser hvordan du:

    • Valider følgende CSS -egenskaper:

      • farge
      • polstring (topp, bunn, høyre, venstre)
      • bakgrunnsfarge

den ('skal inneholde riktig farge på feilteksten', funksjon () {returdriver.getCssProperty ("// ul [@class = 'alert alert-fare']/li [1]", "color"). deretter (function (result) {console.log ('Color found:' + result.parsed.hex + "or" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

det ('skal inneholde riktig polstring i tabellcelle', funksjon () {

returdriver // padding: øverst til høyre nederst til venstre.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). deretter (funksjon (resultat) {console.log ('padding-top funnet:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). deretter (funksjon (resultat) {console.log ('padding-bottom funnet:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- høyre "). deretter (funksjon (resultat) {console.log ('padding-right funnet:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). deretter (funksjon (resultat) {console.log ('padding-left found: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

det ('skal inneholde riktig bakgrunnsfarge i tabelloverskriften', funksjon () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). deretter (funksjon (resultat) {console.log ('bakgrunnsfarge funnet:' + result.parsed. hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Trinn 6: Tips og triks

• Feilsøking:

  • Slå på logging på førernivå for mer feilsøking og for å opprette logger.

    • Sett logLevel til 'verbose'
    • Sett logOutput til katalognavn ('logger')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {wantedCapabilities: {browserName: 'firefox'}});

• Bruk console.log (), debug (), getText () for å feilsøke.

  • console.log () - Brukes til å vise informasjon for å bestemme tilstand.
  • feilsøk () - Bruk pause nettleser/skript til enter trykkes på kommandolinjen.

  • getText () - Bruk for å bekrefte at du samhandler med det riktige elementet.

    Spesielt nyttig med xpath -uttrykk

// Klikk på element 3 fra listen

it ('skal klikke på element 3 fra listen', funksjon () {// bruk getText () for å bekrefte at xpath er riktig for elementreturdriveren.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Deretter (funksjon (lenke) {// bruk console.log () for å sende ut informasjon console.log ('Link funnet:' + link); (link).should.equal ("Element 3");}) // bruk feilsøking () for å stoppe handlingen for å se hva som skjer i nettleseren.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link klikket');}) // vent på at Google søkeskjema vises.waitForVisible ("#tsf", 20000).then (funksjon (e) {console.log ('Søkeresultater funnet');});});

• Bruk miljøvariabel for å endre nettleseren dynamisk:

  • Bruk miljøvariabel SELENIUM_BROWSER for å påkalle en annen nettleser uten å endre testskriptet hver gang.
  • Krever en liten kodingendring for å støtte.

Kodeendringer:

// last inn driveren for nettleseren

driver = webdriverio.remote ({wantedCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Nettlesere som støttes:

• Internet Explorer - IE 8+ (bare Windows)

  SELENIUM_BROWSER = ie mokka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox -mokka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = krom -mokka

• Opera 12+

  SELENIUM_BROWSER = operamokka

• Safari

  SELENIUM_BROWSER = safari -mokka

Testing:

• For Windows bruk git bash shell:

  • SELENIUM_BROWSER = krom -mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• For Mac eller Linux, åpne terminal:

  • SELENIUM_BROWSER = krom -mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Responsiv testing:

  • Bestem brytpunkter basert på prosjekt eller rammeverk (dvs. bootstrap).

  • Definer miljøvariabler for hvert bruddpunkt:

    • SKRIFTBORD - 1200 piksler
    • TABLETT - 992 px
    • MOBIL - 768 piksler

  • Utvikle en gjenbrukbar kommando for å lese miljøvariabelen og angi nettleserstørrelsen.

    Se eksempel nedenfor

  • Ring kommandoen for gjenbruk i testskriptet.

// gjenbrukbar kode - bibliotek // kodebit hvis (bp == "DESKTOP") {obj.width = 1200; obj. høyde = 600; obj.name = bp; } annet hvis (bp == "TABLET") {obj.width = 992; obj. høyde = 600; obj.name = bp; } annet hvis (bp == "MOBILE") {obj.width = 768; obj. høyde = 400; obj.name = bp; }

// Testskript

før (funksjon (ferdig) {winsize = common.getWindowSizeParams (); … driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // angi vindusstørrelsen den ('skal angi vindusstørrelse', function (done) {// bare bredden er viktig for driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Gjenbrukbare kommandoer (egendefinerte kommandoer):

  • Web Driver IO kan lett utvides.
  • Jeg liker å legge alle kommandoer som kan brukes på nytt i et bibliotek. (kanskje dette er old school, men det fungerer!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Beskrivelse: // Verifiserer feilmeldingen for etternavn i skjemavalidering // // Inndata: // nummer - feilindeks (1-5) // Utdata: // ingen // var verifiLastNameCheckError = funksjon () { var idx = argumenter [0], tilbakeringing = argumenter [argumenter.lengde - 1]; denne.getText ("// ul [@class = 'alert alert-fare']/li [" + idx + "]", funksjon (err, e) {console.log ('Feil funnet:' + e); (e).should.be.equal ('Vennligst skriv inn etternavn');}). call (callback); }; // eksporter funksjonen module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Her er de spesifikke endringene som trengs for å kalle en gjenbrukbar funksjon

Se formFieldValidation.js for et komplett arbeidseksempel

// krever den gjenbrukbare kommandoen - CommonLib

common = require ('./ Common/CommonLib'); … // bind kommandoene driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); den ('skal inneholde 2 feil: fornavn/etternavn', funksjon () {// kall den gjenbrukbare funksjonsdriveren.verifyFirstNameError (1);.verifyLastNameError (2);});

• Prosjektfil/katalogstruktur:

  • Her er typisk prosjektstruktur:

    • "Prosjekt" - hovedprosjektkatalog

      • README.md - readme for globalt prosjekt

      • "Felles" - katalog for globale funksjoner som er felles for alle prosjekter

        • common -lib.js - globalt funksjonsbibliotek
        • README.md - readme for globale funksjoner

      • "Product1" - katalog for produkt 1

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

        • "Felles" - katalog for lokale funksjoner for prosjekt 1

          • prod1 -lib.js - lokalt funksjonsbibliotek for prosjekt 1
          • README.md - readme for lokale funksjoner til prosjekt 1

      • "Product2"-katalog for produkt 2test-script1.jstest-script2.js

        • "Felles" - katalog for lokale funksjoner for prosjekt 2

          • prod2 -lib.js - lokalt funksjonsbibliotek for prosjekt 2
          • README.md - readme for lokale funksjoner til prosjekt 2

• Del testskript i flere filer:

  • Her er et eksempel på bruk av flere filer:

    • Sanity Check - grunnleggende testskript for å kontrollere at alt fungerer
    • Statisk element og tekstvalidering - bekreft alle elementer og tekst
    • Skjema/sidefeil validering - feil validering
    • Søkeresultater - test dynamisk innhold

• Tilbakeringing VS. Løfter:

  • Versjon 3 av Web Driver IO støtter både tilbakeringing og løfter.

    Løfter er den foretrukne metoden siden den reduserer feilhåndteringskoden. Vennligst se det samme eksemplet nedenfor ved hjelp av tilbakeringinger og løfter.

Tilbakeringing

// Angi/bekreft fornavn/etternavn ved hjelp av tilbakeringing

it ('skal angi/bekrefte fornavn/etternavn ved hjelp av tilbakeringinger', funksjon (ferdig) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e); driver.setValue ("#lname", "Keith", funksjon (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Etternavn:" + e); done ();});});});});});

Løfter

// Angi/bekreft fornavn/etternavn ved hjelp av løfter

it ('skal angi/bekrefte fornavn/etternavn ved hjelp av Promises', funksjon () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). deretter (funksjon (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). deretter (funksjon (e) {(e).should.be.equal ("Keith"); console.log ("Etternavn:" + e);});});

Trinn 7: Flere ressurser

Her er noen ekstra ressurser som referanse:

• Diskusjonsgrupper (Gitter)

  • Web Driver IO diskusjonsgruppe
  • Mokka Diskusjonsgruppe

• Andre interessante prosjekter

  • Supertest - HTTP -påstander
  • Chai - påstander

Trinn 8: Konklusjon

Jeg brukte litt tid på å forske på teknologiene som skal brukes til prosjektet mitt. Jeg startet opprinnelig med Selenium Web Driver, men gikk over til å bruke Web Driver IO. Web Driver IO syntes å være lettere å bruke og mye lettere å utvide (i det minste dokumentasjonen for utvidelse - gjenbrukbare kommandoer var bedre).

Da jeg først begynte å se på teknologiene, var det vanskelig å finne gode eksempler som var i forhold til noe jeg prøvde å gjøre. Dette er grunnen til at jeg ønsket å dele denne informasjonen og kunnskapen med deg.

Teknologiene fungerte mye bedre enn jeg forventet, men det var en læringskurve involvert. Når jeg forsto hvordan alle komponentene fungerte sammen, klarte jeg å skrive kompliserte testskript på veldig kort tid. De vanskeligste skriptene var JavaScript -baserte komponenter som datovelger og modalvelgere.

Jeg har aldri merket meg selv som en JavaScript -utvikler, og jeg ville heller ikke være JavaScript -ekspert, men bruk av disse teknologiene har definitivt motivert meg til å skjerpe mine JS -ferdigheter.

Jeg håper denne artikkelen er nyttig og eksemplene er klare og informative.

Gi meg beskjed hvis du har spørsmål eller kommentarer.

Takk skal du ha, Tony Keith