Web -ohjaimen IO -opetusohjelma Live -verkkosivuston käyttäminen ja työskentelyesimerkit: 8 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:03

Web -ohjaimen IO -opetusohjelma käyttämällä live -verkkosivustoa ja työskentelyesimerkkejä

Viimeisin päivitys: 26.7.2015

(Tarkista tilanne usein, kun päivitän tämän ohjeen lisätietoja ja esimerkkejä)

Tausta

Sain äskettäin mielenkiintoisen haasteen. Minun piti esitellä automaattinen testaus Q/A -osastolle, jolla oli hyvin vähän teknistä kokemusta ja ilman ohjelmointitaustaa.

Tämä oli todella kaksi (2) erillistä haastetta. Ensimmäinen oli tunnistaa tekniikat automaattisen testauksen suorittamiseksi. Toinen oli kouluttaa Q/A -osasto.

Artikkeli käsittelee vain käytettyjä tekniikoita ja mitä olen oppinut prosessissa.

Tekniikat toimivat hyvin, mutta minun piti todella etsiä tietoa ja viettää monta tuntia ongelmien selvittämiseen.

Minun oli vaikea löytää Internetistä tietoa näistä tekniikoista, jotka kaikki toimivat yhdessä.

Halusin jakaa nämä tiedot, joten kirjoitin tämän artikkelin yhdessä toimivien esimerkkitestiskriptien ja testisivuston kanssa skriptien suorittamiseksi.

Kaikki testiskriptit löytyvät githubista, ja toimiva testisivusto sijaitsee Web Driver IO Tutorial Test Site -sivustolla

Toivottavasti se on hyödyllinen. Jos haluat, kerro siitä minulle.

Tavoitteet Käytä tekniikoita:

• Testaa verkkosivuston toimivuus
• Testaa JavaScript -toiminnallisuus
• Voidaan ajaa manuaalisesti
• Voidaan ajaa automaattisesti

• Helppo oppia kieltä ei -ohjelmoijille

  Q/A -henkilöstö, jolla on perustiedot HTML: stä ja JavaScriptistä

• Käytä vain avoimen lähdekoodin ohjelmistoa

Teknologiat

Luettelo valitsemistani tekniikoista:

• mocha - testijuoksija - suorittaa testiskriptit
• shouldjs - väite kirjasto
• webdriverio - selaimen ohjaussidokset (kielisidokset)
• seleeni - selaimen abstraktio ja käynnissä oleva tehdas

• Selain-/mobiiliohjaimet + selaimet

  • Firefox (vain selain)
  • Chrome (selain ja ohjain)
  • IE (selain ja ohjain)
  • Safari (selain- ja ohjainlaajennus)

Vaihe 1: Ohjelmiston asennus

Aloittaaksesi sinun on asennettava erillinen palvelin Node JS, Web Driver IO, Mocha, Should ja Selenium.

Tässä on asennusohjeet Windows 7: lle.

(Olen Mac/Linux -käyttäjä, mutta minun oli asennettava kaikki Windows 7 -koneisiin, siksi olen lisännyt sen viitteellesi. Asennus Mac/Linux -käyttöjärjestelmään on samanlainen. Lisätietoja on online -viitteissä. tiedot.)

Selaimesta:

• Asenna solmu, joka sisältää NPM: n (Node Package Manager)

• siirry osoitteeseen

  • Napsauta asennus
  • Tallenna ja suorita tiedosto
  • Aseta polku ja muuttuja (NODE_PATH)

  • Siirry Ohjauspaneeli-> Järjestelmä ja suojaus-> Järjestelmä

    • Järjestelmän lisäasetukset

    • Ympäristöasetus (käyttäjämuuttujat)

      • Lisää PATH

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

      • Lisää NODE_PATH (järjestelmämuuttujat)

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

Huomautus: Asensin kaikki alla olevat ohjelmistot käyttämällä npm-yleistä vaihtoehtoa (-g). Tätä ei yleensä suositella, mutta tälle asennukselle minun oli asennettava maailmanlaajuisesti, koska sitä käytettäisiin useissa projekteissa.

