Webillesztőprogram IO bemutatója Élő webhely használata és működő példák: 8 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Webes illesztőprogram IO bemutatója Élő webhely használata és működő példák

Utolsó frissítés: 2015.07.26

(Gyakran nézzen vissza, amikor frissítem ezt az utasításokat további részletekkel és példákkal)

Háttér

Nemrég egy érdekes kihívás elé kerültem. Be kellett vezetnem az automatizált tesztelést egy Q/A osztályra, nagyon kevés műszaki tapasztalattal és programozási háttérrel.

Ez valóban két (2) külön kihívás volt. Az első az automatizált teszteléshez szükséges technológiák azonosítása volt. A második a Q/A osztály képzése volt.

A cikk csak az alkalmazott technológiákkal és a folyamat során tanultakkal foglalkozik.

A technológiák jól működtek, de valóban keresnem kellett az információkat, és sok órát töltöttem a problémák megoldásával.

Nehezen találtam információt az interneten ezekről a technológiákról, amelyek együtt működnek.

Meg akartam osztani ezeket az információkat, ezért írtam ezt a cikket egy működő példa teszt szkripttel és egy teszt webhellyel együtt, amely ellen futtathatom a szkripteket.

Minden teszt szkript megtalálható a github webhelyen, a működő teszthely pedig a Web Driver IO Tutorial Test Site webhelyen található

Remélem, hasznosnak találja. Ha igen, kérem tudassa velem.

Technológiák:

• Tesztelje a weboldal működését
• Tesztelje a JavaScript működését
• Kézzel is futtatható
• Automatikusan futtatható
• Könnyen megtanulható nyelv a nem programozók számára

  Q/A személyzet alapvető HTML és JavaScript ismeretekkel

• Csak nyílt forráskódú szoftvert használjon

Technológiák

Az általam választott technológiák listája:

• mocha - tesztfuttató - végrehajtja a teszt szkripteket
• shouldjs - állítókönyvtár
• webdriverio - böngészővezérlő kötések (nyelvi kötések)
• szelén - böngésző absztrakció és futó gyár

• Böngésző/Mobil illesztőprogramok + böngészők

  • Firefox (csak böngészőben)
  • Chrome (böngésző és illesztőprogram)
  • IE (böngésző és illesztőprogram)
  • Safari (böngésző- és illesztőprogram-bővítmény)

1. lépés: Szoftver telepítése

A kezdéshez telepítenie kell a Node JS, a Web Driver IO, a Mocha, a Should és a Selenium önálló szervert.

Itt található a Windows 7 telepítési útmutatója.

(Mac/Linux felhasználó vagyok, de mindent telepítenem kellett a Windows 7 gépekre, ezért is adtam hozzá referenciaként. A Mac/Linux rendszerre történő telepítés folyamata hasonló. További információért olvassa el az online referenciákat. információ.)

Böngészőből:

• Telepítse a csomópontot, amely tartalmazza az NPM -t (Node Package Manager)
• menj a https://nodejs.org/ oldalra
  • Kattintson a telepítés gombra
  • Mentse és futtassa a fájlt
  • Az útvonal és a változó beállítása (NODE_PATH)
  • Lépjen a Vezérlőpult-> Rendszer és biztonság-> Rendszer menüpontra
    • Haladó rendszerbeállítások

    • Környezetbeállítás (felhasználói változók)

      • Hozzáadás a PATH -hoz

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

      • A NODE_PATH (rendszerváltozók) hozzáadása

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

Megjegyzés: Az alábbi szoftvert az npm globális beállításával (-g) telepítettem. Ez általában nem ajánlott, de ehhez a telepítéshez globálisan kellett telepítenem, mivel több projektben is használják.

Nyissa meg a parancssort (cmd):

(helyi felhasználói rendszergazda)

