Webdriver IO -vejledning Brug af et live websted og arbejdseksempler: 8 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

Webdriver IO -vejledning ved hjælp af et live websted og arbejdseksempler

Sidste opdatering: 2015-07-26

(Kom ofte tilbage, når jeg opdaterer denne instruktion med flere detaljer og eksempler)

Baggrund

Jeg fik for nylig en interessant udfordring præsenteret for mig. Jeg havde brug for at introducere automatiseret test til en Q/A -afdeling med meget lidt teknisk erfaring og ingen programmeringsbaggrund.

Dette var virkelig to (2) separate udfordringer. Den første var at identificere teknologierne til at udføre den automatiserede test. Den anden var at træne Q/A -afdelingen.

Artiklen vil kun behandle de anvendte teknologier og det, jeg lærte i processen.

Teknologierne fungerede godt, men jeg var virkelig nødt til at søge efter information og brugte mange timer på at finde ud af problemer.

Jeg havde svært ved at finde information på Internettet om disse teknologier, der alle arbejder sammen.

Jeg ville dele disse oplysninger, så jeg skrev denne artikel sammen med eksempler på test scripts og et testwebsted til at køre scripts mod.

Alle test scripts kan findes på github, og arbejdsteststedet er placeret på Web Driver IO Tutorial Test Site

Jeg håber, at du finder det nyttigt. Lad mig vide det, hvis du gør det.

Mål Brug teknologier til:

• Test webstedets funktionalitet
• Test JavaScript -funktionalitet
• Kan køres manuelt
• Kan køre automatisk

• Let at lære sprog for ikke -programmører

  Q/A -personale med grundlæggende viden om HTML og JavaScript

• Brug kun Open Source -software

Teknologier

Liste over teknologier, jeg vælger:

• mocha - test runner - udfører test scripts
• shouldjs - påstandsbibliotek
• webdriverio - browser kontrol bindinger (sprog bindinger)
• selen - browserabstraktion og kørende fabrik

• Browser/mobildrivere + browsere

  • Firefox (kun browser)
  • Chrome (browser og driver)
  • IE (browser og driver)
  • Safari (browser og driver-plug-in)

Trin 1: Softwareinstallation

For at komme i gang skal du have Node JS, Web Driver IO, Mocha, Should og Selenium stand alone server installeret.

Her er installationsvejledning til Windows 7.

(Jeg er en Mac/Linux -bruger, men jeg var nødt til at installere alt på Windows 7 -maskiner, det er derfor, jeg har inkluderet det til din reference. Proceduren for installation af en Mac/Linux er den samme. Se online referencer for mere Information.)

Fra en browser:

• Installer Node, som inkluderer NPM (Node Package Manager)

• gå til

  • Klik på installer
  • Gem og kør fil
  • Indstil stien og variablen (NODE_PATH)

  • Gå til Kontrolpanel-> System og sikkerhed-> System

    • Avancerede systemindstillinger

    • Miljøindstilling (brugervariabler)

      • Føj til PATH

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

      • Tilføj NODE_PATH (systemvariabler)

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

Bemærk: Jeg installerede al software herunder ved hjælp af npm global option (-g). Dette anbefales normalt ikke, men for denne installation var jeg nødt til at installere globalt, da det ville blive brugt på tværs af flere projekter.

Åbn kommandoprompt (cmd):

(lokal brugeradministrator)

• Installer selen "web driver IO"

  • npm installer webdriverio -g

    Dette installerer web driver IO globalt på din maskine

• Installer “mocha” test runner software

  • npm installer mocha -g

    Dette installerer mokka globalt på din maskine

• Installer “should” påstandsbibliotek

  • npm installere skal -g

    Dette installerer "burde" globalt på din maskine

• Installer Selenium Stand Alone Server

  • Gå til
  • Download jar -filen, og flyt til "selen" -mappen.