Avaa komentorivi (cmd):

(paikallinen järjestelmänvalvoja)

• Asenna seleeni "web -ohjain IO"

  • npm asenna webdriverio -g

    Tämä asentaa web -ohjaimen IO: n maailmanlaajuisesti koneellesi

• Asenna "mocha" -testiohjelmisto

  • npm asenna mocha -g

    Tämä asentaa mokan maailmanlaajuisesti koneellesi

• Asenna "pitäisi" -vahvistuskirjasto

  • npm asennuksen pitäisi -g

    Tämä asentaa "pitäisi" maailmanlaajuisesti koneellesi

• Asenna Selenium Stand Alone Server

  • Siirry osoitteeseen
  • Lataa jar -tiedosto ja siirry seleenihakemistoon.

• Asenna selaimet ja selainohjaimet testattavaksi

  • Cmd -kehotteesta:

    • Luo seleenihakemisto
    • C: / Users {USERNAME} selenium

    • Komennot:

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

    • Firefox

      • Asenna Firefox -selain, jos sitä ei ole jo asennettu.
      • Polku on asetettava käynnistämään Firefox komentoriviltä (cmd).

      • Ohjauspaneeli-> Järjestelmä ja suojaus-> Järjestelmä

        • Järjestelmän lisäasetukset
        • Ympäristöasetukset
        • Lisää (lisää käyttö puolipisteellä) polku muuttujaan
        • C: / Ohjelmatiedostot (x86) Mozilla Firefox
      • Firefoxiin ei tarvita erityistä web -ohjainta.

    • Kromi

      • Asenna chrome -selain, jos sitä ei ole jo asennettu.
      • Polku VOI olla asetettu käynnistämään Chrome komentoriviltä (cmd).
      • Testaa ensin: chrome.exe komentoriviltä (cmd)
      • Jos kromi ei käynnisty:

      • Ohjauspaneeli-> Järjestelmä ja suojaus-> Järjestelmä

        • Järjestelmän lisäasetukset
        • Ympäristöasetukset
        • Lisää (lisää käyttö puolipisteellä) polku muuttujaan
        • C: / Ohjelmatiedostot (x86) Google / Chrome / Application / chrome.exe

      • Chromelle tarvitaan erityinen verkko -ohjain.

        Siirry osoitteeseen chromium.org ja pura 32 -bittinen ohjain selenium -hakemistoon

    • Internet Explorer (vain Windows - ei toimi muilla alustoilla)

      • IE: tä varten tarvitaan erityinen web -ohjain.

        • Siirry osoitteeseen
        • Lataa ja pura 64 -bittinen ohjain selenium -hakemistoon.

Vaihe 2: Basic Test Script

Aloitetaan joistakin perusasioista.

Tässä on yksinkertainen mocha -käsikirjoitus, joka avaa verkkosivuston ja tarkistaa otsikon.

// opetusohjelma1.js

// // Tämä on yksinkertainen testiskripti verkkosivuston avaamiseen ja // otsikon vahvistamiseen. // pakolliset kirjastot var webdriverio = vaatii ('webdriverio'), pitäisi = vaatia ('pitäisi'); // testikomentosarjan lohko tai sarjakuvaus ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {// aseta aikakatkaisuksi 10 sekuntia this.timeout (10000); var driver = {}; // koukku suoritettava ennen testejä ennen (toiminto (valmis) {// lataa ohjain selainohjaimelle = webdriverio.remote ({toivotut kyvyt: {browserName: 'firefox'}}); driver.init (valmis);}); // testispesifikaatio - "spesifikaatio" it ('pitäisi ladata oikea sivu ja otsikko', function () {// lataa sivu ja soita sitten funktio () palauta ohjain.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // hanki otsikko ja välitä otsikko funktiolle ().getTitle (). sitten (function (title) {// tarkista otsikko (otsikko).should.be.equal ("Web Driver IO - Tutorial Test Page "); // Uncomment for console debug // console.log ('Nykyinen sivun otsikko:' + otsikko);});}); // //" koukku "suoritettavaksi kaikkien tämän lohkon testien jälkeen (toiminto (tehty (tehty) {kuljettaja.pää (valmis);});});