• Telepítse a szelén "webes illesztőprogramot IO"

  • npm telepítse a webdriverio -g

    Ezzel globálisan telepíti a webes illesztőprogramot az Ön gépére

• Telepítse a „mokka” tesztfuttató szoftvert

  • npm install mocha -g

    Ezzel globálisan telepíti a mokát a gépére

• Telepítse a „kellene” állítókönyvtárat

  • npm telepítés esetén a -g

    Ez globálisan telepíti a „kell” -t a gépére

• Telepítse a Selenium önálló szervert

  • Látogasson el a https://www.seleniumhq.org/download/ oldalra
  • Töltse le a jar fájlt, és lépjen a „szelén” könyvtárba.

• Telepítse a böngészőket és a böngésző illesztőprogramjait a teszteléshez

  • A cmd parancssorból:

    • Hozzon létre „szelén” könyvtárat
    • C: / Users {USERNAME} szelén

    • Parancsok:

      • cd C: / Users {USERNAME}
      • mkdir szelén

    • Firefox

      • Telepítse a Firefox böngészőt, ha még nincs telepítve.
      • Az útvonalat be kell állítani, hogy a Firefox parancssorból (cmd) indulhasson.

      • Vezérlőpult-> Rendszer és biztonság-> Rendszer

        • Haladó rendszerbeállítások
        • Környezetbeállítások
        • Hozzáadás (függelék használata, pontosvessző használata) az Útvonal változóhoz
        • C: / Program Files (x86) Mozilla Firefox
      • A Firefoxhoz nincs szükség speciális webes illesztőprogramra.

    • Króm

      • Telepítse a Chrome böngészőt, ha még nincs telepítve.
      • Az útvonal beállítható úgy, hogy a Chrome -ot parancssorból (cmd) indítsa el.
      • Először tesztelje: chrome.exe a parancssorból (cmd)
      • Ha a chrome nem indul el, akkor:

      • Vezérlőpult-> Rendszer és biztonság-> Rendszer

        • Haladó rendszerbeállítások
        • Környezetbeállítások
        • Adja hozzá (fűzze a pontosvessző használatához) az Útvonal változóhoz
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • A Chrome -hoz speciális internetes illesztőprogramra van szükség.

        Nyissa meg a chromium.org webhelyet, és csomagolja ki a 32 bites illesztőprogramot a „selenium” könyvtárba

    • Internet Explorer (csak Windows esetén - más platformokon nem működik)

      • Az IE -hez speciális webes illesztőprogramra van szükség.

        • Látogasson el a https://www.seleniumhq.org/download/ oldalra
        • Töltse le és csomagolja ki a 64 bites illesztőprogramot a „selenium” könyvtárba.

2. lépés: Alap teszt szkript

Kezdjük néhány alapozással.

Itt van egy egyszerű mokka szkript, amely megnyit egy webhelyet és ellenőrzi a címet.

// tutorial1.js

// // Ez egy egyszerű teszt szkript egy webhely megnyitásához és // cím ellenőrzéséhez. // szükséges könyvtárak var webdriverio = igényel ('webdriverio'), kéne = igényel ('kell'); // egy teszt szkript blokk vagy csomag leírása ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {// állítsa be az időtúllépést 10 másodpercre. timeout (10000); var driver = {}; // horog a tesztelés előtti futtatáshoz (függvény (kész) {// az illesztőprogram betöltése a böngésző -illesztőprogramhoz = webdriverio.remote ({kívánt képességek: {browserName: 'firefox'}}); driver.init (kész);}); // egy teszt specifikáció - "specifikáció" it ('a helyes oldal és cím betöltése legyen', function () {// az oldal betöltése, majd a függvény () visszahívása.url.html ') // kapjon címet, majd adja át a címet a ().getTitle () függvénynek. majd (funkció (cím) {// ellenőrizze a címet (cím). kell. "); // uncomment for console debug // console.log ('Aktuális oldal címe:' + cím);});}); // //" horog ", amely a blokk összes tesztje után fut (function (done) {driver.end (kész);});});