• Installer browsere og browserdrivere til at teste med

  • Fra cmd prompt:

    • Opret "selen" bibliotek
    • C: / Users {USERNAME} selen

    • Kommandoer:

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

    • Firefox

      • Installer Firefox -browser, hvis den ikke allerede er installeret.
      • Stien skal indstilles til at starte Firefox fra kommandoprompten (cmd).

      • Kontrolpanel-> System og sikkerhed-> System

        • Avancerede systemindstillinger
        • Miljøindstillinger
        • Tilføj (tilføj brug semikolon) til Path Variable
        • C: / Program Files (x86) Mozilla Firefox
      • Der kræves ingen særlig webdriver til Firefox.

    • Chrome

      • Installer Chrome -browser, hvis den ikke allerede er installeret.
      • Stien KAN indstilles til at starte Chrome fra kommandoprompt (cmd).
      • Test først: chrome.exe fra kommandoprompten (cmd)
      • Hvis krom ikke starter så:

      • Kontrolpanel-> System og sikkerhed-> System

        • Avancerede systemindstillinger
        • Miljøindstillinger
        • Tilføj (tilføj brug semikolon) til Path Variable
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • En særlig webdriver er nødvendig til Chrome.

        Gå til chromium.org, og pak 32 bit driver ud i "selen" biblioteket

    • Internet Explorer (kun til Windows - fungerer ikke på andre platforme)

      • En særlig webdriver er nødvendig til IE.

        • Gå til
        • Download og pak 64 bit driver ud i "selen" biblioteket.

Trin 2: Grundlæggende test script

Lad os starte med nogle grundlæggende.

Her er et simpelt mokka -script, der åbner et websted og bekræfter titlen.

// tutorial1.js

// // Dette er et simpelt test script til at åbne et websted og // validere titel. // påkrævede biblioteker var webdriverio = require ('webdriverio'), should = require ('should'); // en testskriptblok eller suite beskriver ('Titeltest for webdriver IO - Tutorial testsidewebsted', funktion () {// indstil timeout til 10 sekunder this.timeout (10000); var driver = {}; // krog til at køre før test før (funktion (udført) {// indlæse driveren til browser driver = webdriverio.remote ({wantedCapabilities: {browserName: 'firefox'}}); driver.init (done);}); // en testspecifikation - "specifikation" den ('skal være indlæs korrekt side og titel', funktion () {// indlæse side, derefter kalde funktion () tilbage driver.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // få titel, og overfør derefter titel til function ().getTitle (). derefter (funktion (titel) {// verificer titel (titel).should.be.equal ("Web Driver IO - Tutorial Test Page "); // uncomment for console debug // console.log ('Current Pages Title:' + title);});}); // en" hook "til at køre efter alle tests i denne blok efter (funktion (udført)) {driver.end (done);});});

Observationer:

• Du skal først bemærke, at test scriptet er skrevet i JAVASCRIPT (ender med.js udvidelse).

