Výučba IO webového ovládača pomocou živého webu a pracovných príkladov: 8 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Výukový program IO pre webový ovládač pomocou živého webového servera a pracovných príkladov

Posledná aktualizácia: 26. 7. 2015

(Pri aktualizácii týchto pokynov s ďalšími podrobnosťami a príkladmi sa sem často vracajte.)

Pozadie

Nedávno mi bola predložená zaujímavá výzva. Potreboval som zaviesť automatizované testovanie na oddelenie Q/A s veľmi malými technickými skúsenosťami a bez znalosti programovania.

Toto boli skutočne dve (2) samostatné výzvy. Prvým bolo identifikovať technológie na vykonanie automatizovaného testovania. Druhým bolo školenie oddelenia Q/A.

Článok sa bude zaoberať iba použitými technológiami a tým, čo som sa v procese naučil.

Technológie fungovali dobre, ale naozaj som musel hľadať informácie a strávil som mnoho hodín riešením problémov.

Na internete som ťažko hľadal informácie o týchto technológiách, ktoré všetky spolupracovali.

Chcel som sa podeliť o tieto informácie, a preto som napísal tento článok spolu s pracovnými ukážkovými testovacími skriptmi a testovacou webovou stránkou, proti ktorej skripty spustíte.

Všetky testovacie skripty nájdete na github a funkčné testovacie stránky sa nachádzajú na testovacom webe Web Driver IO Tutorial Test Site

Dúfam, že vám to bude užitočné. Ak áno, dajte mi prosím vedieť.

Ciele Technológie používajte na:

• Otestujte funkčnosť webových stránok
• Otestujte funkciu JavaScript
• Dá sa spustiť ručne
• Dá sa spustiť automaticky

• Ľahko sa učiaci jazyk pre neprogramátorov

  Q/A personál so základnými znalosťami HTML a JavaScript

• Používajte iba softvér s otvoreným zdrojovým kódom

Technológie

Zoznam technológií, ktoré si vyberám:

• moka - testovací bežec - spustí testovacie skripty
• shouldjs - knižnica tvrdení
• webdriverio - väzby ovládania prehliadača (jazykové väzby)
• selén - abstrakcia prehliadača a spustená továreň

• Ovládače prehliadača/mobilných zariadení + prehliadače

  • Firefox (iba prehliadač)
  • Chrome (prehliadač a ovládač)
  • IE (prehliadač a ovládač)
  • Safari (doplnok prehliadača a ovládača)

Krok 1: Inštalácia softvéru

Na začiatok musíte mať nainštalovaný samostatný server Node JS, Web Driver IO, Mocha, Should a Selenium.

Tu sú pokyny na inštaláciu systému Windows 7.

(Som používateľom systému Mac/Linux, ale všetko som musel nainštalovať na počítače so systémom Windows 7, preto som ho uviedol ako referenciu. Postup inštalácie na počítačoch Mac/Linux je podobný. Ďalšie informácie nájdete v online referenciách informácie.)

Z prehliadača:

• Nainštalujte Node, ktorý obsahuje NPM (Node Package Manager)
• choďte na
  • Kliknite na inštaláciu
  • Uložte a spustite súbor
  • Nastaviť cestu a premennú (NODE_PATH)

  • Prejdite na Ovládací panel-> Systém a zabezpečenie-> Systém

    • Rozšírené nastavenia systému

    • Nastavenie prostredia (používateľské premenné)

      • Pridať do PATH

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

      • Pridajte NODE_PATH (systémové premenné)

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

Poznámka: Nainštaloval som všetok softvér nižšie pomocou globálnej možnosti npm (-g). Obvykle sa to neodporúča, ale pre túto inštaláciu som musel nainštalovať globálne, pretože by sa používal vo viacerých projektoch.

Otvorte príkazový riadok (cmd):

(miestny správca používateľov)

• Nainštalujte selén „webový ovládač IO“

  • npm nainštalovať webdriverio -g

    Tým sa do vášho počítača nainštaluje globálne IO webového ovládača

• Nainštalujte si testovací bežecký softvér „moka“

  • npm install moka -g

    Tým sa mokka nainštaluje globálne do vášho počítača