Megfigyelések:

• Először is észre kell vennie, hogy a teszt szkript JAVASCRIPT -ben van írva (.js kiterjesztéssel végződik).

• Az alapstruktúra szinte azonos minden teszt szkript esetében.

  • Fejléc megjegyzések (//)
  • Kötelező könyvtárak
  • Beállítások beállítása (opcionális)
  • Hook: Töltse be a böngésző illesztőprogramját
  • Tesztcsomag (leírás)
  • Teszt specifikációk (sok specifikáció lehet egy lakosztályban)
  • Horog: Tisztítsd meg

• A tesztcsomag egy leíró funkcióval kezdődik, amely két paramétert tartalmaz:

  • Karakterlánc - A tesztcsomag leírása
    • “Ellenőrizze az oldalt a megfelelő szóhasználatért”
    • „Ellenőrizze a választógomb működését”

  • függvény - végrehajtandó kódblokk

    leírás (‘Tesztcsomag leírása’, function () {});

• A tesztcsomag 1 vagy több teszt specifikációt tartalmaz (specifikáció)

• A specifikációk azzal a funkcióval kezdődnek, amely két paramétert tartalmaz:

  • Karakterlánc - A teszt specifikációjának leírása
    • "Helyes a link szövege és a link URL -je"
    • „Helyes szóhasználatot kell tartalmaznia (másolólap)
  • függvény - végrehajtandó kódblokk
  • it (‘A tesztleírás leírása’, function () {});
• A specifikáció egy vagy több elvárást tartalmaz, amelyek tesztelik a kód állapotát

• Ezeket állításoknak nevezik

  A „kell” könyvtár biztosítja az állításokat

• Szinte minden esetben meg kell találnia egy vagy több elemet egy választó segítségével, majd végre kell hajtania néhány műveletet az elem (ek) en

  • Példák:

    • Keressen szöveget az oldalon, és ellenőrizze a szöveget
    • Töltsön ki egy űrlapot és küldje el
    • Ellenőrizze egy elem CSS -jét

Nézzük meg közelebbről a példát megjegyzésekkel

Töltse be a szükséges könyvtárakat: webes illesztőprogram IO és kell.

// szükséges könyvtárak

var webdriverio = igényel ('webdriverio'), kéne = igényel ('kell');

Határozza meg a tesztcsomagot. Ennek a csomagnak a neve: "Címteszt a webes illesztőprogram IO -hoz - bemutató tesztoldal webhelye"

// teszt szkript blokk vagy csomag

leírás ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {…});

Állítsa az időtúllépést 10 másodpercre, hogy a szkript ne késlekedjen az oldal betöltésekor.

// állítsa be az időtúllépést 10 másodpercre

this.timeout (10000);

Kapcsolja be a böngésző illesztőprogramját a specifikációk "specifikációi" futtatása előtt. Ebben a példában a Firefox illesztőprogramja van betöltve.

// horog a vizsgálatok előtt

before (function (done) {// az illesztőprogram betöltése a böngésző -illesztőprogramhoz = webdriverio.remote ({kívánt képességek: {browserName: 'firefox'}}); driver.init (kész);});

Határozza meg a teszt specifikációját.

// egy teszt specifikáció - "specifikáció"

it ('helyes oldal és cím betöltése legyen', function () {…});

Töltse be a webhely oldalát

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

Szerezzen címet, majd adja át a címet a függvénynek ()

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

… });

Ellenőrizze a címet a should assertion könyvtár használatával.

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

Horog a kilépéshez és a meghajtó megtisztításához, ha befejezte.

// egy "horog" a blokk összes tesztje után

után (funkció (kész) {driver.end (kész);});

3. lépés: Futtassa a tesztszkriptet

Most nézzük meg, mit tesz a teszt szkript futtatásakor.

