Udhëzues i Shoferit të Internetit IO Duke përdorur një Uebfaqe të drejtpërdrejtë dhe Shembuj pune: 8 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:27

Udhërrëfyesi Ueb Udhëzues IO duke përdorur një uebfaqe të drejtpërdrejtë dhe shembuj pune

Përditësimi i fundit: 26.07.2015

(Kontrolloni shpesh ndërsa i përditësoj këto udhëzime me më shumë detaje dhe shembuj)

Sfondi

Kohët e fundit më është paraqitur një sfidë interesante. Më duhej të prezantoja testimin e automatizuar në një departament Q/A me shumë pak përvojë teknike dhe pa sfond programimi.

Kjo ishte me të vërtetë dy (2) sfida të ndara. E para ishte identifikimi i teknologjive për të kryer testimin e automatizuar. E dyta ishte trajnimi i departamentit të Q/A.

Artikulli do të trajtojë vetëm teknologjitë e përdorura dhe atë që kam mësuar në këtë proces.

Teknologjitë funksionuan mirë, por më duhej të kërkoja informacion dhe kalova shumë orë duke gjetur probleme.

E kisha të vështirë të gjeja informacion në internet në lidhje me këto teknologji që të gjitha punonin së bashku.

Doja të ndaja këtë informacion, kështu që e shkrova këtë artikull së bashku me shembullin e skripteve të testimit dhe një ueb faqe testimi për të kundërshtuar skriptet.

Të gjitha skriptet e testimit mund të gjenden në github dhe faqja e testimit të punës është e vendosur në Web Driver IO Tutorial Site Test

Shpresoj se ju duket e dobishme. Nëse e bëni këtë, ju lutem më tregoni.

Objektivat Përdorni teknologji për:

• Testoni funksionalitetin e faqes në internet
• Testoni funksionalitetin JavaScript
• Mund të drejtohet me dorë
• Mund të ekzekutohet automatikisht

• Lehtë për të mësuar gjuhë për jo programuesit

  P/A personel me njohuri themelore të HTML dhe JavaScript

• Përdorni vetëm softuer me burim të hapur

Teknologjitë

Lista e teknologjive që zgjedh:

• mocha - test runner - ekzekuton skriptet e testit
• mustjs - biblioteka e pohimit
• webdriverio - lidhjet e kontrollit të shfletuesit (lidhjet e gjuhës)
• seleni - fabrika e abstraksionit dhe drejtimit të shfletuesit

• Shfletuesit/Drejtuesit e celularëve + shfletuesit

  • Firefox (vetëm shfletues)
  • Chrome (Shfletuesi dhe shoferi)
  • IE (Shfletuesi dhe shoferi)
  • Safari (plug-in i shfletuesit dhe shoferit)

Hapi 1: Instalimi i softuerit

Për të filluar, duhet të keni të instaluar serverin Node JS, Web Driver IO, Mocha, Should dhe Selenium.

Këtu janë udhëzimet e instalimit për Windows 7.

(Unë jam një përdorues Mac/Linux por më është dashur të instaloj gjithçka në makinat Windows 7, kjo është arsyeja pse e kam përfshirë për referencën tuaj. Procedura për instalimin në një Mac/Linux është e ngjashme. Ju lutemi konsultohuni me referencat online për më shumë informacion.)

Nga një shfletues:

• Instaloni Nyjen e cila përfshin NPM (Node Package Manager)
• shkoni në
  • Klikoni instaloni
  • Ruani dhe ekzekutoni skedarin
  • Vendosni shtegun dhe ndryshoren (NODE_PATH)

  • Shkoni te Paneli i Kontrollit-> Sistemi dhe Siguria-> Sistemi

    • Cilësimet e Avancuara të Sistemit

    • Vendosja e mjedisit (ndryshoret e përdoruesit)

      • Shto në PATH

        C: / Përdoruesit {USERNAME} AppData / Roaming / npm;

      • Shtoni NODE_PATH (Variablat e sistemit)

        C: / Përdoruesit {USERNAME} AppData / Roaming / npm / node_modules

Shënim: Kam instaluar të gjithë programet e mëposhtëm duke përdorur opsionin global npm (-g). Kjo zakonisht nuk rekomandohet, por për këtë instalim më duhej të instaloja globalisht pasi do të përdorej në projekte të shumta.

Hapni vijën e komandës (cmd):

(administratori lokal i përdoruesit)

• Instaloni selenin "drejtuesi i uebit IO"

  • npm instaloni webdriverio -g

    Kjo do të instalojë drejtuesin e uebit në internet globalisht në kompjuterin tuaj

• Instaloni programin testues "mocha"

  • npm instaloni mocha -g

    Kjo do të instalojë mocha globalisht në kompjuterin tuaj