• Nainštalujte si knižnicu tvrdení „malo by“

  • npm install by mal -g

    Tým sa do vášho počítača nainštaluje „malo by“globálne

• Nainštalujte server Selenium Stand Alone Server

  • Prejdite na stránku
  • Stiahnite si súbor jar a presuňte sa do adresára „selén“.

• Nainštalujte si na testovanie prehliadače a ovládače

  • Z výzvy cmd:

    • Vytvorte adresár „selén“
    • C: / Users {USERNAME} selenium

    • Príkazy:

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

    • Firefox

      • Nainštalujte si prehliadač Firefox, ak ešte nie je nainštalovaný.
      • Na spustenie programu Firefox z príkazového riadka (cmd) je potrebné nastaviť cestu.

      • Ovládací panel-> Systém a zabezpečenie-> Systém

        • Rozšírené nastavenia systému
        • Nastavenia prostredia
        • Pridajte (pripojte bodkočiarku) k premennej cesty
        • C: / Program Files (x86) Mozilla Firefox
      • Pre Firefox nie je potrebný žiadny špeciálny webový ovládač.

    • Chrome

      • Nainštalujte si prehliadač Chrome, ak ešte nie je nainštalovaný.
      • Cestu je možné nastaviť na spustenie prehliadača Chrome z príkazového riadka (cmd).
      • Najprv vyskúšajte: chrome.exe z príkazového riadka (cmd)
      • Ak sa prehliadač Chrome nespustí, postupujte takto:

      • Ovládací panel-> Systém a zabezpečenie-> Systém

        • Rozšírené nastavenia systému
        • Nastavenia prostredia
        • Pridajte (pripojte bodkočiarku) k premennej cesty
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Pre prehliadač Chrome je potrebný špeciálny webový ovládač.

        Prejdite na stránku chromium.org a rozbaľte 32 -bitový ovládač do adresára „selenium“

    • Internet Explorer (iba pre Windows - nebude fungovať na iných platformách)

      • Pre IE je potrebný špeciálny webový ovládač.

        • Prejdite na stránku
        • Stiahnite a rozbaľte 64 -bitový ovládač do adresára „selén“.

Krok 2: Základný testovací skript

Začnime niekoľkými základmi.

Tu je jednoduchý mokka skript, ktorý otvorí webovú stránku a overí názov.

// tutorial1.js

// // Toto je jednoduchý testovací skript na otvorenie webovej stránky a // overenie názvu. // povinné knižnice var webdriverio = require ('webdriverio'), should = require ('should'); // popis alebo blok testovacieho skriptu ('Test názvu pre webový ovládač IO - webová stránka s testovacími stránkami', funkcia () {// nastavenie časového limitu na 10 sekúnd this.timeout (10 000); var driver = {}; // spustite pred testami pred (funkcia (hotovo) {// načítajte ovládač pre prehliadač driver = webdriverio.remote ({desiredCapabilities: {browserName: 'firefox'}}); driver.init (done);}); // test špecifikácia - "špecifikácia" to ('malo by byť načítať správnu stránku a názov', function () {// načítať stránku, potom zavolať function () vrátiť ovládač.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // získajte nadpis, potom zadajte názov do funkcie ().getTitle (). potom (funkcia (nadpis) {// overenie nadpisu (nadpis).should.be.equal ("Webový ovládač IO - testovacia stránka výukového programu) "); // komentár pre ladenie konzoly // console.log ('Current Page Title:' + title);});})); //" hook ", ktorý sa spustí po všetkých testoch v tomto bloku po (funkcia (hotovo)) {driver.end (hotovo);});});

Pripomienky:

• Najprv by ste si mali všimnúť, že testovací skript je napísaný v jazyku JAVASCRIPT (končí príponou.js).