Először indítsa el a Selenium Stand Alone szervert:

• Windows esetén használja a parancssort (cmd):

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

• Mac vagy Linux esetén nyissa meg a terminált:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Lásd a fenti képernyőképet

Ezután futtassa a teszt szkriptet:

• Windows esetén használja a parancssort (cmd):

  • mohaachát
  • # mocha tutorial1.js

• Mac vagy Linux esetén nyissa meg a terminált:

  • mohaachát
  • $ mocha tutorial.js
• Lásd a fenti képernyőképet

Szóval mi történt?

Mocha meghívja a "tutorial1.js" szkriptet. Az illesztőprogram elindította a böngészőt (Firefox), betöltötte az oldalt és ellenőrizte a címet.

4. lépés: Példa webhelyre

Az összes példa ezzel az oldallal szemben fut.

A példa weboldal a következő címen található: Web Driver IO Tutorial Test Page

Minden teszt szkript letölthető a github webhelyről.

5. lépés: Konkrét példák

Minden kód elérhető a githubon: Web Driver IO Tutorial a githubon

• Ellenőrizze a linket és a link szövegét egy rendezetlen listában - "linkTextURL1.js"

  • A rendezetlen listának van egy, a link pedig a negyedik listaelem.
  • Az URL -cím legyen „https://tlkeith.com/contact.html”

// Kapcsolatfelvétel linkjének ellenőrzése

it ('tartalmaznia kell a Kapcsolatfelvétel link szövegét', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Link található:' + link); (link).should.equal ("Kapcsolatfelvétel");});}); // Verify Contact Us URL URL ('tartalmaznia kell a Contact Us URL -t', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href"). then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL found:' + link);});});

• Szerzői jogi szöveg ellenőrzése - "Copyright1.js"

  • Ez a példa kétféle módon mutatja be a szerzői jogi szöveget:

    • elemválasztóként
    • az xpath elemválasztóval

// A szerzői jogi szöveg ellenőrzése az id elemválasztóval

it ('tartalmaznia kell a szerzői jogi szöveget', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. egyenlő ("Tony Keith - tlkeith.com @ 2015 - Minden jog fenntartva.");});}); // Ellenőrizze a szerzői jogi szöveget az xpath elemválasztó segítségével ('tartalmaznia kell a szerzői jogi szöveget', function () {return driver.getText ("// lábléc/center/p"). Akkor (funkció (link) {console.log ('A szerzői jog megtalálva:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Minden jog fenntartva.");});});

• Töltse ki az űrlapmezőket és küldje el - "formFillSubmit1.js"

  • Írja be a keresztnevet, a vezetéknevet és küldje el, majd várja meg az eredményt.

  • Ez a példa 3 módszert mutat be a keresztnév beviteli mező kitöltésére:

    • azonosító szerint
    • xpath által a bemenetről
    • xpath által form-> input
  • Azt is bemutatja, hogyan kell törölni a beviteli mezőt

// Állítsa be a keresztnevet az id használatával: Tony

it ('a keresztnév beállítása Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Keresztnév:" + e);});}); // Törölje a keresztnevet az id it használatával ('törölnie kell a keresztnevet', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Keresztnév:" + e);});}); // Állítsa be a keresztnevet az xpath segítségével a bemenetről a következőre: Tony it ('az utónevet Tony -ra kell állítani', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);});}); // Törölje a keresztnevet az xpath használatával az it it ('törölje a keresztnevet', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First Name: " + e);});}); // Állítsa be a keresztnevet az xpath használatával az űrlapról a következőre: Tony it ('a keresztnév beállítása Tony', function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Then (function (e) {(e).should.be.equal ("Tony"); console.log ("Keresztnév:" + e);});}); // Állítsa be a vezetéknevet az id használatával: Keith it ('a vezetéknevet Keith -re kell állítani', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Majd (function (e) {(e).should.be.equal ("Keith"); console.log ("Vezetéknév:" + e);});}); // Küldje be az űrlapot, és várja meg a keresési eredményeket. Keresési űrlap elküldése ');}).waitForVisible ("#search-results", 10000). Then (function (e) {console.log (' Talált találatok ');});});