Havaintoja:

• Huomaa ensin, että testikomentosarja on kirjoitettu JAVASCRIPT -muodossa (päättyy.js -tiedostotunnisteeseen).

• Perusrakenne on lähes sama kaikille testikomentosarjoille.

  • Otsikon kommentit (//)
  • Pakolliset kirjastot
  • Aseta asetukset (valinnainen)
  • Koukku: Lataa selainohjain
  • Test Suite (kuvaile)
  • Testitiedot (sviitissä voi olla useita teknisiä tietoja)
  • Koukku: Siivoa

• Testipaketti alkaa kuvaustoiminnolla, joka sisältää kaksi parametria:

  • Merkkijono - Testipaketin kuvaus

    • “Tarkista sivulta oikea sananlasku”
    • "Tarkista valintanapin toiminta"

  • toiminto - suoritettava koodilohko

    kuvaus (’Testisarjan kuvaus’, function () {});

• Testipaketti sisältää yhden tai useampia testitietoja (erittely)

• Tekniset tiedot alkavat toiminnolla, joka sisältää kaksi parametria:

  • Merkkijono - Testausmäärityksen kuvaus

    • "Pitäisi olla oikea linkkiteksti ja linkin URL -osoite"
    • "Pitäisi sisältää oikean sananlaskun (kopiointipakkaus)
  • toiminto - suoritettava koodilohko
  • it (‘Testausmäärityksen kuvaus’, toiminto () {});
• Tekniset tiedot sisältävät yhden tai useamman odotuksen, jotka testaavat koodin tilan

• Näitä kutsutaan väitteiksi

  "Pitäisi" -kirjasto tarjoaa väitteet

• Lähes kaikissa tapauksissa sinun on löydettävä yksi tai useampi elementti valitsimella ja suoritettava sitten jokin toiminto elementille

  • Esimerkkejä:

    • Etsi teksti sivulta ja tarkista teksti
    • Täytä lomake ja lähetä
    • Tarkista elementin CSS

Katsotaanpa tarkemmin esimerkkiä kommenteilla

Lataa tarvittavat kirjastot: web -ohjaimen IO ja pitäisi.

// vaaditut kirjastot

var webdriverio = vaatia ('webdriverio'), pitäisi = vaatia ('pitäisi');

Määritä testisarja. Tätä sviittiä kutsutaan: "Web -ohjaimen otsikkotesti IO - opetusohjelman testisivun verkkosivusto"

// testikomentosarjan lohko tai sarja

kuvaile ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {…});

Aseta aikakatkaisu 10 sekuntiin, jotta komentosarja ei aikakatkaise sivua ladattaessa.

// aseta aikakatkaisu 10 sekunniksi

this.timeout (10000);

Koukku lataa selainohjain ennen kuin suoritat tekniset tiedot. Firefox -ohjain on ladattu tässä esimerkissä.

// koukku ajettavaksi ennen testejä