• Základná štruktúra je takmer rovnaká pre všetky testovacie skripty.

  • Komentáre k hlavičke (//)
  • Požadované knižnice
  • Nastaviť možnosti (voliteľné)
  • Háčik: Načítať ovládač prehliadača
  • Testovacia sada (popísať)
  • Testovacie špecifikácie (v súprave môže byť veľa špecifikácií)
  • Háčik: Upratovať

• Testovacia súprava začína funkciou popisu, ktorá má dva parametre:

  • Reťazec - Popis testovacej sady

    • „Skontrolujte správnu verbiu na stránke“
    • „Overenie činnosti prepínačov“

  • funkcia - blok kódu na vykonanie

    description ('Popis testovacej sady', funkcia () {});

• Testovacia súprava bude obsahovať 1 alebo viac špecifikácií testu (špecifikácia)

• Špecifikácie začínajú funkciou, ktorá má dva parametre:

  • Reťazec - Popis špecifikácie testu

    • „Mal by byť správny text odkazu a adresa URL odkazu“
    • „Malo by obsahovať správne sloveso (kopírovací balíček)
  • funkcia - blok kódu na vykonanie
  • it („Popis špecifikácie testu“, funkcia () {});
• Špecifikácia obsahuje jedno alebo viac očakávaní, ktoré testujú stav kódu
• Hovorí sa im tvrdenia

  Knižnica „by mala“poskytuje tvrdenia

• Takmer vo všetkých prípadoch budete musieť pomocou voliča vyhľadať jeden alebo viac prvkov a potom s prvkami vykonať nejakú operáciu.

  • Príklady:

    • Nájdite text na stránke a overte ho
    • Vyplňte formulár a odošlite ho
    • Overte CSS prvku

Pozrime sa podrobnejšie na príklad s komentármi

Načítajte požadované knižnice: webový ovládač IO a mal by.

// povinné knižnice

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

Definujte testovaciu sadu. Táto sada sa nazýva: "Test názvu pre webový ovládač IO - webová stránka testovacej stránky"

// blok alebo balík testovacích skriptov

popísať („Test názvu pre webový ovládač IO - webová stránka testovacej stránky s návodom“, funkcia () {…});

Nastavte časový limit na 10 sekúnd, aby skript nespustil časový limit pri načítaní stránky.

// nastavte časový limit na 10 sekúnd

this.timeout (10 000);

Pred spustením „špecifikácií“zaveste háčik a načítajte ovládač prehliadača. V tomto prípade je načítaný ovládač Firefoxu.

// háčik na spustenie pred testami

before (function (done) {// load the driver for browser driver = webdriverio.remote ({desiredCapabilities: {browserName: 'firefox'}}); driver.init (done);});

Definujte špecifikáciu testu.

// špecifikácia testu - „špecifikácia“

it ('by mala byť načítaná správna stránka a názov', funkcia () {…});

Načítajte webovú stránku

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

Získajte titul, potom zadajte názov, aby fungoval ()

.getTitle (). then (funkcia (názov) {

… });

Overte názov pomocou knižnice tvrdení by mal.

(názov).should.be.equal ("Web Driver IO - Tutorial Test Page");

Hák na ukončenie a vyčistenie ovládača po dokončení.

// "háčik" na spustenie po všetkých testoch v tomto bloku

after (funkcia (hotovo) {driver.end (hotovo);});

Krok 3: Spustite testovací skript

Teraz sa pozrime, čo testovací skript robí po spustení.

Najprv spustite server Selenium Stand Alone Server:

• V systéme Windows použite príkazový riadok (cmd):

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

• V systéme Mac alebo Linux otvorte terminál:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Pozri snímku obrazovky vyššie

Potom spustite testovací skript:

• V systéme Windows použite príkazový riadok (cmd):

  • moka
  • # moka tutorial1.js

• V systéme Mac alebo Linux otvorte terminál:

  • moka
  • $ mocha tutorial.js
• Pozri snímku obrazovky vyššie

Takže, čo sa stalo?

Mocha vyvolá skript „tutorial1.js“. Ovládač spustil prehliadač (Firefox), načítal stránku a overil názov.

Krok 4: Príklad webovej stránky

Všetky príklady sú uvedené proti tomuto webu.

Vzorová webová stránka sa nachádza na: Testovacia stránka výučby webového ovládača IO

Všetky testovacie skripty je možné stiahnuť z github.

Krok 5: Špecifické príklady

Celý kód je k dispozícii na github: Web Driver IO Tutorial na github

• Overte odkaz a text odkazu v neusporiadanom zozname - „linkTextURL1.js“

  • Neusporiadaný zoznam obsahuje položku a odkaz je 4. položkou zoznamu.
  • Adresa URL by mala byť „https://tlkeith.com/contact.html“

// Overenie Kontaktujte nás text odkazu

it ('should contain Contact Us text text', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Nájdený odkaz:' + odkaz); (odkaz).should.equal ("Kontaktujte nás");});}); // Overenie Kontaktujte nás URL adresa ('mala by obsahovať adresu URL Kontaktujte nás', funkcia () {vrátiť ovládač.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").potom (funkcia (odkaz) {(odkaz).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL nájdená:' + odkaz);});});