• Instaloni bibliotekën e pohimeve "duhet"

  • npm instaloni duhet -g

    Kjo do të instalojë "duhet" globalisht në kompjuterin tuaj

• Instaloni Selenium Stand Alone Server

  • Shkoni në
  • Shkarkoni skedarin jar dhe kaloni në drejtorinë "selen".

• Instaloni shfletuesit dhe drejtuesit e shfletuesit për të provuar

  • Nga cmd e shpejtë:

    • Krijoni drejtorinë "selen"
    • C: / Përdoruesit {USERNAME} selen

    • Komandat:

      • cd C: / Përdoruesit {USERNAME}
      • mkdir selen

    • Firefox

      • Instaloni shfletuesin firefox, nëse nuk është instaluar tashmë.
      • Rruga duhet të vendoset për të filluar Firefox nga komanda e shpejtë (cmd).

      • Paneli i Kontrollit-> Sistemi dhe Siguria-> Sistemi

        • Cilësimet e Avancuara të Sistemit
        • Cilësimet e mjedisit
        • Shtoni (shtoni përdorimin e gjysmë-zorrës së trashë) në ndryshoren e rrugës
        • C: / Program Files (x86) Mozilla Firefox
      • Asnjë drejtues uebi i veçantë nuk nevojitet për Firefox.

    • Chrome

      • Instaloni shfletuesin chrome, nëse nuk është instaluar tashmë.
      • Rruga MUND të vendoset për të filluar Chrome nga komanda e shpejtë (cmd).
      • Testoni së pari: chrome.exe nga komanda e shpejtë (cmd)
      • Nëse kromi nuk fillon atëherë:

      • Paneli i Kontrollit-> Sistemi dhe Siguria-> Sistemi

        • Cilësimet e Avancuara të Sistemit
        • Cilësimet e mjedisit
        • Shtoni (shtoni përdorimin e gjysmë-zorrës së trashë) në ndryshoren e rrugës
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Nevojitet një drejtues uebi i veçantë për Chrome.

        Shkoni te chromium.org dhe zbërtheni drejtuesin 32 bit në drejtorinë "selen"

    • Internet Explorer (vetëm për Windows - nuk do të funksionojë në platforma të tjera)

      • Një drejtues uebi i veçantë është i nevojshëm për IE.

        • Shkoni në
        • Shkarkoni dhe shpaketoni drejtuesin 64 bit në drejtorinë "selen".

Hapi 2: Skripti i Testit Bazë

Le të fillojmë me disa baza.

Këtu është një skript i thjeshtë moka që do të hapë një faqe në internet dhe do të verifikojë titullin.

// tutorial1.js

// // Ky është një skript i thjeshtë testimi për të hapur një faqe në internet dhe // vërtetuar titullin. // bibliotekat e kërkuara var webdriverio = kërkojnë ('webdriverio'), duhet = kërkojnë ('duhet'); // një bllok skripti testesh ose suite përshkruani ('Test Titulli për Shoferin e Uebit në Internet - Uebfaqja e Faqes së Testit Tutorial', funksioni () {// vendosni afatin kohor në 10 sekonda this.timeout (10000); var driver = {}; // fiksohem për të funksionuar para testeve para (funksioni (i kryer) {// ngarkoni shoferin për drejtuesin e shfletuesit = webdriverio.remote ({dëshiruarAftësitë: {emri i shfletuesit: 'firefox'}}}); shofer.init (përfunduar);}); // një specifikim testi - "specifikim" ai ('duhet të ngarkojë faqen dhe titullin e duhur', funksioni () {// ngarkoni faqen, pastaj thirrni funksionin () kthejeni shoferin.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // merrni titullin, pastaj kaloni titullin në funksion ().getTitle (). pastaj (funksioni (titulli) {// verifikoni titullin (titulli).should.be.equal ("Web Driver IO - Tutorial Test Test Page "); // koment për korrigjimin e tastierës // console.log ('Titulli i faqes aktuale:' + titulli);});}); // një" grep "për të ekzekutuar pas të gjitha testeve në këtë bllok pas (funksioni (i kryer) {driver.end (përfunduar);});});

Vëzhgimet:

• Së pari duhet të vini re se skripti i testit është shkruar në JAVASCRIPT (përfundon në shtrirjen.js).