before (function (done) {// lataa ohjain selainohjaimelle = webdriverio.remote ({toivotut kyvyt: {browserName: 'firefox'}}); driver.init (valmis);});

Määrittele testin spesifikaatio.

// testispesifikaatio - "eritelmä"

it ('pitäisi ladata oikea sivu ja otsikko', function () {…});

Lataa verkkosivun sivu

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

Hae otsikko ja siirrä otsikko funktiolle ()

.getTitle (). sitten (function (title) {

… });

Tarkista otsikko käyttämällä pakollisen vahvistuksen kirjastoa.

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

Koukku lopettaaksesi ja puhdistaaksesi ohjaimen, kun olet valmis.

// "koukku" suoritettavaksi tämän lohkon kaikkien testien jälkeen

jälkeen (toiminto (tehty) {driver.end (valmis);});

Vaihe 3: Suorita testikomentosarja

Katsotaan nyt, mitä testiskripti tekee, kun se suoritetaan.

Käynnistä ensin Selenium Stand Alone Server:

• Käytä Windowsissa komentoriviä (cmd):

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

• Avaa Mac- tai Linux -käyttöjärjestelmä:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Katso kuvakaappaus yllä

Suorita seuraavaksi komentosarja:

• Käytä Windowsissa komentoriviä (cmd):

  • mokka
  • # mocha tutorial1.js

• Avaa Mac- tai Linux -pääte:

  • mokka
  • $ mocha tutorial.js
• Katso kuvakaappaus yllä

Mitä tapahtui?

Mocha kutsuu käsikirjoituksen "tutorial1.js". Kuljettaja käynnisti selaimen (Firefox), ladasi sivun ja vahvisti otsikon.

Vaihe 4: Esimerkkisivusto

Kaikki esimerkit ovat tätä sivustoa vastaan.

Esimerkkisivusto sijaitsee osoitteessa: Web Driver IO Tutorial Test Page

Kaikki testiskriptit voidaan ladata githubista.

Vaihe 5: Esimerkkejä

Kaikki koodit ovat saatavilla githubissa: Web Driver IO Tutorial githubissa

• Vahvista linkki ja linkkiteksti järjestämättömässä luettelossa - "linkTextURL1.js"

  • Järjestämättömässä luettelossa on ja linkki on neljäs luettelokohde.
  • URL -osoitteen tulee olla "https://tlkeith.com/contact.html"

// Vahvista Ota yhteyttä -linkin teksti

it ('pitäisi sisältää Ota yhteyttä -linkkiteksti', function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). then (function (link) {console.log ('Linkki löytyi:' + linkki); (link).should.equal ("Ota yhteyttä");});}); // Vahvista Ota yhteyttä URL -osoite (se sisältää "Ota yhteyttä URL -osoite", 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 löytyi:' + linkki;});});

• Vahvista tekijänoikeusteksti - "Copyright1.js"

  • Tekijänoikeus on alatunnisteessa Tässä esimerkissä on kaksi eri tapaa etsiä tekijänoikeusteksti:

    • elementtivalitsimella
    • käyttämällä elementin valitsimena xpathia

// Vahvista tekijänoikeusteksti käyttämällä tunnusta elementtivalitsimena