• Overiť autorský text - „Copyright1.js“

  • Autorské právo je v päte. Tento príklad ukazuje 2 rôzne spôsoby vyhľadania textu autorských práv:

    • pomocou voliča prvkov
    • pomocou xpath ako selektora prvkov

// Overte autorské práva pomocou ID ako selektora prvkov

it ('should contain Copyright text', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. rovný („Tony Keith - tlkeith.com @ 2015 - Všetky práva vyhradené.“);});}); // Overte text autorského práva pomocou xpath ako jeho selektora prvkov ('mal by obsahovať text autorského práva', function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Autorské právo nájdené:' + odkaz); (odkaz).should.equal ("Tony Keith - tlkeith.com @ 2015 - Všetky práva vyhradené.");});});

• Vyplňte polia formulára a odošlite ich - „formFillSubmit1.js“

  • Vyplňte krstné meno, priezvisko a odošlite, potom čakajte na výsledky.

  • Tento príklad ukazuje 3 spôsoby vypĺňania vstupného poľa krstného mena:

    • podľa id
    • xpath zo vstupu
    • xpath z form-> vstupu
  • Tiež ukazuje, ako vymazať vstupné pole

// Nastavte krstné meno pomocou id na: Tony

it ('should set first name to Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("krstné meno:" + e);});}); // Vymažte krstné meno pomocou id it ('by malo vymazať krstné meno', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Meno:" + e);});}); // Nastavte krstné meno pomocou xpath zo vstupu na: Tony it ('by malo nastaviť krstné meno na Tony', 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);});}); // Vymažte krstné meno pomocou xpath zo zadania ('by malo vymazať krstné meno', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// vstup [@name = 'fname'] "). then (function (e) {(e).should.be.equal (" "); console.log (" First name: " + e);});}); // Nastavte krstné meno pomocou xpath z formulára na: Tony it ('by malo nastaviť krstné meno na Tony', function () {return driver.setValue ("// form [@id = 'search-form']/vstup [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Potom (funkcia (e) {(e).should.be.equal ("Tony"); console.log ("Meno:" + e);});}); // Priezvisko nastavte pomocou id na: Keith it ('should set last name to Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Then (funkcia (e) {(e).should.be.equal ("Keith"); console.log ("Priezvisko:" + e);});}); // Odošlite formulár a počkajte na výsledky vyhľadávania ('by malo odoslať formulár a čakať na výsledky', function () {return driver.submitForm ("#search-form"). Then (function (e) {console.log (' Odoslať vyhľadávací formulár ');}).waitForVisible ("#search-results", 10 000). Potom (funkcia (e) {console.log (' Výsledky vyhľadávania nájdené ');});});

• Kliknite na tlačidlo Zobraziť/skryť a overte text - „showHideVerify1.js“

  • Text je v prvku Zobraziť/skryť. Tlačidlo ovláda stav.

  • Tento príklad ukazuje:

    • Rozbaľte kliknutím na tlačidlo
    • Počkajte, kým bude prvok viditeľný (rozbalený)
    • Overiť text (kopírovací balíček)

// kliknite na tlačidlo „Viac informácií“a overte text v rozbalenom prvku