• Grundstrukturen er næsten identisk for alle test scripts.

  • Overskriftskommentarer (//)
  • Påkrævede biblioteker
  • Indstil valgmuligheder (valgfrit)
  • Krog: Indlæs browserdriver
  • Test Suite (beskriv)
  • Testspecifikationer (kan være mange specifikationer i en suite)
  • Krog: Ryd op

• Testpakken begynder med en beskriv funktion, der tager to parametre:

  • String - Beskrivelse af testsuite

    • "Tjek siden for korrekt ordsprog"
    • "Bekræft betjening af radioknapper"

  • funktion - kodeblok, der skal udføres

    beskrive ('Beskrivelse af testsuite', funktion () {});

• Testpakken indeholder 1 eller flere testspecifikationer (specifikation)

• Specifikationer begynder med den funktion, der tager to parametre:

  • String - Beskrivelse af testspecifikation

    • "Skal være korrekt linktekst og linkwebadresse"
    • “Skal indeholde korrekt ord (kopidæk)
  • funktion - kodeblok, der skal udføres
  • it ('Beskrivelse af testspecifikation', funktion () {});
• En spec indeholder en eller flere forventninger, der tester kodenes tilstand

• Disse kaldes påstande

  "Bør" -biblioteket giver påstandene

• I næsten alle tilfælde skal du finde et eller flere elementer ved hjælp af en vælger og derefter udføre en handling på elementet / elementerne

  • Eksempler:

    • Find tekst på en side, og bekræft teksten
    • Udfyld en formular og indsend
    • Bekræft CSS for et element

Lad os se nærmere på eksemplet med kommentarer

Indlæs de nødvendige biblioteker: web driver IO og burde.

// påkrævede biblioteker

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

Definer testsuiten. Denne suite kaldes: "Titeltest for webdriver IO - selvstudietestsideside"

// en testscriptblok eller suite

beskrive ('Titeltest for Web Driver IO - Tutorial Test Page Website', funktion () {…});

Indstil timeout til 10 sekunder, så scriptet ikke timeout, når siden indlæses.

// indstil timeout til 10 sekunder

denne. timeout (10000);

Krog til at indlæse browserdriveren, før du kører specifikationerne "specifikationer". Firefox -driveren er indlæst i dette eksempel.

// krog til at køre før test

før (funktion (udført) {// indlæse driveren til browser driver = webdriverio.remote ({wantedCapabilities: {browserName: 'firefox'}}); driver.init (done);});

Definer testspecifikationen.

// en testspecifikation - "specifikation"

det ('skal indlæse korrekt side og titel', funktion () {…});

Indlæs hjemmesiden

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

Få titel, og overfør derefter titel til funktion ()

.getTitle (). derefter (funktion (titel) {

… });

Bekræft titlen ved hjælp af biblioteket med påstand om påstand.

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

Krog for at afslutte og rydde op i driveren, når den er færdig.

// en "krog" til at køre efter alle test i denne blok

efter (funktion (udført) {driver.end (udført);});

Trin 3: Kør testscriptet

Lad os nu se, hvad testscriptet gør, når det køres.

Start først Selenium Stand Alone Server:

• Brug Windows kommandolinje (cmd):

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

• For Mac eller Linux skal du åbne terminal:

  • java -jar
  • $ java -jar selen-server-standalone-2.46.0.jar
• Se skærmbillede ovenfor

Kør derefter test scriptet:

• Brug Windows kommandolinje (cmd):

  • mokka
  • # mokka tutorial1.js

• For Mac eller Linux skal du åbne terminal:

  • mokka
  • $ mocha tutorial.js
• Se skærmbillede ovenfor

Hvad skete der?

Mokka påberåber sig scriptet "tutorial1.js". Driveren startede browseren (Firefox), indlæste siden og bekræftede titlen.

Trin 4: Eksempel på websted

Alle eksemplerne køres mod dette websted.

Eksempelwebstedet er placeret på: Web Driver IO Tutorial Test Page

Alle test scripts kan downloades fra github.

Trin 5: Specifikke eksempler

Al kode er tilgængelig på github: Web Driver IO Tutorial på github

• Bekræft link og linktekst i en uordnet liste - "linkTextURL1.js"

  • Den uordnede liste har en og linket er det 4. listeelement.
  • Webadressen skal være "https://tlkeith.com/contact.html"

// Bekræft Kontakttekst -linktekst

det ('skal indeholde Kontakt os linktekst', funktion () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). derefter (funktion (link) {konsol.log ('Link fundet:' + link); (link).should.equal ("Kontakt os");});}); // Bekræft Kontakt os URL det ('skal indeholde Kontakt os URL', funktion () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (funktion (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL fundet:' + link);});});

• Bekræft ophavsretstekst - "Copyright1.js"

  • Ophavsretten er i sidefoden Dette eksempel viser 2 forskellige måder at lokalisere ophavsretsteksten på:

    • med elementelektoren
    • ved at bruge xpath som elementvælgeren

// Bekræft ophavsretstekst ved hjælp af id som elementvælger

det ('skal indeholde ophavsretstekst', funktion () {return driver.getText ("#copyright"). derefter (funktion (link) {console.log ('Copyright fundet:' + link); (link).should. lige ("Tony Keith - tlkeith.com @ 2015 - Alle rettigheder forbeholdt.");});}); // Bekræft ophavsretstekst ved hjælp af xpath som elementvælger den ('skal indeholde ophavsretstekst', funktion () {returdriver.getText ("// sidefod/center/p"). Derefter (funktion (link) {console.log ('Copyright fundet:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Alle rettigheder forbeholdt.");});});

• Udfyld formularfelter og indsend - "formFillSubmit1.js"

  • Udfyld fornavn, efternavn og indsend, og vent derefter på resultater.

  • Dette eksempel viser 3 metoder til at udfylde indtastningsfeltet med fornavn:

    • af id
    • af xpath fra input
    • ved xpath fra form-> input
  • Viser også, hvordan man sletter et inputfelt

// Indstil fornavnet ved hjælp af id til: Tony

det ('skal angive fornavn til Tony', funktion () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). derefter (funktion (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Ryd fornavnet ved hjælp af id it ('skal rydde fornavn', funktion () {return driver.clearElement ("#fname").getValue ("#fname"). Derefter (funktion (e) {(e).should.be.equal (""); console.log ("Fornavn:" + e);});}); // Indstil fornavnet ved hjælp af xpath fra input til: Tony it ('skulle angive fornavn til Tony', funktion () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). derefter (funktion (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Ryd fornavnet ved hjælp af xpath fra input det ('skal rydde fornavn', funktion () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). derefter (funktion (e) {(e).should.be.equal (" "); console.log (" Fornavn: " + e);});}); // Indstil fornavnet ved hjælp af xpath fra formular 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] "). Derefter (funktion (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);});}); // Indstil efternavnet ved hjælp af id til: Keith it ('should set last name to Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Derefter (funktion (e) {(e).should.be.equal ("Keith"); console.log ("Efternavn:" + e);});}); // Send formular og vent på søgeresultater den ('skal indsende formular og vente på resultater', function () {return driver.submitForm ("#search-form"). Derefter (funktion (e) {console.log (' Send søgeformular ');}).waitForVisible ("#søgeresultater", 10000). Derefter (funktion (e) {console.log (' Søgeresultater fundet ');});});

• Klik på Vis/skjul knap og bekræft tekst - "showHideVerify1.js"

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

  • Dette eksempel viser:

    • Klik på knappen for at udvide
    • Vent på, at elementet er synligt (udvidet)
    • Bekræft tekst (kopidæk)

// klik på knappen "Flere oplysninger", og bekræft teksten i det udvidede element

det ('skal klikke på mere info -knap og bekræfte tekst', funktion () {return driver.click ("#moreinfo"). derefter (function () {console.log ('Clicked More Info button');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). derefter (funktion (e) {console.log ('Text:' + e); (e).should.be.equal ("Alt godt går her!");});});

• Valider formularfejl - "formFieldValidation.js"

  • Brug test scripts til at kontrollere, at korrekte fejlmeddelelser er produceret.

  • Dette eksempel viser:

    Bekræft fejlmeddelelserne, og bekræft placering (uordnet listeposition)

det ('skal indeholde 5 fejl: første/sidste/adresse/by/stat', funktion () {

return driver.getText ("// ul [@class = 'alert alert-fare']/li [1]"). derefter (funktion (e) {console.log ('Fejl fundet:' + e); (e).should.be.equal ('Indtast venligst fornavn');}).getText ("// ul [@class = 'alert alert-fare']/li [2]"). derefter (funktion (e) {console.log ('Fejl fundet:' + e); (e).should.be.equal ('Indtast venligst efternavn');}).getText ("// ul [@class = 'alert alert-fare ']/li [3] "). derefter (funktion (e) {console.log (' Fundet fejl: ' + e); (e).should.be.equal (' Indtast venligst adresse ');}). getText ("// ul [@class = 'alert alert-fare']/li [4]"). derefter (funktion (e) {console.log ('Error found:' + e); (e).should.be.equal ('Indtast venligst by');}).getText ("// ul [@class = 'alert alert-fare']/li [5]"). derefter (funktion (e) {console.log ('Fejl fundet:' + e); (e).should.be.equal ('Angiv venligst tilstand');}); });

• Looping -data til validering af URL -link/tekst/side - "LoopDataExample1.js"

  • Dette eksempel viser: Brug et array af JSON -data til at gemme linket og navnet, og gentag derefter

    • Bekræft hver URL -tekst og -link
    • Klik på linket og indlæs siden

// Link data - link 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øjfe gennem hver linkArray linkArray.forEach (funktion (d) {it ('skal indeholde tekst/link og derefter gå til side -' + d.navn, funktion () {return driver // sørg for at du er på startsiden.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). derefter (funktion (titel) {// verificer titel (titel).should.be.equal ("Web Driver IO - Tutorial Test Page ");}) // find URL'en.getAttribute ('a =' + d.navn," href "). Derefter (funktion (link) {(link).should.equal (d.link); console.log ('URL fundet:' + d.link);}) // gå til URL-siden og kontroller, at den findes. klik ('a =' + d.name).waitForVisible ("#js-repo-pjax- container ", 10000).then (funktion () {console.log ('Github -side fundet');});});});

• Looping af statiske data for at udfylde formularfelter - "loopDataExample2.js"

  • Dette eksempel viser: Brug en matrix med JSON -data til at gemme for-/efternavn

    • Gennemgå dataene for at udfylde formularfelter, og indsend derefter formularen
    • Vent på resultatsiden
    • Bekræft for- / efternavn på resultatsiden

// data array - fornavn og lastNamevar dataArray = [{"fornavn": "Tony", "efternavn": "Keith"}, {"fornavn": "John", "efternavn": "Doe"}, {"fornavn ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // gå gennem hver dataArray dataArray.forEach (funktion (d) {it ('skal udfylde felter, sumbit side', funktion () {return driver // sørg for at du er på startsiden.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). derefter (funktion (titel) {// verificer titel (titel).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#fname"). derefter (funktion (e) {(e).should.be.equal (d.firstName); console.log ("First Navn: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Derefter (funktion (e) {(e).should.be.equal (d.lastName); console.log ("Efternavn:" + e);}).submitForm ("#search-form"). derefter (funktion () {console.log ('Submit Search Form');}).waitForVisible ("#søgeresultater", 10000).then (funktion () {console.log ('Resultatside fundet');}).getText ("// h1"). derefter (funktion (link) {console.log ('Tekst fundet:' + link); (link).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Valider CSS -egenskaber - "cssValidation1.js"

  • Dette eksempel viser, hvordan du:

    • Valider følgende CSS -egenskaber:

      • farve
      • polstring (top, bund, højre, venstre)
      • baggrundsfarve

det ('skal indeholde korrekt farve af fejltekst', funktion () {return driver.getCssProperty ("// ul [@class = 'alert alert-fare']/li [1]", "color"). derefter (funktion (resultat) {console.log ('Farve fundet:' + result.parsed.hex + "eller" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

det ('skal indeholde korrekt polstring i tabelcelle', funktion () {

returdriver // polstring: øverst til højre nederst til venstre.getCssProperty ("// tabel [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). derefter (funktion (resultat) {console.log ('padding-top fundet:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). derefter (funktion (resultat) {console.log ('padding-bottom fundet:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- højre "). derefter (funktion (resultat) {console.log ('padding-right fundet:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// tabel [@id = 'filelist']/thead/tr [1]/td [1]", "polstring-venstre"). derefter (funktion (resultat) {console.log ('padding-venstre fundet: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

det ('skal indeholde den korrekte baggrundsfarve i tabeloverskriften', funktion () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Trin 6: Tips og tricks

• Debugging:

  • Tænd logning på førerniveau for mere fejlfinding og for at oprette logfiler.

    • Indstil logLevel til 'verbose'
    • Indstil logOutput til biblioteksnavn ('logfiler')

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

• Brug console.log (), debug (), getText () til fejlfinding.

  • console.log () - Bruges til at vise oplysninger for at bestemme tilstand.
  • debug () - Brug pause browser/script, indtil der trykkes på enter på kommandolinjen.

  • getText () - Brug til at kontrollere, at du interagerer med det korrekte element.

    Især nyttigt med xpath -udtryk

// Klik på punkt 3 fra listen

det ('skal klikke på element 3 fra listen', funktion () {// brug getText () til at kontrollere, at xpath er korrekt for elementreturdriveren.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Derefter (funktion (link) {// brug console.log () til at sende information console.log ('Link fundet:' + link); (link).should.equal ("Item 3");}) // brug debug () til at stoppe handling for at se, hvad der sker i browseren.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('link klikket');}) // vent på, at google søgeformular vises.waitForVisible ("#tsf", 20000).then (funktion (e) {console.log ('Søgeresultater fundet');});});

• Brug miljøvariabel til at ændre browseren dynamisk:

  • Brug miljøvariabel SELENIUM_BROWSER til at påberåbe en anden browser uden at ændre testscriptet hver gang.
  • Kræver en lille kodningsændring for at understøtte.

Kodeændringer:

// indlæs driveren til browseren

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

Understøttede browsere:

• Internet Explorer - IE 8+ (kun 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

Test:

• Brug Windows git bash shell til Windows:

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

• For Mac eller Linux skal du åbne terminal:

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

• Responsiv testning:

  • Bestem breakpoints baseret på projekt eller ramme (dvs. bootstrap).

  • Definer miljøvariabler for hvert breakpoint:

    • BORDBORD - 1200 px
    • TABLET - 992 px
    • MOBIL - 768 px

  • Udvikl en genanvendelig kommando til at læse miljøvariablen og indstille browserstørrelsen.

    Se eksempel herunder

  • Ring til den genanvendelige kommando i dit test script.

// genanvendelig kode - bibliotek // kodestykke hvis (bp == "DESKTOP") {obj.width = 1200; obj. højde = 600; obj.name = bp; } ellers hvis (bp == "TABLET") {obj.width = 992; obj. højde = 600; obj.name = bp; } ellers hvis (bp == "MOBILE") {obj.width = 768; obj. højde = 400; obj.name = bp; }

// Test script

før (funktion (udført) {winsize = common.getWindowSizeParams (); … driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // indstil vinduesstørrelsen den ('skal angive vinduesstørrelse', funktion (udført) {// kun bredden er vigtig for driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Genanvendelige kommandoer (brugerdefinerede kommandoer):

  • Web Driver IO kan let udvides.
  • Jeg kan godt lide at lægge alle genanvendelige kommandoer i et bibliotek. (måske er dette old school, men det virker!)

fælles/commonLib.js

// verificerLastNameCheckError ()

// // Beskrivelse: // Verificerer fejlmeddelelse om efternavnformularvalidering // // Input: // nummer - fejlindeks (1-5) // Output: // ingen // var verificerLastNameCheckError = funktion () { var idx = argumenter [0], tilbagekald = argumenter [argumenter.længde - 1]; denne.getText ("// ul [@class = 'alert alert-fare']/li [" + idx + "]", funktion (fejl, e) {console.log ('Fejl fundet:' + e); (e).should.be.equal ('Indtast venligst efternavn');}). call (callback); }; // eksporter funktionen module.exports.verifyLastNameCheckError = verificerLastNameCheckError;

Her er de specifikke ændringer, der er nødvendige for at kalde en genanvendelig funktion

Se formFieldValidation.js for et komplet arbejdseksempel

// kræver den genanvendelige kommando - CommonLib

common = require ('./ Common/CommonLib'); … // bind kommandoerne driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); det ('skal indeholde 2 fejl: fornavn/efternavn', funktion () {// kalder genbrugerfunktionsdriveren.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projektfil/biblioteksstruktur:

  • Her er typisk projektstruktur:

    • "Projekt" - hovedprojektmappe

      • README.md - readme til globalt projekt

      • "Fælles" - bibliotek for globale funktioner, der er fælles for alle projekter

        • common -lib.js - globalt funktionsbibliotek
        • README.md - readme til globale funktioner

      • "Produkt1" - bibliotek for produkt 1

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

        • "Fælles" - bibliotek for lokale funktioner til projekt 1

          • prod1 -lib.js - lokalt funktionsbibliotek til projekt 1
          • README.md - readme til lokale funktioner til projekt 1

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

        • "Fælles" - bibliotek for lokale funktioner til projekt 2

          • prod2 -lib.js - lokalt funktionsbibliotek til projekt 2
          • README.md - readme til lokale funktioner til projekt 2

• Del test scripts i flere filer:

  • Her er et eksempel på brug af flere filer:

    • Sanity Check - grundlæggende test script til at kontrollere, at alt fungerer
    • Statisk element og tekstvalidering - verificer alle elementer og tekst
    • Form/sidefejlvalidering - fejlvalidering
    • Søgeresultater - test dynamisk indhold

• Tilbagekald VS. Løfter:

  • Version 3 af Web Driver IO understøtter både tilbagekald og løfter.

    Løfter er den foretrukne metode, da det reducerer fejlhåndteringskoden. Se venligst det samme eksempel skrevet ved hjælp af tilbagekald og løfter.

Tilbagekald

// Indstil/bekræft for-/efternavn ved hjælp af tilbagekald

it ('skal angive/verificere for-/efternavn ved hjælp af tilbagekald', funktion (udført) {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", funktion (e) { driver.getValue ("#lname", funktion (fejl, e) {(e).should.be.equal ("Keith"); console.log ("Efternavn:" + e); done ();});});});});});

Løfter

// Indstil/bekræft for-/efternavn ved hjælp af løfter

it ('skal angive/verificere for-/efternavn ved hjælp af løfter', funktion () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). derefter (funktion (e) {(e).should.be.equal ("Tony"); console.log ("Fornavn:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). derefter (funktion (e) {(e).should.be.equal ("Keith"); console.log ("Efternavn:" + e);});});

Trin 7: Flere ressourcer

Her er nogle yderligere ressourcer til din reference:

• Diskussionsgrupper (Gitter)

  • Web Driver IO Diskussionsgruppe
  • Mokka Diskussionsgruppe

• Andre interessante projekter

  • Supertest - HTTP -påstande
  • Chai - påstande

Trin 8: Konklusion

Jeg brugte noget tid på at undersøge de teknologier, der skulle bruges til mit projekt. Jeg startede oprindeligt med Selenium Web Driver, men skiftede til at bruge Web Driver IO. Web Driver IO syntes at være lettere at bruge og meget lettere at udvide (i det mindste dokumentationen til udvidelse - genanvendelige kommandoer var bedre).

Da jeg først begyndte at se på teknologierne, var det svært at finde gode eksempler, der var i forhold til noget, jeg forsøgte at gøre. Dette er grunden til, at jeg ønskede at dele denne information og viden med dig.

Teknologierne fungerede meget bedre end jeg forventede, men der var en indlæringskurve involveret. Når jeg forstod, hvordan alle komponenterne fungerede sammen, var jeg i stand til at skrive komplicerede test scripts på meget kort tid. De sværeste scripts var JavaScript -baserede komponenter såsom en datovælger og modal selectors.

Jeg har aldrig mærket mig selv som en JavaScript -udvikler, og jeg ville heller ikke alle være JavaScript -ekspert, men brug af disse teknologier har helt sikkert motiveret mig til at skærpe mine JS -færdigheder.

Jeg håber, at denne artikel er nyttig, og eksemplerne er klare og informative.

Lad mig vide, hvis du har spørgsmål eller kommentarer.

Tak skal du have, Tony Keith