it ('pitäisi sisältää tekijänoikeusteksti', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Copyright found:' + link); (link).should. yhtä suuri ("Tony Keith - tlkeith.com @ 2015 - Kaikki oikeudet pidätetään.");});}); // Vahvista tekijänoikeusteksti käyttämällä xpathia elementtivalitsimena se ('pitäisi sisältää tekijänoikeusteksti', function () {return driver.getText ("// footer/center/p"). Sitten (function (link) {console.log ('Tekijänoikeus löytyi:' + linkki); (linkki).should.equal ("Tony Keith - tlkeith.com @ 2015 - Kaikki oikeudet pidätetään.");});});

• Täytä lomakekentät ja lähetä - "formFillSubmit1.js"

  • Kirjoita etunimi, sukunimi ja lähetä ja odota tuloksia.

  • Tässä esimerkissä on kolme tapaa täyttää etunimen syöttökenttä:

    • tunnuksella
    • xpath syötteestä
    • xpath lomakkeesta-> syöttö
  • Näyttää myös syöttökentän tyhjentämisen

// Aseta etunimi tunnuksella käyttämällä: Tony

it ('pitäisi asettaa etunimeksi Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Etunimi:" + e);});}); // Tyhjennä etunimi tunnuksella it ('pitäisi poistaa etunimi', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).should.be.equal (""); console.log ("Etunimi:" + e);});}); // Aseta etunimi xpath -toiminnolla tulosta seuraavaan: Tony it ('pitäisi asettaa etunimeksi Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Etunimi:" + e);});}); // Tyhjennä etunimi xpath -ohjelmalla syöttämällä se ('pitäisi poistaa etunimi', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). then (function (e) {(e).sayuld.be.equal (" "); console.log (" Etunimi: " + e);});}); // Aseta etunimi käyttämällä xpath-muotoa muodossa: Tony it ('pitäisi asettaa etunimeksi 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 ("Etunimi:" + e);});}); // Aseta sukunimi käyttämällä id: tä: Keith it ('pitäisi asettaa sukunimeksi Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Sitten (function (e) {(e).should.be.equal ("Keith"); console.log ("Sukunimi:" + e);});}); // Lähetä lomake ja odota hakutuloksia. Lähetä hakulomake ');}).waitForVisible ("#search-results", 10000). Then (function (e) {console.log (' Hakutulokset löydetty ');});});

• Napsauta Näytä/piilota -painiketta ja vahvista teksti - "showHideVerify1.js"

  • Teksti on Näytä/piilota -elementissä. Painike ohjaa tilaa.

  • Tämä esimerkki osoittaa:

    • Laajenna napsauttamalla painiketta
    • Odota, että elementti näkyy (laajennettu)
    • Tarkista teksti (kopiointipakkaus)

// napsauta "Lisätietoja" -painiketta ja tarkista laajennetun elementin teksti

it ('pitäisi napsauttaa lisätietoja -painiketta ja tarkistaa teksti', function () {return driver.click ("#moreinfo"). then (function () {console.log ('Napsautettu lisätietoja -painike');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). then (function (e) {console.log ('Teksti:' + e); (e).should.be.equal ("Kaikki hyvä menee tänne!");});});

• Vahvista lomakekenttävirheet - "formFieldValidation.js"

  • Tarkista testikomentosarjojen avulla, että virheilmoitukset ovat oikein.

  • Tämä esimerkki osoittaa:

    Tarkista virheilmoitukset ja vahvista sijainti (järjestämätön luettelon sijainti)

it ('pitäisi sisältää 5 virhettä: first/last/address/city/state', function () {

palauta kuljettaja.getText ("// ul [@class = 'alert alert-risks']/li [1]"). then (function (e) {console.log ('Virhe löytyi:' + e); (e).should.be.equal ('Anna etunimi');}).getText ("// ul [@class = 'alert alert-risks']/li [2]"). sitten (toiminto (e) {console.log ('Virhe löydetty:' + e); (e).should.be.equal ('Anna sukunimi');}).getText ("// ul [@class = 'alert alert-vaarat ']/li [3] "). sitten (function (e) {console.log (' Virhe löydetty: ' + e); (e).should.be.equal (' Anna osoite ');}). getText ("// ul [@class = 'alert alert-risks']/li [4]"). then (function (e) {console.log ('Virhe löydetty:' + e); (e). pitäisi.be.equal ('Anna kaupunki');}).getText ("// ul [@class = 'alert alert-risks']/li [5]"). then (function (e) {console.log ('Virhe löytyi:' + e); (e).should.be.equal ('Anna tila');}); });

• Kerätään tietoja URL -linkin/tekstin/sivun vahvistamiseksi - "LoopDataExample1.js"

  • Tämä esimerkki osoittaa: Tallenna linkki ja nimi JSON -tietojen joukon avulla ja toista sitten

    • Tarkista jokainen URL -osoite ja linkki
    • Napsauta linkkiä ja lataa sivu

// Linkkien tiedot - linkki ja teksti

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 "}]; … // selaa jokaisen linkin läpi.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). sitten (function (title) {// tarkista otsikko (title).should.be.equal ("Web Driver IO - Opetusohjelman testisivu ");}) // etsi URL -osoite.getAttribute ('a =' + d.name," href "). Sitten (function (link) {(link).should.equal (d.link)); console.log ('URL löytyi:' + d.link);}) // siirry URL-sivulle ja varmista, että se on olemassa. napsauta ('a =' + d.name).waitForVisible ("#js-repo-pjax- kontti ", 10000). then (function () {console.log ('Github Page Found');});});});

• Staattisten tietojen kerääminen lomakekenttiin - "loopDataExample2.js"

  • Tässä esimerkissä esitetään: Käytä JSON -datajoukkoa etu-/sukunimen tallentamiseen

    • Selaa tiedot lomakekenttien täyttämiseksi ja lähetä lomake
    • Odota tulossivua
    • Vahvista etu- / sukunimi hakutulossivulla

// tietotaulukko - etunimi ja sukunimivar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," sukunimi ":" Naaras "}, {" etunimi ":" Don "," sukunimi ":" Johnson "}]; … // selata jokaista dataArray dataArray.forEach (function (d) {it ('pitäisi täyttää kentät, sumbit -sivu', function () {return driver // varmista, että olet aloitussivulla.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). sitten (function (title) {// tarkista 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 ("Ensimmäinen Nimi: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName)); console.log ("Sukunimi:" + e);}).submitForm ("#search-form"). sitten (function () {console.log ('Lähetä hakulomake');}).waitForVisible ("#search-results", 10000). then (function () {console.log ('Tulossivu löydetty');}).getText ("// h1"). sitten (function (link) {console.log ('Teksti löytyi:' + linkki); (linkki).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Vahvista CSS -ominaisuudet - "cssValidation1.js"

  • Tämä esimerkki näyttää, miten:

    • Tarkista seuraavat CSS -ominaisuudet:

      • väri-
      • pehmuste (ylhäällä, alhaalla, oikealla, vasemmalla)
      • taustaväri

it ('pitäisi sisältää virheen tekstin oikea väri', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-vaarat']/li [1]", "väri"). sitten (function (result) {console.log ('Väri löytyi:' + result.parsed.hex + "tai" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('pitäisi sisältää oikea täyte taulukon solussa', function () {

return driver // padding: ylhäällä oikeassa alakulmassa vasemmalla.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). sitten (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- oikea "). sitten (toiminto (tulos) {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: ' + tulos.arvo); (tulos.arvo). pitäisi olla.tasainen (' 5 kuvapistettä ';}); });

it ('pitäisi sisältää oikea taustaväri taulukon otsikossa', function () {

return driver.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). then (function (result) {console.log ('taustaväri löytyi:' + result.parsed. hex); (result.parsed.hex).sayuld.be.equal ('#eeeeee');}); });

Vaihe 6: Vinkkejä ja temppuja

• Virheenkorjaus:

  • Ota lokitiedosto käyttöön ajuritasolla, jos haluat lisää virheenkorjausta ja lokien luomista.

    • Aseta logLevel -asetukseksi 'verbose'
    • Aseta logOutput hakemiston nimeksi ('lokit')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'lokit', {toivotut kyvyt: {browserName: 'firefox'}});

• Käytä virheiden korjaamiseen console.log (), debug (), getText ().

  • console.log () - Käytä tietojen näyttämiseen tilan määrittämiseen.
  • debug () - Käytä taukoselainta/komentosarjaa, kunnes Enter -painiketta painetaan komentoriviltä.

  • getText () - Käytä vahvistaaksesi, että olet vuorovaikutuksessa oikean elementin kanssa.

    Erityisen hyödyllinen xpath -lausekkeiden kanssa

// Napsauta kohtaa 3 luettelosta

it ('pitäisi napsauttaa kohtaa 3 luettelosta', function () {// käytä getText (): ta varmistaaksesi, että xpath on oikea elementin palautusohjaimelle.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Sitten (funktio (linkki) {// käytä console.log () -tietoja console.log ('Linkki löytyi:' + linkki); (link).should.equal ("Kohde 3");}) // lopeta toiminta käyttämällä debug () -toimintoa nähdäksesi mitä tapahtuu selaimessa.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a"). (e) {console.log ('Hakutulokset löydetty');});});

• Käytä ympäristömuuttujaa selaimen muuttamiseen dynaamisesti:

  • Käytä ympäristömuuttujaa SELENIUM_BROWSER kutsuaksesi eri selain muuttamatta testikomentoa joka kerta.
  • Vaatii pienen koodausmuutoksen tukeakseen.

Koodimuutokset:

// lataa ohjain selaimelle

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

Tuetut selaimet:

• Internet Explorer - IE 8+ (vain Windows)

  SELENIUM_BROWSER = eli mokka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = kromimokka

• Opera 12+

  SELENIUM_BROWSER = oopperatalo

• Safari

  SELENIUM_BROWSER = safarimokka

Testaus:

• Käytä Windowsissa git bash shell:

  • SELENIUM_BROWSER = kromimokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Avaa Mac- tai Linux -pääte:

  • SELENIUM_BROWSER = kromimokka
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Responsiivinen testaus:

  • Määritä katkaisupisteet projektin tai kehyksen (esim. Käynnistyshihnan) perusteella.

  • Määritä ympäristömuuttujat kullekin katkaisupisteelle:

    • Pöytä - 1200 px
    • TABLETTI - 992 px
    • MOBIILI - 768 px

  • Luo uudelleenkäytettävä komento lukea ympäristömuuttuja ja asettaa selaimen koko.

    Katso esimerkki alla

  • Soita testikomentosarjan uudelleenkäytettävä komento.

// uudelleenkäytettävä koodi - kirjasto // koodinpätkä if (bp == "DESKTOP") {obj.width = 1200; obj. korkeus = 600; obj.nimi = bp; } else if (bp == "TABLETTI") {obj.width = 992; obj. korkeus = 600; obj.nimi = bp; } muu jos (bp == "MOBILE") {obj.width = 768; obj. korkeus = 400; obj.nimi = bp; }

// Testikirjoitus

before (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // aseta ikkunan koko ('pitäisi asettaa ikkunan koko', function (done) {// vain leveydellä on merkitystä driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Uudelleenkäytettävät komennot (mukautetut komennot):

  • Web Driver IO on helposti laajennettavissa.
  • Tykkään laittaa kaikki uudelleenkäytettävät komennot kirjastoon. (ehkä tämä on vanha koulu, mutta se toimii!)

common/commonLib.js

// checkLastNameCheckError ()

// // Kuvaus: // Vahvistaa sukunimen muodon vahvistusvirhesanoman // // Syöttö: // numero - virheindeksi (1-5) // Lähtö: // ei mitään // var tarkistaaLastNameCheckError = function () { var idx = argumentit [0], takaisinsoitto = argumentit [argumentit.pituus - 1]; this.getText ("// ul [@class = 'alert alert-risks']/li [" + idx + "]", function (err, e) {console.log ('Virhe löytyi:' + e); (e).should.be.equal ('Anna sukunimi');}).call (takaisinsoitto); }; // viedä toiminto moduuli.exports.verifyLastNameCheckError = tarkistaaLastNameCheckError;

Tässä ovat muutokset, joita tarvitaan uudelleenkäytettävän toiminnon kutsumiseen

Katso täydellinen esimerkki formFieldValidation.js

// vaaditaan uudelleenkäytettävä komento - CommonLib

common = vaatia ('./ Common/CommonLib'); … // sitoa komennot driver.addCommand ('pārbaudFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('pārbaudLastNameError', common.verifyLastNameCheckError.bind (ohjain)); it ('pitäisi sisältää 2 virhettä: etu-/sukunimi', function () {// kutsu uudelleenkäytettävä funktio -ohjain.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projektitiedoston/hakemiston rakenne:

  • Tässä on tyypillinen projektirakenne:

    • "Projekti" - projektin päähakemisto

      • README.md - readme maailmanlaajuiselle projektille

      • "Common" - hakemisto maailmanlaajuisille toiminnoille, jotka ovat yhteisiä kaikille projekteille

        • common -lib.js - yleinen funktiokirjasto
        • README.md - globaalien toimintojen readme

      • "Tuote1" - hakemisto tuotteelle 1

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

        • "Yhteinen" - hakemiston paikallisten toimintojen hakemisto 1

          • prod1 -lib.js - projektin 1 paikallinen funktiokirjasto
          • README.md - Readme paikallisiin toimintoihin projektiin 1

      • "Tuote2"-hakemisto tuotteelle 2test-script1.jstest-script2.js

        • "Yhteinen" - hakemiston paikallisten toimintojen hakemisto 2

          • prod2 -lib.js - projektin 2 paikallinen funktiokirjasto
          • README.md - readme paikallisiin toimintoihin projektiin 2

• Jaa testikomentosarjat useisiin tiedostoihin:

  • Tässä on esimerkki useiden tiedostojen käytöstä:

    • Sanity Check - perustestiskripti, jolla varmistetaan, että kaikki toimii
    • Staattinen elementti ja tekstin vahvistus - tarkista kaikki elementit ja teksti
    • Lomake-/sivuvirheiden vahvistus - virheiden vahvistus
    • Hakutulokset - testaa dynaamista sisältöä

• Takaisinsoitot VS. Lupaukset:

  • Web Driver IO: n versio 3 tukee sekä takaisinsoittoja että lupauksia.

    Lupaukset ovat ensisijainen menetelmä, koska se vähentää virheiden käsittelykoodia. Katso alla sama esimerkki, joka on kirjoitettu soittamalla ja lupaamalla.

Takaisinsoitot

// Aseta/vahvista etu-/sukunimi soittopyynnön avulla

it ('pitäisi asettaa/vahvistaa etu- ja sukunimi soittopyyntöjen avulla', function (done) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("Etunimi:" + e); driver.setValue ("#lname", "Keith", function (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Sukunimi:" + e); done ();});});});});});

Lupaukset

// Aseta/vahvista etu-/sukunimi Promisesin avulla

it ('pitäisi asettaa/vahvistaa etu- ja sukunimi lupauksilla', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Etunimi:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). sitten (funktio (e) {(e). pitäisi olla.be.equal ("Keith"); console.log ("Sukunimi:" + e);});});

Vaihe 7: Lisää resursseja

Tässä muutamia lisäresursseja viitteellesi:

• Keskusteluryhmät (Gitter)

  • Web -ajurin IO -keskusteluryhmä
  • Mocha -keskusteluryhmä
• Muita mielenkiintoisia projekteja
  • Supertesti - HTTP -väitteet
  • Chai - väitteet

Vaihe 8: Johtopäätös

Käytin jonkin aikaa tutkiessani projektissani käytettäviä tekniikoita. Aloitin alun perin Selenium Web Driverilla, mutta vaihdoin Web Driver IO: n käyttöön. Web Driver IO näytti olevan helpompi käyttää ja paljon helpompi laajentaa (ainakin laajennuksen dokumentaatio - uudelleenkäytettävät komennot olivat parempia).

Kun aloin tarkastella tekniikoita, oli vaikea löytää hyviä esimerkkejä, jotka olisivat suhteessa mihinkään, mitä yritin tehdä. Tästä syystä halusin jakaa tämän tiedon ja tiedon kanssasi.

Tekniikka toimi paljon paremmin kuin odotin, mutta siihen liittyi oppimiskäyrä. Kun ymmärsin, kuinka kaikki komponentit toimivat yhdessä, pystyin kirjoittamaan monimutkaisia testiskriptejä hyvin lyhyessä ajassa. Vaikeimmat skriptit olivat JavaScript -pohjaisia komponentteja, kuten päivämäärän valitsin ja modaalivalitsimet.

En ole koskaan luonnehtinut itseäni JavaScript -kehittäjäksi enkä halunnut olla JavaScript -asiantuntija, mutta näiden tekniikoiden käyttö on ehdottomasti motivoinut minua kehittämään JS -taitojani.

Toivottavasti tämä artikkeli on hyödyllinen ja esimerkit ovat selkeitä ja informatiivisia.

Kerro minulle, jos sinulla on kysyttävää tai kommentteja.

Kiitos, Tony Keith