it ('malo by kliknúť na tlačidlo viac informácií a overiť text', funkcia () {vrátiť ovládač.click ("#moreinfo"). potom (funkcia () {console.log ('kliknuté tlačidlo Viac informácií');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). then (function (e) {console.log ('Text:' + e); (e).should.be.equal („Všetko dobré sem!“);});});

• Overiť chyby poľa formulára - "formFieldValidation.js"

  • Na testovanie správnych chybových hlásení použite testovacie skripty.

  • Tento príklad ukazuje:

    Overte chybové textové správy a overte umiestnenie (neusporiadané umiestnenie zoznamu)

to („malo by obsahovať 5 chýb: prvá/posledná/adresa/mesto/štát“, funkcia () {

vrátiť ovládač.getText ("// ul [@class = 'alert alert-danger']/li [1]"). then (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Zadajte krstné meno');}).getText ("// ul [@class = 'alert alert-danger']/li [2]"). then (funkcia (e) {console.log ('Found found:' + e); (e).should.be.equal ('Zadajte priezvisko');}).getText ("// ul [@class = 'výstraha výstraha-nebezpečenstvo ']/li [3] ")). getText ("// ul [@class = 'alert alert-danger']/li [4]"). then (function (e) {console.log ('Found found:' + e); (e).should.be.equal ('Zadajte mesto');}).getText ("// ul [@class = 'alert alert-danger']/li [5]"). then (function (e) {console.log ('Našla sa chyba:' + e); (e).should.be.equal ('Zadajte štát');}); });

• Smyčka údajov na overenie odkazu/textu/stránky na adresu URL - „LoopDataExample1.js“

  • Tento príklad ukazuje: Na uloženie odkazu a názvu použite pole údajov JSON a potom iterujte

    • Overte každý text adresy URL a odkaz
    • Kliknite na odkaz a načítajte stránku

// Údaje o prepojení - odkaz a text

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 "}, {" odkaz ":" 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 ": „ladiť gExample1.js "}, {" odkaz ":" 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 "}]; … // prechod cez každý linkArray linkArray.forEach (funkcia (d) {it ('by mal obsahovať text/odkaz, potom prejsť na stránku -' + d.name, function () {vrátiť ovládač // uistite sa, že ste na úvodnej stránke.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). then (funkcia (názov) {// overenie názvu (nadpis).should.be.equal ("Webový ovládač IO - Testovacia stránka výukového programu ");}) // vyhľadajte URL.getAttribute ('a =' + d.name," href "). Then (function (link) {(link).should.equal (d.link); console.log ('URL found:' + d.link);})) // prejdite na stránku URL a overte, či existuje. kliknite ('a =' + d.name).waitForVisible ("#js-repo-pjax- kontajner ", 10 000). potom (funkcia () {console.log ('nájdená stránka Github');});});});

• Opakovanie statických údajov na vyplnenie polí formulára - „loopDataExample2.js“

  • Tento príklad ukazuje: Na uloženie mena/priezviska použite pole údajov JSON

    • Zopakujte údaje, vyplňte polia formulára a potom formulár odošlite
    • Počkajte na stránku s výsledkami
    • Na stránke s výsledkami overte meno / priezvisko

// dátové pole - firstName a lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; ……. /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verify title (title).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 ("First Názov: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Potom (funkcia (e) {(e).should.be.equal (d.lastName); console.log ("Priezvisko:" + e);}).submitForm ("#search-form"). then (function () {console.log ('Submit Search Form');}).waitForVisible ("#search-results", 10 000). potom (funkcia () {console.log ('stránka s výsledkami nájdená');}).getText ("// h1"). potom (funkcia (odkaz) {console.log ('Text nájdený:' + odkaz); (odkaz).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Overiť vlastnosti CSS - "cssValidation1.js"

  • Tento príklad ukazuje, ako:

    • Overte nasledujúce vlastnosti CSS:

      • farba
      • polstrovanie (hore, dole, vpravo, vľavo)
      • farba pozadia

it ('should contain correct color of error text', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-danger']/li [1]", "color"). then (function (result) {console.log ('Color found:' + result.parsed.hex + "or" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('by malo obsahovať správne odsadenie v bunke tabuľky', funkcia () {

vrátiť ovládač // padding: vpravo hore vľavo dole.getCssProperty ("// tabuľka [@id = 'zoznam súborov']/thead/tr [1]/td [1]", "padding-top"). potom (funkcia (výsledok) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');})).getCssProperty ("// tabuľka [@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- doprava "). potom (funkcia (výsledok) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// tabuľka [@id = 'zoznam súborov']/thead/tr [1]/td [1]", "padding-left"). potom (funkcia (výsledok) {console.log ('padding-left found: ' + result.value); (result.value).should.be.equal (' 5px ');}); });

it ('by malo obsahovať správnu farbu pozadia v hlavičke tabuľky', funkcia () {

vrátiť ovládač.getCssProperty ("// tabuľka [@id = 'zoznam súborov']/thead", "farba pozadia"). potom (funkcia (výsledok) {console.log ('nájdená farba pozadia:' + result.parsed.) hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Krok 6: Tipy a triky

• Ladenie:

  • Zapnite protokolovanie na úrovni ovládača, aby ste mohli lepšie ladiť a vytvárať protokoly.

    • Nastaviť logLevel na 'verbose'
    • Nastaviť logOutput na názov adresára („protokoly“)

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

• Na ladenie použite console.log (), debug (), getText ().

  • console.log () - slúži na zobrazenie informácií na určenie stavu.
  • debug () - Používajte pozastavenie prehliadača/skriptu, kým sa na príkazovom riadku nestlačí kláves Enter.

  • getText () - slúži na overenie, či interagujete so správnym prvkom.

    Obzvlášť užitočné pri výrazoch xpath

// Kliknite na položku 3 zo zoznamu

it ('should click on Item 3 from list', function () {// use getText () to verify the xpath is correct for the element return driver.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Then (function (link) {// use console.log () to output information console.log ('Link found:' + link); (link).should.equal ("Položka 3");}) // použite debug () na zastavenie akcie, aby ste videli, čo sa deje v prehliadači.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Click clicked');})) // wait for Google search form to appear.waitForVisible ("#tsf", 20000).then (function (e) {console.log ('Found Search Results Found');});});

• Na dynamickú zmenu prehliadača použite premennú prostredia:

  • Pomocou premennej prostredia SELENIUM_BROWSER vyvolajte iný prehliadač bez toho, aby ste zakaždým upravovali testovací skript.
  • Na podporu je potrebná mierna zmena kódovania.

Zmeny kódu:

// načítajte ovládač pre prehliadač

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

Podporované prehliadače:

• Internet Explorer - IE 8+ (iba Windows)

  SELENIUM_BROWSER = tj mokka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox moka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = chrome moka

• Opera 12+

  SELENIUM_BROWSER = opera moka

• Safari

  SELENIUM_BROWSER = safari moka

Testovanie:

• V systéme Windows použite git bash shell:

  • SELENIUM_BROWSER = chrome moka
  • $ SELENIUM_BROWSER = chrome moka DynamicBrowser.js

• V systéme Mac alebo Linux otvorte terminál:

  • SELENIUM_BROWSER = chrome moka
  • $ SELENIUM_BROWSER = chrome moka DynamicBrowser.js

• Responzívne testovanie:

  • Určte body prerušenia na základe projektu alebo rámca (tj. Bootstrap).

  • Definujte premenné prostredia pre každý bod prerušenia:

    • DESKTOP - 1200 px
    • TABLET - 992 px
    • MOBILNÝ - 768 px

  • Vytvorte opakovane použiteľný príkaz na čítanie premennej prostredia a nastavenie veľkosti prehliadača.

    Viď príklad nižšie

  • Zavolajte opakovane použiteľný príkaz do testovacieho skriptu.

// opakovane použiteľný kód - knižnica // útržok kódu if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Testovací skript

before (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // set the window size it ('should set window size', funkcia (hotovo) {// záleží len na šírke driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Opätovne použiteľné príkazy (vlastné príkazy):

  • Web Driver IO je ľahko rozšíriteľný.
  • Rád vložím všetky opakovane použiteľné príkazy do knižnice. (možno je to stará škola, ale funguje to!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Popis: // Overí chybové hlásenie o validácii formulára priezviska // // Vstup: // číslo - index chyby (1-5) // Výstup: // žiadny // var verifyLastNameCheckError = function () { var idx = argumenty [0], spätné volanie = argumenty [argumenty.dĺžka - 1]; tento.getText ("// ul [@class = 'alert alert-danger']/li [" + idx + "]", function (err, e) {console.log ('Chyba nájdená:' + e); (e).should.be.equal ('Zadajte priezvisko');}).call (spätné volanie); }; // export funkcie module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Tu sú konkrétne zmeny potrebné na vyvolanie opakovane použiteľnej funkcie

Úplný pracovný príklad nájdete na stránke formFieldValidation.js

// vyžadujú opakovane použiteľný príkaz - CommonLib

common = require ('./ Common/CommonLib'); … // väzba príkazov driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); it ('should contain 2 errors: first/last name', function () {// call the reusable function driver.verifyFirstNameError (1);.verifyLastNameError (2);});

• Štruktúra súboru projektu/adresára:

  • Tu je typická štruktúra projektu:

    • "Projekt" - hlavný adresár projektu

      • README.md - súbor readme pre globálny projekt

      • „Spoločný“- adresár globálnych funkcií spoločný pre všetky projekty

        • common -lib.js - globálna knižnica funkcií
        • README.md - súbor readme pre globálne funkcie

      • „Produkt1“- adresár pre produkt 1

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

        • „Spoločný“- adresár miestnych funkcií pre projekt 1

          • prod1 -lib.js - miestna knižnica funkcií pre projekt 1
          • README.md - súbor readme pre lokálne funkcie k projektu 1

      • "Product2"-adresár pre produkt 2test-script1.jstest-script2.js

        • „Spoločný“- adresár miestnych funkcií pre projekt 2

          • prod2 -lib.js - miestna knižnica funkcií pre projekt 2
          • README.md - súbor readme pre lokálne funkcie k projektu 2

• Skúšobné skripty rozdeľte do viacerých súborov:

  • Tu je ukážka použitia viacerých súborov:

    • Sanity Check - základný testovací skript na overenie, či všetko funguje
    • Validácia statického prvku a textu - overte všetky prvky a text
    • Validácia chyby formulára/stránky - validácia chyby
    • Výsledky vyhľadávania - testujte dynamický obsah

• Spätné volania VS. Sľuby:

  • Verzia 3 Web Driver IO podporuje spätné volania aj sľuby.

    Preferovanou metódou sú sľuby, pretože znižujú kód spracovania chýb. Nižšie nájdete ten istý príklad napísaný pomocou spätných odkazov a sľubov.

Spätné volania

// Nastavte/overte meno/priezvisko pomocou funkcie Callback

to ('by malo nastaviť/overiť meno/priezvisko pomocou spätných volaní', funkcia (hotovo) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).should.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 ("Last Name:" + e); done ();});});});});});

Sľuby

// Nastavte/overte meno/priezvisko pomocou prísľubov

it ('by malo nastaviť/overiť meno/priezvisko pomocou prísľubov', funkcia () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). potom (funkcia (e) {(e).should.be.equal ("Keith"); console.log ("Priezvisko:" + e);});});