• Kattintson a Megjelenítés/elrejtés gombra, és ellenőrizze a szöveget - "showHideVerify1.js"

  • A szöveg egy show/hide elemben van. A gomb vezérli az állapotot.

  • Ez a példa ezt mutatja:

    • Kattintson a gombra a kibontáshoz
    • Várja meg, amíg az elem látható lesz (kibontva)
    • Szöveg ellenőrzése (másolólap)

// kattintson a "További információ" gombra, és ellenőrizze a szöveget a kibontott elemben

it ('kattintson a további információ gombra és ellenőrizze a szöveget', function () {return driver.click ("#moreinfo"). then (function () {console.log ('További információ gombra kattintva');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Itt minden jó megy!");});});

• Űrlapmező hibák ellenőrzése - "formFieldValidation.js"

  • Tesztparancsfájlok használatával ellenőrizze a helyes hibaüzenetek megjelenítését.

  • Ez a példa ezt mutatja:

    Ellenőrizze a hibaüzeneteket, és ellenőrizze a helyét (rendezetlen listahelyzet)

it ('5 hibát kell tartalmaznia: first/last/address/city/state', function () {

return driver.getText ("// ul [@class = 'alert alert-veszély']/li [1]"). then (function (e) {console.log ('Hiba található:' + e); (e).should.be.equal ('Kérjük, adja meg a keresztnevet');}).getText ("// ul [@class = 'alert alert-veszély']/li [2]"). akkor (függvény (e) {console.log ('Hiba található:' + e); (e).should.be.equal ('Kérjük, adja meg a vezetéknevet');}).getText ("// ul [@class = 'alert alert-veszély ']/li [3] "). then (funkció (e) {console.log (' Hiba található: ' + e); (e).should.be.equal (' Kérjük, adja meg a címet ');}). getText ("// ul [@class = 'alert alert-veszély']/li [4]"). then (function (e) {console.log ('Hiba található:' + e); (e). kell.be.equal ('Kérjük, adja meg a várost');}).getText ("// ul [@class = 'alert alert-veszély']/li [5]"). then (function (e) {console.log ('Hiba található:' + e); (e).should.be.equal ('Kérjük, írja be az állapotot');}); });

• Adatok hurkolása az URL -link/szöveg/oldal érvényesítéséhez - "LoopDataExample1.js"

  • Ez a példa ezt mutatja: JSON -adatok tömbjével tárolja a hivatkozást és a nevet, majd ismételje meg

    • Ellenőrizze az URL -címek szövegét és linkjét
    • Kattintson a linkre és töltse be az oldalt

// Linkadatok - link és szöveg

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 "}]; … // ciklus az egyes linkeken keresztül.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). majd (funkció (cím) {// ellenőrizze a címet (cím).should.be.equal ("Web Driver IO - Oktató tesztoldal ");}) // keresse meg a console.log ('URL található:' + d.link);}) // menjen az URL-oldalra és ellenőrizze, hogy létezik-e.katt ('a =' + d.name).waitForVisible ("#js-repo-pjax- container ", 10000). then (function () {console.log ('Github Page Found');});});});

• Statikus adatok hurkolása az űrlapmezők kitöltéséhez - "loopDataExample2.js"

  • Ez a példa ezt mutatja: Használjon JSON -adatok tömbjét a kereszt- és vezetéknév tárolására
    • Lépjen be az adatokba az űrlapmezők kitöltéséhez, majd küldje el az űrlapot
    • Várja meg az eredményoldalt
    • Ellenőrizze a kereszt- és vezetéknevet a találati oldalon

// adattömb - keresztnév és vezetéknévvar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // ciklus minden dataArray dataArray.forEach (function (d) {it ('mezőket kell kitöltenie, összegzési oldal', function () {return driver // győződjön meg arról, hogy a kezdőlapon van.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). majd (funkció (cím) {// ellenőrizze a címet (cím).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#fname"). then (function (e) {(e).should.be.equal (d.firstName); console.log ("Először Név: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName)); console.log ("Vezetéknév:" + e);}).submitForm ("#search-form"). majd (function () {console.log ('Keresési űrlap elküldése');}).waitForVisible ("#search-results", 10000). then (function () {console.log ('Talált oldal található');}).getText ("// h1"). then (function (link) {console.log ('A szöveg megtalálható:' + link); (link).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• CSS -tulajdonságok ellenőrzése - "cssValidation1.js"

  • Ez a példa bemutatja, hogyan:

    • Ellenőrizze a következő CSS -tulajdonságokat:

      • szín
      • párnázás (felső, alsó, jobb, bal)
      • háttérszín

it ('a hibaszöveg megfelelő színét kell tartalmaznia'), function () {return driver.getCssProperty ("// ul [@class = 'alert alert-veszély']/li [1]", "color"). akkor (function (eredmény) {console.log ('Talált szín:' + eredmény.parsed.hex + "vagy" + eredmény.érték); (result.parsed.hex).kell.be.equal ('#a94442'); });});

it ('helyes kitöltést kell tartalmaznia a táblázatcellában', function () {

return driver // padding: jobb felső, bal alsó.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top")). majd (function (result) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). then (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- right "). then (function (result) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). then (function (result) {console.log ('padding-left found: ' + eredmény.érték); (eredmény.érték).kell.be. egyenlő (' 5 képpont ');}); });

it ('helyes háttérszínt kell tartalmaznia a táblázat fejlécében', function () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). then (function (result) {console.log ('háttérszín található:' + result.parsed. hex); (result.parsed.hex).kell.be.equal ('#eeeeee');}); });

6. lépés: Tippek és trükkök

• Hibakeresés:

  • Kapcsolja be a naplózást az illesztőprogram szintjén a további hibakereséshez és a naplók létrehozásához.

    • A logLevel beállítása „részletes”
    • A logOutput beállítása könyvtárnévre ('naplók')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'naplók', {kívánt képességek: {browserName: 'firefox'}});

• Használja a console.log (), debug (), getText () hibakeresést.

  • console.log () - Információk megjelenítésére használható az állapot meghatározásához.
  • debug () - Használja a böngésző/szkript szüneteltetését, amíg a parancssorban le nem nyomja az enter billentyűt.

  • getText () - Használja annak ellenőrzésére, hogy a megfelelő elemmel lép -e kapcsolatba.

    Különösen hasznos az xpath kifejezéseknél

// Kattintson a 3. tételre a listából

it ('kattintson a 3. elemre a listából'), function () {// a getText () használatával ellenőrizze, hogy az xpath helyes -e az elem visszatérési illesztőprogramjához.getText ("// ul [@id = 'mylist']/li [3]/div/div/a ").) Majd (függvény (link) {// használja a console.log () -t az információ megjelenítéséhez console.log ('A link megtalálható:' + link); (link). Kell. Egyenlő ("3. tétel");}) // a debug () használatával állítsa le a műveletet, és nézze meg, mi történik a böngészőben.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link kattintva');}) // várjon, amíg megjelenik a Google keresési űrlap.waitForVisible ("#tsf", 20000). then (function (e) {console.log ('Talált találatok');});});

• A Környezeti változó használata a böngésző dinamikus megváltoztatásához:

  • A SELENIUM_BROWSER környezeti változó használatával hívjon meg egy másik böngészőt anélkül, hogy minden alkalommal módosítaná a teszt szkriptet.
  • A támogatáshoz kismértékű kódolási változtatásra van szükség.

Kódmódosítások:

// a böngésző illesztőprogramjának betöltése

driver = webdriverio.remote ({kívántCapability: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Támogatott böngészők:

• Internet Explorer - IE 8+ (csak Windows)

  SELENIUM_BROWSER = azaz mokka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = króm mokka

• Opera 12+

  SELENIUM_BROWSER = opera mokka

• Szafari

  SELENIUM_BROWSER = szafari mokka

Tesztelés:

• Windows esetén használja a git bash shell -t:

  • SELENIUM_BROWSER = króm mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Mac vagy Linux esetén nyissa meg a terminált:

  • SELENIUM_BROWSER = króm mokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Érzékeny tesztelés:

  • Határozza meg a töréspontokat projekt vagy keretrendszer (pl. Bootstrap) alapján.

  • Határozzon meg környezeti változókat minden törésponthoz:

    • Asztal - 1200 px
    • TABLETTA - 992 képpont
    • MOBIL - 768 px

  • Készítsen újrafelhasználható parancsot a környezeti változó olvasásához és a böngésző méretének beállításához.

    Lásd az alábbi példát

  • Hívja fel az újrafelhasználható parancsot a tesztszkriptben.

// újrafelhasználható kód - könyvtár // kódrészlet if (bp == "DESKTOP") {obj.width = 1200; obj.magasság = 600; obj.név = bp; } else if (bp == "TABLETTA") {obj.width = 992; obj.magasság = 600; obj.név = bp; } else if (bp == "MOBIL") {obj.width = 768; obj.magasság = 400; obj.név = bp; }

// Teszt szkript

before (funkció (kész) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // állítsa be az ablak méretét ('be kell állítani az ablak méretét', function (done) {// csak a szélesség számít driver.setWindowSize (winsize.width, winsize.height, function () {}). call (kész);});

• Újrahasználható parancsok (egyéni parancsok):

  • A Web Driver IO könnyen bővíthető.
  • Szeretem az összes újrafelhasználható parancsot egy könyvtárba helyezni. (Lehet, hogy ez régi iskola, de működik!)

common/commonLib.js

// ellenőrizzeLastNameCheckError ()

// // Leírás: // Ellenőrzi a vezetéknév űrlap érvényesítési hibaüzenetét // // Bemenet: // szám - hibaindex (1-5) // Kimenet: // nincs // var verziLastNameCheckError = function () { var idx = argumentumok [0], visszahívás = argumentumok [argumentum.length - 1]; this.getText ("// ul [@class = 'alert alert-veszély']/li [" + idx + "]", function (err, e) {console.log ('Hiba található:' + e); (e).should.be.equal ('Kérjük, adja meg a vezetéknevet');}).call (visszahívás); }; // exportálja a modul.exports.verifyLastNameCheckError = ellenőrizzeLastNameCheckError;

Íme az újrafelhasználható függvény meghívásához szükséges konkrét módosítások

Lásd formFieldValidation.js a teljes működési példát

// újrafelhasználható parancs szükséges - CommonLib

common = igényel ('./ Common/CommonLib'); … // kösse össze a driver.addCommand parancsokat ('ellenőrizzeFelsőnévError', common.verifyFirstNameCheckError.bind (illesztőprogram)); driver.addCommand ('ellenőrizzeLastNameError', common.verifyLastNameCheckError.bind (illesztőprogram)); it ('2 hibát kell tartalmaznia: kereszt/vezetéknév', function () {// meghívja az újrahasználható függvényillesztőt.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projekt fájl/könyvtár szerkezete:

  • Íme a projekt tipikus felépítése:

    • "Projekt" - a fő projektkönyvtár

      • README.md - readme for global project

      • "Közös" - könyvtár a globális funkciókhoz, amelyek közösek minden projektnél

        • common -lib.js - globális függvénykönyvtár
        • README.md - readme globális funkciókhoz
      • "Product1" - az 1. termék könyvtára
        • teszt-script1.js
        • teszt-script2.js

        • "Közös" - könyvtár az 1. projekt helyi funkcióihoz

          • prod1 -lib.js - helyi függvénykönyvtár az 1. projekthez
          • README.md - readme a helyi függvényekhez az 1. projekthez
      • "Product2"-a 2test-script1.jstest-script2.js termék könyvtára

        • "Közös" - könyvtár a 2. projekt helyi funkcióihoz

          • prod2 -lib.js - helyi függvénykönyvtár a 2. projekthez
          • README.md - readme a helyi függvényekhez a 2. projekthez

• A teszt szkripteket több fájlra bonthatja:

  • Íme egy példa több fájl használatára:

    • Épességi ellenőrzés - alap teszt szkript annak ellenőrzésére, hogy minden működik
    • Statikus elem és szöveg érvényesítése - ellenőrizze az összes elemet és szöveget
    • Űrlap/oldalhibák ellenőrzése - hibaellenőrzés
    • Keresési eredmények - tesztelje a dinamikus tartalmat

• Visszahívások VS. Ígéretek:

  • A Web Driver IO 3. verziója támogatja a visszahívásokat és az ígéreteket.

    Az ígéretek az előnyben részesített módszer, mivel csökkenti a hibakezelési kódot. Lásd alább ugyanazt a példát, amelyet visszahívások és ígéretek segítségével írtak.

Visszahívások

// Állítsa be/ellenőrizze a kereszt- és vezetéknevet a Visszahívás használatával

it ('állítsa be/ellenőrizze a kereszt- és vezetéknevet visszahívások használatával', function (kész) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).kell.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("#lname", "Keith", function (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Vezetéknév:" + e); done ();});});});});});

Ígéretek

// Állítsa be/ellenőrizze a kereszt-/vezetéknevet az Ígéretek használatával

it ('be kell állítania/ellenőriznie kell a kereszt- és vezetéknevet az ígéretek használatával', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).kell.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). akkor (függvény (e) {(e).kell.be.equal ("Keith"); console.log ("Vezetéknév:" + e);});});

7. lépés: További források

Íme néhány további forrás a referenciaként:

• Vitacsoportok (Gitter)

  • Web Driver IO vitacsoport
  • Mocha Vitacsoport

• Egyéb érdekes projektek

  • Supertest - HTTP állítások
  • Chai - állítások

8. lépés: Következtetés

Egy kis időt töltöttem a projektemhez használható technológiák kutatásával. Eredetileg a Selenium Web Driver programmal kezdtem, de áttértem a Web Driver IO használatára. Úgy tűnt, hogy a Web Driver IO -t könnyebb használni és sokkal könnyebb kiterjeszteni (legalábbis a kiterjesztés dokumentációja - az újrafelhasználható parancsok jobbak voltak).

Amikor először kezdtem el nézni a technológiákat, nehéz volt jó példákat találni, amelyek viszonyítottak ahhoz, amit megpróbáltam. Ezért akartam megosztani veletek ezt az információt és tudást.

A technológiák sokkal jobban működtek, mint amire számítottam, de tanulási görbe is volt. Miután megértettem, hogy az összes összetevő hogyan működik együtt, nagyon rövid idő alatt képes voltam bonyolult teszt szkripteket írni. A legnehezebb szkriptek a JavaScript -alapú összetevők voltak, mint például a dátumválasztó és a modális választók.

Soha nem jelöltem magam JavaScript fejlesztőnek, és nem is akartam JavaScript szakértő lenni, de ezeknek a technológiáknak a használata határozottan motivált arra, hogy továbbfejlesszem JS készségeimet.

Remélem, hogy ez a cikk hasznos lesz, és a példák világosak és informatívak.

Kérjük, tudassa velem, ha bármilyen kérdése vagy megjegyzése van.

Köszönöm, Tony Keith