• Struktura bazë është pothuajse identike për të gjitha skriptet e testimit.

  • Komentet e kokës (//)
  • Bibliotekat e kërkuara
  • Vendosni opsionet (opsionale)
  • Hook: Ngarko Shoferin e Shfletuesit
  • Test Suite (përshkruaj)
  • Specifikat e Testit (mund të jenë shumë Specifikime në një Suite)
  • Hook: Pastrohuni

• Paketa e testimit fillon me një funksion të përshkrimit i cili merr dy parametra:

  • Varg - Përshkrimi i kompletit të provës

    • "Kontrolloni faqen për fjalimin e duhur"
    • "Verifikoni operacionet e butonave të radios"

  • funksion - bllok i kodit për tu ekzekutuar

    përshkruani (‘Përshkrimi i suites së testit’, funksioni () {});

• Kompleti i testit do të përmbajë 1 ose më shumë specifikime testimi (specifikim)

• Karakteristikat fillojnë me funksionin e tij i cili merr dy parametra:

  • String - Përshkrimi i specifikimit të testit

    • "Duhet të jetë teksti i saktë i lidhjes dhe URL -ja e lidhjes"
    • "Duhet të përmbajë fjalë të sakta (kuvertë kopjimi)
  • funksion - bllok i kodit për tu ekzekutuar
  • it (‘Përshkrimi i specifikimit të testit’, funksioni () {});
• Një specifikim përmban një ose më shumë pritje që testojnë gjendjen e kodit

• Këto quhen pohime

  Biblioteka "duhet" siguron pohimet

• Pothuajse në të gjitha rastet, do t'ju duhet të gjeni një ose më shumë elementë duke përdorur një përzgjedhës dhe më pas të kryeni ndonjë operacion në elementin (et)

  • Shembuj:

    • Gjeni tekstin në një faqe dhe verifikoni tekstin
    • Plotësoni një formular dhe paraqiteni
    • Verifikoni CSS të një elementi

Le të hedhim një vështrim më të afërt në shembullin me komente

Ngarkoni bibliotekat e kërkuara: drejtuesi i uebit IO dhe duhet.

// bibliotekat e kërkuara

var webdriverio = kërkoj ('webdriverio'), duhet = kërkon ('duhet');

Përcaktoni grupin e testit. Kjo paketë quhet: "Test Titulli për Shoferin e Uebit IO - Faqja e Internetit të Testit Tutorial"

// një bllok ose suitë skripti testues

përshkruani ('Testi i Titullit për Shoferin e Ueb -it IO - Faqja e Faqes së Testit Tutorial', funksioni () {…});

Vendosni afatin kohor në 10 sekonda në mënyrë që skripti të mos mbarojë kur ngarkoni faqen.

// caktoni afatin kohor në 10 sekonda

this.timeout (10000);

Hook për të ngarkuar drejtuesin e shfletuesit para se të ekzekutoni "specifikimet" e specifikimeve. Shoferi Firefox është ngarkuar në këtë shembull.

// fiksohem për të kandiduar para testeve

më parë (funksioni (i kryer) {// ngarkoni drejtuesin për shoferin e shfletuesit = webdriverio.remote ({dëshiruarAftësitë: {browserName: 'firefox'}}}); driver.init (përfunduar);});

Përcaktoni specifikimet e testit.

// një specifikim testi - "specifikim"

ajo ('duhet të ngarkojë faqen dhe titullin e duhur', funksioni () {…});

Ngarko faqen e internetit

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

Merrni titullin, pastaj kaloni titullin në funksion ()

.getTitle (). pastaj (funksioni (titulli) {

… });

Verifikoni titullin duke përdorur bibliotekën e pohimit duhet.

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

Hook për të lënë dhe pastruar shoferin kur të keni mbaruar.

// një "goditje" për të ekzekutuar pas të gjitha testeve në këtë bllok

pas (funksioni (i kryer) {shofer.fund (i kryer);});

Hapi 3: Drejtoni Skriptin e Testit

Tani le të shohim se çfarë bën skripti i testit kur ekzekutohet.

Filloni fillimisht serverin e vetëm të Seleniumit:

• Për Windows përdorni vijën e komandës (cmd):

  • java -jar
  • # java -jar selen-server-i pavarur-2.46.0.jar

• Për Mac ose Linux, hapni terminalin:

  • java -jar
  • $ java -jar selen-server-i pavarur-2.46.0.jar
• Shihni pamjen e ekranit më lart

Më pas ekzekutoni skriptin e testit:

• Për Windows përdorni vijën e komandës (cmd):

  • moka
  • # moka tutorial1.js

• Për Mac ose Linux, hapni terminalin:

  • moka
  • $ mocha tutorial.js
• Shihni pamjen e ekranit më lart

Pra, çfarë ndodhi?

Mocha thërret skenarin "tutorial1.js". Shoferi filloi shfletuesin (Firefox), ngarkoi faqen dhe verifikoi titullin.

Hapi 4: Shembull Uebfaqe

Të gjithë shembujt janë kundër këtij sajti.

Uebfaqja shembull gjendet në: Faqja e Provës së Udhërrëfyesit të Shoferit në Internet

Të gjithë skriptet e testimit mund të shkarkohen nga github.

Hapi 5: Shembuj të Veçantë

I gjithë kodi është i disponueshëm në github: Udhëzues i Shoferit të Internetit IO në github

• Verifikoni lidhjen dhe tekstin e lidhjes në një listë të parregulluar - "linkTextURL1.js"

  • Lista e parenditur ka një dhe lidhja është artikulli i katërt i listës.
  • URL -ja duhet të jetë "https://tlkeith.com/contact.html"

// Verifikoni Teksti i lidhjes me Na Kontaktoni

ajo ('duhet të përmbajë tekstin e lidhjes për Na Kontaktoni', funksioni () {kthimi i shoferit.getText ("// ul [@id = 'lista ime']/li [4]/a"). pastaj (funksioni (lidhja) {tastierë.log ('Lidhja u gjet:' + lidhja); (lidhja).duhet.equal ("Na Kontaktoni");});}); // Verifikoni Na Kontaktoni URL -në e saj ('duhet të përmbajë URL -në e Kontaktit', funksioni () {kthimi i shoferit.getAttribute ("// ul [@id = 'lista ime']/li [4]/a", "href").pastaj (funksioni (lidhja) {(lidhja).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL u gjet:' + link);});});

• Verifikoni tekstin e të drejtës së autorit - "Copyright1.js"

  • Ky shembull tregon 2 mënyra të ndryshme për të gjetur tekstin e të drejtës së autorit:

    • nga përzgjedhësi i elementeve
    • duke përdorur xpath si përzgjedhës të elementeve

// Verifikoni tekstin e të drejtës së autorit duke përdorur id si përzgjedhës të elementeve

ajo ('duhet të përmbajë tekstin e të drejtës së autorit', funksioni () {kthimi i shoferit.getText ("#copyright"). pastaj (funksioni (lidhja) {console.log ('E drejta e autorit u gjet:' + link); (link).duhet. barabartë ("Tony Keith - tlkeith.com @ 2015 - Të gjitha të drejtat e rezervuara.");});}); // Verifikoni tekstin e së drejtës së autorit duke përdorur xpath si përzgjedhës elementi ('duhet të përmbajë tekstin e të drejtës së autorit', funksioni () {kthimi i shoferit.getText ("// footer/center/p"). Pastaj (funksioni (lidhja) {console.log ('E drejta e autorit u gjet:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Të gjitha të drejtat e rezervuara.");});});

• Plotësoni fushat e formularit dhe dorëzoni - "formFillSubmit1.js"

  • Plotësoni emrin, mbiemrin dhe dorëzoni, pastaj prisni për rezultatet.

  • Ky shembull tregon 3 metoda të mbushjes së fushës së futjes së emrit të parë:

    • nga id
    • nga xpath nga hyrja
    • nga xpath nga forma-> hyrje
  • Gjithashtu tregon se si të pastroni një fushë hyrëse

// Vendosni emrin e parë duke përdorur id në: Tony

ajo ('duhet të vendosë emrin e parë në Tony', funksioni () {kthehu driver.setValue ("#fname", "Tony").getValue ("#name"). pastaj (funksioni (e) {(e).duhet.be.equal ("Tony"); console.log ("Emri:" + e);});}); // Pastroni emrin e parë duke përdorur id it ('duhet të fshihet emri i parë', funksioni () {return driver.clearElement ("#name").getValue ("#name"). Pastaj (funksioni (e) {(e).duhet.të jetë i barabartë (""); console.log ("Emri:" + e);});}); // Vendosni emrin e parë duke përdorur xpath nga hyrja në: Tony it ('duhet të vendosë emrin e parë në Tony', funksioni () {return driver.setValue ("// input [@name = 'fname']" "," Tony ").getValue ("// input [@name = 'fname']"). pastaj (funksioni (e) {(e).should.be.equal ("Tony"); console.log ("Emri:" + e);});}); // Pastroni emrin e parë duke përdorur xpath nga futja e tij ('duhet të fshihet emri i parë', funksioni () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). atëherë (funksioni (e) {(e).duhet.be.equal (" "); console.log (" Emri: " + e);});});} // Vendosni emrin e parë duke përdorur xpath nga forma në: Tony it ('duhet të vendosë emrin e parë në Tony', funksioni () {return driver.setValue ("// forma [@id = 'search-form']/input [1] "," Tony ").getValue (" // forma [@id = 'search-form']/input [1] "). Pastaj (funksioni (e) {(e).duhet.be.equal ("Tony"); console.log ("Emri:" + e);});}); // Vendosni mbiemrin duke përdorur id në: Keith it ('duhet të vendosë mbiemrin në Keith', funksioni () {return driver.setValue ("#lname", "Keith").getValue ("#lname") atëherë (funksioni (e) {(e).should.be.equal ("Keith"); console.log ("Mbiemri:" + e);});}); // Paraqisni formularin dhe prisni për rezultatet e kërkimit atë ('duhet të dorëzoni formularin dhe prisni rezultatet', funksioni () {return driver.submitForm ("#search-form"). Pastaj (funksioni (e) {console.log (' Paraqitni Formularin e Kërkimit ');}).waitForVisible ("#search-results", 10000).pastaj (funksioni (e) {console.log (' Rezultatet e kërkimit u gjetën ');});});

• Klikoni butonin Trego/Fshih dhe Verifiko tekstin - "showHideVerify1.js"

  • Teksti është në një element shfaqjeje/fshehjeje. Butoni kontrollon gjendjen.

  • Ky shembull tregon:

    • Klikoni butonin për tu zgjeruar
    • Prisni që elementi të jetë i dukshëm (i zgjeruar)
    • Verifikoni tekstin (kopjoni kuvertën)

// klikoni butonin "Më shumë informacion" dhe verifikoni tekstin në elementin e zgjeruar

ajo ('duhet të klikoni butonin më shumë informacion dhe të verifikoni tekstin', funksioni () {kthejeni drejtuesin. klikoni ("#moreinfo"). pastaj (funksioni () {console.log ('Klikoni butonin Më shumë informacion');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'CollaExample']/div"). pastaj (funksioni (e) {console.log ('Teksti:' + e); (e).duhet.të jetë i barabartë ("Të gjitha gjërat e mira shkojnë këtu!");});});

• Verifikoni gabimet e fushës së formularit - "formFieldValidation.js"

  • Përdorni skriptet e testit për të verifikuar që mesazhet e sakta të gabimit janë prodhuar.

  • Ky shembull tregon:

    Verifikoni mesazhet me tekst të gabimit dhe verifikoni vendndodhjen (pozicioni i listës së parenditur)

ajo ('duhet të përmbajë 5 gabime: e para/e fundit/adresa/qyteti/shteti', funksioni () {

ktheje shoferin.getText ("// ul [@class = 'alarm alert-rrezik']/li [1]"). pastaj (funksioni (e) {console.log ('Gabimi u gjet:' + e); (e).duhet. {console.log ('Gabimi u gjet:' + e); (e).should.be.equal ('Ju lutemi shkruani mbiemrin');}).getText ("// ul [@class = 'alarm alarm-rrezik ']/li [3] "). atëherë (funksioni (e) {console.log (' Gabimi u gjet: ' + e); (e).should.be.equal (' Ju lutemi shkruani adresën ');}). getText ("// ul [@class = 'alarm alert-rrezik']/li [4]"). pastaj (funksioni (e) {console.log ('Gabimi u gjet:' + e); (e).duhet.be.equal ('Ju lutemi futni qytetin');}).getText ("// ul [@class = 'alert alert-rrezik']/li [5]"). pastaj (funksioni (e) {console.log ('Gabimi u gjet:' + e); (e). Duhet.be.equal ('Ju lutemi shkruani gjendjen');}); });

• Lidhja e të dhënave për të vërtetuar lidhjen/tekstin/faqen e URL - "LoopDataExample1.js"

  • Ky shembull tregon: Përdorni një grup të dhënash JSON për të ruajtur lidhjen dhe emrin, pastaj përsëriteni

    • Verifikoni çdo tekst dhe lidhje URL
    • Klikoni lidhjen dhe ngarkoni faqen

// Të dhënat e lidhjes - lidhja dhe 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 "," emri ":" 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 ":" dynamBrowser.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 "}]; … // lakoni përmes secilës lidhje linkArray linkArray.forEach (funksioni (d) {it ('duhet të përmbajë tekst/lidhje pastaj të shkoj në faqe -' + d.name, funksion () {kthimi i shoferit // sigurohuni që jeni në faqen fillestare.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). pastaj (funksioni (titulli) {// verifikoni titullin (titulli).should.be.equal ("Shoferi i Internetit IO - Faqja e Testit Tutorial ");}) // gjeni URL -në.getAttribute ('a =' + d.name," href "). Pastaj (funksioni (lidhja) {(lidhja).duhet.e barabartë (d.link); console.log ('URL u gjet:' + d.link);}) // shkoni te faqja e URL-së dhe verifikoni se ekziston. klikoni ('a =' + d.name).waitForVisible ("#js-repo-pjax- enë ", 10000).pastaj (funksion () {console.log ('Faqja e Github u gjet');});});});

• Rritja e të dhënave statike për të plotësuar fushat e formularit - "loopDataExample2.js"

  • Ky shembull tregon: Përdorni një grup të dhënash JSON për të ruajtur emrin/mbiemrin

    • Rrethoni të dhënat për të mbushur fushat e formularit, pastaj dorëzoni formularin
    • Prisni faqen e rezultateve
    • Verifikoni emrin / mbiemrin në faqen e rezultateve

// array data - firstName dhe lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // lakoni secilën dataArray dataArray.forEach (funksioni (d) {it ('duhet të plotësojë fushat, faqen e përmbledhjes', funksionin () {shoferi i kthimit // sigurohuni që jeni në faqen e fillimit.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). atëherë (funksioni (titulli) {// verifikoni titullin (titullin).should.be.equal ("Web Driver IO - Faqja e Testit Tutorial");}).setValue ("#fname", d.firstName).getValue ("#name"). pastaj (funksioni (e) {(e).duhet.be.equal (d.firstName); console.log ("Së pari Emri: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Pastaj (funksioni (e) {(e).duhet.be.equal (d.lastName); console.log ("Mbiemri:" + e);}).submitForm ("#kërko-formë"). pastaj (funksioni () {console.log ('Paraqitni Formularin e Kërkimit');}).waitForVisible ("#search-results", 10000).pastaj (funksioni () {console.log ('Faqja e rezultatit u gjet');}).getText ("// h1"). pastaj (funksioni (lidhja) {console.log ('Teksti u gjet:' + link); (link). Duhet.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Validoni vetitë e CSS - "cssValidation1.js"

  • Ky shembull tregon se si të:

    • Vlerësoni vetitë e mëposhtme CSS:

      • ngjyrë
      • mbushje (lart, poshtë, djathtas, majtas)
      • ngjyrë e sfondit

ajo ("duhet të përmbajë ngjyrën e saktë të tekstit të gabimit", funksioni () {kthimi i shoferit.getCssProperty ("// ul [@class = 'alarm alert-rrezik']/li [1]", "ngjyra"). pastaj (funksioni (rezultati) {console.log ('Ngjyra e gjetur:' + result.parsed.hex + "ose" + result.value); (result.parsed.hex).duhet.be.equal ('#a94442'); });});

ajo ('duhet të përmbajë mbushje të saktë në qelizën e tabelës', funksioni () {

ktheje shoferin // mbushje: sipër djathtas poshtë majtas.getCssProperty ("// tabela [@id = 'lista e skedarëve']/thead/tr [1]/td [1]", "mbushje-krye"). pastaj (funksioni (rezultati) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// tabela [@id = 'lista e skedarëve']/thead/tr [1]/td [1] "," mbushje-fund "). pastaj (funksioni (rezultati) {console.log ('mbushja-fundi është gjetur:' + rezultati.vlera); (rezultati.vlera).duhet të jetë i barabartë ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "mbushje- djathtas "). pastaj (funksioni (rezultati) {console.log ('mbushja-e djathta u gjet:' + rezultati.vlera); (rezultati.vlera). duhet.be.equal ('5px');}).getCssProperty ("// tabela [@id = 'filelist']/thead/tr [1]/td [1]", "mbushje-majtas"). pastaj (funksioni (rezultati) {console.log ('mbushja-majtas u gjet: ' + rezultati.vlera); (rezultati.vlera).duhet të jetë i barabartë (' 5px ');}); });

ajo ('duhet të përmbajë ngjyrën e duhur të sfondit në kokën e tabelës', funksioni () {

ktheje shoferin.getCssProperty ("// tabela [@id = 'lista e skedarëve']/thead", "sfondi-ngjyra"). pastaj (funksioni (rezultati) {console.log ('ngjyra e sfondit u gjet:' + rezultati.parsed gjashtëkëndësh); (rezultati.parsed.hex).duhet të jetë i barabartë ('#eeeeee');}); });

Hapi 6: Këshilla dhe truke

• Debugging:

  • Ndizni regjistrimet në nivelin e drejtuesit për më shumë korrigjim dhe për të krijuar regjistra.

    • Cakto logLevel në 'të folur'
    • Vendosni logOutput në emrin e drejtorisë ('regjistrat')

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

• Përdorni console.log (), debug (), getText () për të korrigjuar gabimet.

  • console.log () - Përdorni për të shfaqur informacionin për të përcaktuar gjendjen.
  • debug () - Përdorni pauzë shfletuesin/skriptin derisa enter të shtypet në rreshtin e komandës.

  • getText () - Përdorni për të verifikuar që jeni duke bashkëvepruar me elementin e duhur.

    Veçanërisht e dobishme me shprehjet xpath

// Klikoni në artikullin 3 nga lista

it ('duhet të klikoni në artikullin 3 nga lista', funksioni () {// përdorni getText () për të verifikuar që xpath është i saktë për elementin e kthimit të drejtuesit.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Pastaj (funksioni (lidhja) {// përdorni console.log () për të nxjerrë informacionin console.log ('Lidhja u gjet:' + lidhja); (lidhja).duhet.ekuilibër ("Pika 3");}) // përdorni debug () për të ndaluar veprimin për të parë se çfarë po ndodh në shfletues.debug (). Klikoni ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link klikuar');}) // prisni që të shfaqet formulari i kërkimit në google.waitForVisible ("#tsf", 20000).pastaj (funksioni (e) {console.log ('Rezultatet e kërkimit u gjetën');});});

• Përdorni ndryshoren e mjedisit për të ndryshuar në mënyrë dinamike shfletuesin:

  • Përdorni ndryshoren e mjedisit SELENIUM_BROWSER për të thirrur një shfletues të ndryshëm pa modifikuar çdo herë skriptin e testimit.
  • Kërkon një ndryshim të vogël kodimi për ta mbështetur.

Ndryshimet e Kodit:

// ngarkoni shoferin për shfletuesin

driver = webdriverio.remote ({aftësitë e dëshiruara: {Emri i shfletuesit: process.env. SELENIUM_BROWSER || 'chrome'}});

Shfletuesit e mbështetur:

• Internet Explorer - IE 8+ (Vetëm për Windows)

  SELENIUM_BROWSER = dmth moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = moça firefox

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = moka kromi

• Opera 12+

  SELENIUM_BROWSER = moka opera

• Safari

  SELENIUM_BROWSER = safari mocha

Duke testuar:

• Për Windows përdorni git bash shell:

  • SELENIUM_BROWSER = moka kromi
  • $ SELENIUM_BROWSER = moka krom DynamicBrowser.js

• Për Mac ose Linux, hapni terminalin:

  • SELENIUM_BROWSER = moka kromi
  • $ SELENIUM_BROWSER = moka krom DynamicBrowser.js

• Testimi i përgjegjshëm:

  • Përcaktoni pikat e prishjes bazuar në projektin ose kornizën (dmth. Rripin e nisjes).

  • Përcaktoni variablat e mjedisit për secilën pikë prishjeje:

    • Tavolinë - 1200 px
    • TABELA - 992 px
    • MOBILE - 768 px

  • Zhvilloni një komandë të ripërdorshme për të lexuar ndryshoren e mjedisit dhe për të vendosur madhësinë e shfletuesit.

    Shih shembullin më poshtë

  • Thirrni komandën e ripërdorshme në skriptin tuaj të provës.

// kodi i ripërdorshëm - biblioteka // fragmenti i kodit nëse (bp == "DESKTOP") {obj.width = 1200; obj. lartësia = 600; obj.emri = bp; } tjetër nëse (bp == "TABELA") {obj.width = 992; obj. lartësia = 600; obj.emri = bp; } tjetër nëse (bp == "MOBILE") {obj.width = 768; obj. lartësi = 400; obj.emri = bp; }

// Skript testi

para (funksioni (i kryer) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // vendosni madhësinë e dritares (('duhet të vendoset madhësia e dritares', funksioni (i kryer) {// vetëm gjerësia ka rëndësi driver.setWindowSize (wonize.width, winsize.height, function () {}). thirrje (e kryer);});

• Komandat e ripërdorshme (Komandat e personalizuara):

  • Shoferi i Internetit IO është lehtësisht i zgjerueshëm.
  • Më pëlqen të vendos të gjitha komandat e ripërdorshme në një bibliotekë. (ndoshta kjo është një shkollë e vjetër, por funksionon!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Përshkrimi: // Verifikon mbiemrin e mesazhit të gabimit të vlefshmërisë së formularit // // Hyrja: // numri - indeksi i gabimit (1-5) // Dalja: // asnjë // var verifyLastNameCheckError = funksioni () { var idx = argumente [0], thirrje kthyese = argumente [argumente.length - 1]; kjo.getText ("// ul [@class = 'alarm alert-rrezik']/li [" + idx + "]", funksioni (gabim, e) {console.log ('Gabimi u gjet:' + e); (e).duhet. }; // eksportoni modulin e funksionit.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Këtu janë ndryshimet specifike të nevojshme për të thirrur një funksion të ripërdorshëm

Shikoni formFieldValidation.js për shembullin e plotë të punës

// kërkojnë komandën e ripërdorshme - CommonLib

Common = kërkojnë ('./ Common/CommonLib'); … // lidh komandat driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (shofer)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (shoferi)); ajo ('duhet të përmbajë 2 gabime: emri/mbiemri', funksioni () {// thërras drejtuesin e funksionit të ripërdorshëm. verifyFirstNameError (1);.verifyLastNameError (2);});

• Skedari i Projektit/Struktura e Drejtorisë:

  • Këtu është struktura tipike e projektit:

    • "Projekti" - drejtoria kryesore e projektit

      • README.md - readme për projekt global

      • "Common" - drejtori për funksionet globale të përbashkëta për të gjitha projektet

        • common -lib.js - biblioteka e funksioneve globale
        • README.md - readme për funksionet globale

      • "Produkt1" - drejtori për produktin 1

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

        • "Common" - drejtori për funksionet lokale në projektin 1

          • prod1 -lib.js - biblioteka e funksioneve lokale për projektin 1
          • README.md - readme për funksionet lokale në projektin 1

      • "Produkt2"-drejtori për produktin 2test-script1.jstest-script2.js

        • "Common" - drejtori për funksionet lokale në projektin 2

          • prod2 -lib.js - biblioteka e funksioneve lokale për projektin 2
          • README.md - readme për funksionet lokale në projektin 2

• Ndani skriptet e testit në skedarë të shumtë:

  • Këtu është një shembull i përdorimit të skedarëve të shumtë:

    • Sanity Check - skripti bazë i testit për të verifikuar që gjithçka po funksionon
    • Elementi statik dhe vërtetimi i tekstit - verifikoni të gjithë elementët dhe tekstin
    • Formular/Faqe Error Validation - vërtetimi i gabimit
    • Rezultatet e Kërkimit - provoni përmbajtjen dinamike

• Thirrjet kundër VS. Premtimet:

  • Versioni 3 i Web Driver IO mbështet si thirrjet ashtu edhe premtimet.

    Premtimet janë metoda e preferuar pasi zvogëlon kodin e trajtimit të gabimit. Ju lutemi shihni më poshtë të njëjtin shembull të shkruar duke përdorur thirrjet dhe premtimet.

Sërish thirrje

// Vendosni/verifikoni emrin/mbiemrin duke përdorur Kthimin e Thirrjes

ajo ('duhet të vendosë/verifikojë emrin/mbiemrin duke përdorur Callbacks', funksioni (i kryer) {driver.setValue ("#name", "Tony", funksioni (e) {driver.getValue ("#fname", funksioni (gaboj, e) {(e).should.be.equal ("Tony"); console.log ("Emri:" + e); driver.setValue ("#lname", "Keith", funksioni (e) { driver.getValue ("#lname", funksioni (err, e) {(e). duhet.be.equal ("Keith"); console.log ("Mbiemri:" + e); bërë ();}});});});});});

Premtimet

// Vendosni/verifikoni emrin/mbiemrin duke përdorur Premtimet

it ('duhet të vendosë/verifikojë emrin/mbiemrin duke përdorur Premtimet', funksioni () {return driver.setValue ("#name", "Tony").getValue ("#name"). pastaj (funksioni (e) {(e).duhet të jetë i barabartë ("Tony"); console.log ("Emri:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). pastaj (funksioni (e) {(e).duhet.be.equal ("Keith"); console.log ("Mbiemri:" + e);});});

Hapi 7: Më shumë burime

Këtu janë disa burime shtesë për referencën tuaj:

• Grupet e diskutimit (Gitter)

  • Grupi i Diskutimit i Shoferit të Internetit IO
  • Grupi i diskutimit Mocha

• Projekte të tjera interesante

  • Supertest - pohimet
  • Chai - pohime

Hapi 8: Përfundimi

Kam kaluar ca kohë duke hulumtuar teknologjitë që do të përdor për projektin tim. Fillimisht fillova me Selenium Web Driver, por kalova në përdorimin e Web Driver IO. Shoferi i Internetit IO dukej se ishte më i lehtë për t'u përdorur dhe shumë më i lehtë për tu zgjeruar (të paktën dokumentacioni për zgjerimin - komandat e ripërdorshme ishin më të mira).

Kur fillova të shikoja teknologjitë, ishte e vështirë të gjeja shembuj të mirë që kishin lidhje me gjithçka që po përpiqesha të bëja. Kjo është arsyeja që doja të ndaja këtë informacion dhe njohuri me ju.

Teknologjitë funksionuan shumë më mirë sesa prisja megjithatë kishte një kurbë mësimi të përfshirë. Pasi kuptova se si të gjithë komponentët punuan së bashku, unë isha në gjendje të shkruaja skriptet e komplikuara të testit në një kohë shumë të shkurtër. Skriptet më të vështira ishin përbërës të bazuar në JavaScript, të tilla si një zgjedhës datash dhe përzgjedhës modalë.

Unë kurrë nuk jam etiketuar si zhvillues i JavaScript dhe as nuk kam dashur të jem ekspert i JavaScript, por përdorimi i këtyre teknologjive më ka motivuar patjetër të përmirësoj aftësitë e mia JS.

Shpresoj se ky artikull është i dobishëm dhe shembujt janë të qartë dhe informues.

Ju lutemi më tregoni nëse keni ndonjë pyetje ose koment.

Faleminderit, Tony Keith