Krok 7: Viac zdrojov

Tu je niekoľko ďalších zdrojov pre vašu referenciu:

• Diskusné skupiny (Gitter)

  • Diskusná skupina pre webový ovládač IO
  • Diskusná skupina Mocha

• Ďalšie zaujímavé projekty

  • Supertest - tvrdenia
  • Chai - tvrdenia

Krok 8: Záver

Strávil som nejaký čas skúmaním technológií, ktoré môžem použiť pre svoj projekt. Pôvodne som začínal s Selenium Web Driver, ale prešiel som na používanie Web Driver IO. Web Driver IO sa zdal byť jednoduchšie na používanie a oveľa jednoduchšie ho rozšíriť (aspoň dokumentácia na rozšírenie - opakovane použiteľné príkazy bola lepšia).

Keď som sa prvýkrát začal zaoberať technológiami, bolo ťažké nájsť dobré príklady, ktoré súviseli so všetkým, o čo som sa pokúšal. To je dôvod, prečo som sa s vami chcel podeliť o tieto informácie a znalosti.

Technológie fungovali oveľa lepšie, ako som očakával, ale zahŕňala krivka učenia. Akonáhle som pochopil, ako všetky súčasti spolupracujú, bol som schopný napísať komplikované testovacie skripty vo veľmi krátkom čase. Najťažšie skripty boli komponenty založené na JavaScripte, ako napríklad výber dátumu a výber modov.

Nikdy som sa neoznačoval za vývojára JavaScriptu a ani som nechcel byť odborníkom na JavaScript, ale používanie týchto technológií ma určite motivovalo k zdokonaleniu mojich znalostí JS.

Dúfam, že tento článok je užitočný a príklady sú jasné a informatívne.

Ak máte akékoľvek otázky alebo pripomienky, dajte nám vedieť.

Ďakujem, Tony Keith