Tīmekļa draivera IO apmācība, izmantojot tiešsaistes vietni un darba piemērus: 8 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Tīmekļa draivera IO apmācība, izmantojot tiešsaistes vietni un darba piemērus

Pēdējais atjauninājums: 26.07.2015

(Bieži pārbaudiet, kad atjauninu šīs instrukcijas ar sīkāku informāciju un piemēriem)

Fons

Nesen man tika uzdots interesants izaicinājums. Man vajadzēja ieviest automatizētu testēšanu Q/A nodaļā ar ļoti mazu tehnisko pieredzi un bez programmēšanas zināšanām.

Tas tiešām bija divi (2) atsevišķi izaicinājumi. Pirmais bija noteikt tehnoloģijas, lai veiktu automatizēto testēšanu. Otrais bija apmācīt Q/A nodaļu.

Rakstā tiks apskatītas tikai izmantotās tehnoloģijas un tas, ko es uzzināju šajā procesā.

Tehnoloģijas strādāja labi, bet man tiešām bija jāmeklē informācija un pavadīju daudzas stundas, lai noskaidrotu problēmas.

Man bija grūti internetā atrast informāciju par šīm tehnoloģijām, kas darbojas kopā.

Es vēlējos dalīties ar šo informāciju, tāpēc es uzrakstīju šo rakstu kopā ar testa skriptu paraugiem un testa vietni, lai skriptus palaistu.

Visus testa skriptus var atrast vietnē github, un darba testa vietne atrodas tīmekļa draivera IO apmācības testa vietnē

Es ceru, ka jums tas noderēs. Ja jūs to darāt, lūdzu, dariet man to zināmu.

Izmantojiet tehnoloģijas, lai:

• Pārbaudiet vietnes funkcionalitāti
• Pārbaudiet JavaScript funkcionalitāti
• Var palaist manuāli
• Var palaist automātiski

• Viegli iemācīties valodu programmētājiem

  Q/A personāls ar pamatzināšanām par HTML un JavaScript

• Izmantojiet tikai atvērtā koda programmatūru

Tehnoloģijas

Manis izvēlēto tehnoloģiju saraksts:

• mocha - testa skrējējs - izpilda testa skriptus
• shouldjs - apgalvojumu bibliotēka
• webdriverio - pārlūka vadības saites (valodu saites)
• selēns - pārlūka abstrakcija un darbojas rūpnīca

• Pārlūkprogrammas/mobilo ierīču draiveri + pārlūkprogrammas

  • Firefox (tikai pārlūkprogrammā)
  • Chrome (pārlūkprogramma un draiveris)
  • IE (pārlūks un draiveris)
  • Safari (pārlūkprogrammas un draivera spraudnis)

1. darbība: programmatūras instalēšana

Lai sāktu, jums ir jābūt instalētam atsevišķam serverim Node JS, Web Driver IO, Mocha, Should un Selnium.

Šeit ir instalēšanas instrukcijas operētājsistēmai Windows 7.

(Es esmu Mac/Linux lietotājs, bet man viss bija jāinstalē operētājsistēmā Windows 7, tāpēc es to iekļāvu jūsu uzziņai. Instalēšanas procedūra Mac/Linux ir līdzīga. Lai uzzinātu vairāk, lūdzu, skatiet tiešsaistes atsauces informāciju.)

No pārlūkprogrammas:

• Instalējiet mezglu, kas ietver NPM (mezglu pakotņu pārvaldnieku)

• dodieties uz vietni

  • Noklikšķiniet uz instalēt
  • Saglabājiet un palaidiet failu
  • Ceļa un mainīgā iestatīšana (NODE_PATH)
  • Dodieties uz Vadības panelis-> Sistēma un drošība-> Sistēma
    • Papildu sistēmas iestatījumi

    • Vides iestatīšana (lietotāja mainīgie)

      • Pievienot PATH

        C: / Users {USERNAME} AppData / Viesabonēšana / npm;

      • Pievienojiet NODE_PATH (sistēmas mainīgie)

        C: / Users {USERNAME} AppData / Viesabonēšana / npm / node_modules

Piezīme. Es instalēju visu programmatūru zemāk, izmantojot npm globālo opciju (-g). Tas parasti nav ieteicams, bet šai instalācijai man bija jāinstalē globāli, jo tā tiks izmantota vairākos projektos.

Atveriet komandu uzvedni (cmd):

(vietējais lietotāja administrators)

• Instalējiet selēna "tīmekļa draiveri IO"

  • npm instalējiet webdriverio -g

    Tas jūsu datorā globāli instalēs tīmekļa draivera IO

• Instalējiet “mocha” testa skrējēja programmatūru

  • npm instalēt mocha -g

    Tas jūsu datorā globāli instalēs moku

• Instalējiet apgalvojumu bibliotēku “vajadzētu”

  • npm instalēt vajadzētu -g

    Tas jūsu datorā globāli instalēs “vajadzētu”

• Instalējiet Selenium Stand Alone Server

  • Dodieties uz vietni
  • Lejupielādējiet jar failu un pārejiet uz selēna direktoriju.

• Instalējiet pārlūkprogrammas un pārlūkprogrammas draiverus, lai pārbaudītu

  • No cmd uzvednes:

    • Izveidojiet "selēna" direktoriju
    • C: / Users {USERNAME} selēns

    • Komandas:

      • cd C: / Users {USERNAME}
      • mkdir selēns

    • Firefox

      • Instalējiet Firefox pārlūkprogrammu, ja tā vēl nav instalēta.
      • Ceļš ir jāiestata, lai palaistu Firefox no komandrindas (cmd).
      • Vadības panelis-> Sistēma un drošība-> Sistēma
        • Papildu sistēmas iestatījumi
        • Vides iestatījumi
        • Pievienojiet (pievienojiet lietojiet semikolu) ceļa mainīgajam
        • C: / Program Files (x86) Mozilla Firefox
      • Firefox nav nepieciešams īpašs tīmekļa draiveris.

    • Chrome

      • Instalējiet pārlūku Chrome, ja tas vēl nav instalēts.
      • Ceļš VAR būt iestatīts, lai palaistu pārlūku Chrome no komandrindas (cmd).
      • Vispirms pārbaudiet: chrome.exe no komandrindas (cmd)
      • Ja Chrome netiek startēts, rīkojieties šādi:
      • Vadības panelis-> Sistēma un drošība-> Sistēma
        • Papildu sistēmas iestatījumi
        • Vides iestatījumi
        • Pievienojiet (pievienojiet lietojiet semikolu) ceļa mainīgajam
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Pārlūkam Chrome ir nepieciešams īpašs tīmekļa draiveris.

        Dodieties uz vietni chromium.org un izpakojiet 32 bitu draiveri direktorijā “selēns”

    • Internet Explorer (tikai operētājsistēmai Windows - nedarbosies citās platformās)

      • IE ir nepieciešams īpašs tīmekļa draiveris.

        • Dodieties uz vietni
        • Lejupielādējiet un izpakojiet 64 bitu draiveri direktorijā “selēns”.

2. darbība. Pamata testa skripts

Sāksim ar dažiem pamatiem.

Šeit ir vienkāršs mokas skripts, kas atvērs vietni un pārbaudīs nosaukumu.

// apmācība1.js

// // Šis ir vienkāršs testa skripts, lai atvērtu vietni un // apstiprinātu nosaukumu. // nepieciešamās bibliotēkas var webdriverio = pieprasīt ('webdriverio'), vajadzētu = pieprasīt ('vajadzētu'); // testa skripta bloks vai komplekta apraksts ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {// iestatiet taimautu uz 10 sekundēm this.timeout (10000); var driver = {}; // āķis, lai palaistu pirms testiem pirms (funkcija (darīts) {// ielādējiet draiveri pārlūkprogrammas draiverim = webdriverio.remote ({vēlamās iespējas: {browserName: 'firefox'}}); driver.init (darīts);}); // testa specifikācija - "specifikācija" it ('jāielādē pareiza lapa un nosaukums', funkcija () {// ielādēt lapu, pēc tam izsaukt funkciju () atgriezt draiveri.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // iegūt nosaukumu, pēc tam nodot virsrakstu funkcijai ().getTitle (). tad (funkcija (nosaukums) {// pārbaudīt nosaukumu (nosaukums).should.be.equal ("Web Driver IO - Tutorial Test Page "); // atcelšana konsoles atkļūdošanai // console.log ('Pašreizējais lapas nosaukums:' + virsraksts);});}); // //" āķis ", kas tiks palaists pēc visiem testiem šajā blokā pēc (funkcija (darīts (darīts) {driver.end (darīts);});});

Novērojumi:

• Vispirms jums vajadzētu pamanīt, ka testa skripts ir uzrakstīts JAVASCRIPT (beidzas ar.js paplašinājumu).

• Pamata struktūra visiem testa skriptiem ir gandrīz identiska.

  • Galvenes komentāri (//)
  • Nepieciešamās bibliotēkas
  • Iestatīt opcijas (pēc izvēles)
  • Āķis: ielādējiet pārlūkprogrammas draiveri
  • Testa komplekts (aprakstiet)
  • Testa specifikācijas (komplektā var būt daudz specifikāciju)
  • Āķis: sakopt

• Testa komplekts sākas ar apraksta funkciju, kurai ir divi parametri:

  • String - testa komplekta apraksts

    • “Pārbaudiet, vai lapā nav pareizrakstības”
    • “Pārbaudīt radio pogu darbību”

  • funkcija - izpildāmā koda bloks

    aprakstīt (‘Testa komplekta apraksts’, funkcija () {});

• Testa komplektā būs 1 vai vairākas testa specifikācijas (specifikācija)

• Specifikācijas sākas ar funkciju, kurai ir divi parametri:

  • String - testa specifikācijas apraksts

    • “Jābūt pareizam saites tekstam un saites URL”
    • “Jāiekļauj pareizais izteiciens (kopēšanas klājs)
  • funkcija - izpildāmā koda bloks
  • it (‘Testa specifikācijas apraksts’, funkcija () {});
• Specifikācijā ir viena vai vairākas cerības, kas pārbauda koda stāvokli

• Tos sauc par apgalvojumiem

  Bibliotēka “vajadzētu” sniedz apgalvojumus

• Gandrīz visos gadījumos jums būs jāatrod viens vai vairāki elementi, izmantojot selektoru, un pēc tam jāveic kāda darbība ar elementu (-iem)

  • Piemēri:

    • Atrodiet lapā tekstu un pārbaudiet tekstu
    • Aizpildiet veidlapu un iesniedziet
    • Pārbaudiet elementa CSS

Sīkāk apskatīsim piemēru ar komentāriem

Ielādējiet nepieciešamās bibliotēkas: tīmekļa draivera IO un vajadzētu.

// nepieciešamās bibliotēkas

var webdriverio = pieprasīt ('webdriverio'), vajadzētu = pieprasīt ('vajadzētu');

Definējiet testa komplektu. Šo komplektu sauc: "Web Driver IO virsraksta pārbaude - apmācības testa lapas vietne"

// testa skripta bloks vai komplekts

aprakstīt ('Web Test IO Title Test - Tutorial Test Page Website', funkcija () {…});

Iestatiet taimautu uz 10 sekundēm, lai skripts netiktu taimauts, ielādējot lapu.

// iestatiet taimautu uz 10 sekundēm

this.timeout (10000);

Āķis, lai ielādētu pārlūka draiveri pirms specifikāciju "specifikāciju" palaišanas. Šajā piemērā ir ielādēts Firefox draiveris.

// āķis, lai palaistu pirms testiem

pirms (funkcija (darīts) {// ielādēt draiveri pārlūkprogrammas draiverim = webdriverio.remote ({vēlamās iespējas: {pārlūkprogrammas_nosaukums: 'firefox'}}); draiveris.init (darīts);});

Definējiet testa specifikāciju.

// testa specifikācija - "specifikācija"

it ('jāielādē pareiza lapa un nosaukums', funkcija () {…});

Ielādējiet vietnes lapu

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

Iegūstiet nosaukumu un pēc tam nododiet to funkcijai ()

.getTitle (). tad (funkcija (nosaukums) {

… });

Pārbaudiet nosaukumu, izmantojot apgalvojuma bibliotēku.

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

Āķis, lai izietu un notīrītu vadītāju, kad esat pabeidzis.

// "āķis", lai palaistu pēc visiem testiem šajā blokā

pēc (funkcija (darīts) {vadītājs. beigas (darīts);});

3. darbība: palaidiet testa skriptu

Tagad redzēsim, ko testa skripts dara, kad tas tiek palaists.

Vispirms palaidiet Selēna atsevišķo serveri:

• Operētājsistēmai Windows izmantojiet komandrindu (cmd):

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

• Operētājsistēmai Mac vai Linux atveriet termināli:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Skatiet ekrānuzņēmumu iepriekš

Tālāk palaidiet testa skriptu:

• Operētājsistēmai Windows izmantojiet komandrindu (cmd):

  • mokas
  • # mocha tutorial1.js

• Operētājsistēmai Mac vai Linux atveriet termināli:

  • mokas
  • $ mocha tutorial.js
• Skatiet ekrānuzņēmumu iepriekš

Kas tad notika?

Mocha izsauc skriptu "tutorial1.js". Draiveris iedarbināja pārlūkprogrammu (Firefox), ielādēja lapu un pārbaudīja nosaukumu.

4. darbība. Vietnes piemērs

Visi piemēri ir vērsti pret šo vietni.

Tīmekļa vietnes piemērs atrodas: Web Driver IO Tutorial Test Page

Visus testa skriptus var lejupielādēt no github.

5. darbība. Īpaši piemēri

Viss kods ir pieejams vietnē github: Web Driver IO Tutorial vietnē github

• Saites un saites teksta verificēšana nesakārtotā sarakstā - "linkTextURL1.js"

  • Nesakārtotajam sarakstam ir un saite ir ceturtais saraksta vienums.
  • URL jābūt “https://tlkeith.com/contact.html”

// Verificēt saites tekstu Sazinieties ar mums

it ('jāietver saites teksts sazināties ar mums'), funkcija () {atgriezties draiverī.getText ("// ul [@id = 'mylist']/li [4]/a"). then (funkcija (saite) {konsole.log ('Saite atrasta:' + saite); (saite).should.equal ("Sazinieties ar mums");});}); // Verify Contact Us URL.tad (funkcija (saite) {(saite).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL atrasts:' + saite);});});

• Pārbaudiet autortiesību tekstu - "Copyright1.js"

  • Šajā piemērā ir parādīti divi dažādi veidi, kā atrast autortiesību tekstu:

    • ar kā elementu atlasītāju
    • izmantojot elementu atlasītāju xpath

// Pārbaudiet autortiesību tekstu, izmantojot elementu atlasītāju id

it ('vajadzētu saturēt autortiesību tekstu', function () {return driver.getText ("#copyright"). then (function (link) {console.log ('Autortiesības atrastas:' + saite); (saite). vajadzētu. vienāds ("Tonijs Kīts - tlkeith.com @ 2015 - visas tiesības aizsargātas.");});}); // Pārbaudiet autortiesību tekstu, izmantojot elementu atlasītāju, izmantojot xpath ('jāietver autortiesību teksts', function () {return driver.getText ("// footer/center/p").) (Funkcija (saite) {console.log ('Atrastas autortiesības:' + saite); (saite).should.equal ("Tonijs Kīts - tlkeith.com @ 2015 - visas tiesības aizsargātas.");});});

• Aizpildiet veidlapu laukus un iesniedziet - "formFillSubmit1.js"

  • Ievadiet vārdu, uzvārdu un iesniedziet, pēc tam gaidiet rezultātus.

  • Šajā piemērā ir parādītas 3 vārda ievades lauka aizpildīšanas metodes:

    • pēc id
    • ar xpath no ievades
    • ar xpath no formas-> ievades
  • Arī parāda, kā notīrīt ievades lauku

// Iestatiet pirmo vārdu, izmantojot id uz: Tonijs

it ('vajadzētu nosaukt vārdu Tony', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).suld.be.equal ("Tony"); console.log ("Vārds:" + e);});}); // Dzēst pirmo vārdu, izmantojot id it ('vajadzētu dzēst vārdu', function () {return driver.clearElement ("#fname").getValue ("#fname"). Then (function (e) {(e).vai jābūt.vienādam (""); console.log ("Vārds:" + e);});}); // Iestatiet pirmo vārdu, izmantojot xpath no ievades uz: Tony it ('vajadzētu iestatīt vārdu uz Tony', function () {return driver.setValue ("// input [@name = 'fname']", "Tony").getValue ("// input [@name = 'fname']"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("Vārds:" + e);});}); // Notīriet pirmo vārdu, izmantojot xpath, ievadot to ('vajadzētu dzēst vārdu', function () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] "). tad (funkcija (e) {(e).vajadzētu.be.equal (" "); console.log (" Vārds: " + e);});}); // Iestatiet pirmo vārdu, izmantojot xpath no formas uz: Tony it ('vajadzētu iestatīt vārdu uz Tony', function () {return driver.setValue ("// forma [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Then (funkcija (e) {(e).should.be.equal ("Tonijs"); console.log ("Vārds:" + e);});}); // Iestatiet uzvārdu, izmantojot id uz: Keith it ('jāiestata uzvārds uz Keith', function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"). Tad (funkcija (e) {(e). vajadzētu.be.equal ("Keith"); console.log ("Uzvārds:" + e);});}); // Iesniedziet veidlapu un gaidiet meklēšanas rezultātus ((jāiesniedz veidlapa un jāgaida rezultāti), function () {return driver.submitForm ("#search-form"). Iesniegt meklēšanas veidlapu ');}).waitForVisible ("#search-results", 10000).tad (funkcija (e) {console.log (' Atrasti meklēšanas rezultāti ');});});

• Noklikšķiniet uz pogas Rādīt/paslēpt un pārbaudiet tekstu - "showHideVerify1.js"

  • Teksts ir parādīšanas/paslēpšanas elementā. Poga kontrolē stāvokli.

  • Šis piemērs parāda:

    • Noklikšķiniet uz pogas, lai izvērstu
    • Pagaidiet, līdz elements ir redzams (izvērsts)
    • Teksta pārbaude (kopēšanas klājs)

// noklikšķiniet uz pogas "Papildinformācija" un pārbaudiet tekstu izvērstā elementā

it ('vajadzētu noklikšķināt uz vairāk informācijas pogas un pārbaudīt tekstu', function () {return driver.click ("#moreinfo"). then (function () {console.log ('Noklikšķināta uz pogas Papildinformācija');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collapseExample']/div"). then (function (e) {console.log ('Text:' + e); (e).vajadzētu.be.equal ("Šeit viss notiek labi!");});});

• Apstiprināt veidlapu lauku kļūdas - "formFieldValidation.js"

  • Izmantojiet testa skriptus, lai pārbaudītu, vai tiek radīti pareizi kļūdu ziņojumi.

  • Šis piemērs parāda:

    Pārbaudiet kļūdas īsziņas un pārbaudiet atrašanās vietu (nesakārtota saraksta pozīcija)

it ('jāsatur 5 kļūdas: first/last/address/city/state', function () {

atgriezt draiveri.getText ("// ul [@class = 'alert alert-risks']/li [1]"). tad (funkcija (e) {console.log ('Atrasta kļūda:' + e); (e).should.be.equal ('Lūdzu, ievadiet vārdu');}).getText ("// ul [@class = 'alert alert-risks']/li [2]"). tad (funkcija (e) {console.log ('Atrasta kļūda:' + e); (e).should.be.equal ('Lūdzu, ievadiet uzvārdu');}).getText ("// ul [@class = 'alert alert-risks ']/li [3] "). tad (funkcija (e) {console.log (' Atrasta kļūda: ' + e); (e).should.be.equal (' Lūdzu, ievadiet adresi ');}). getText ("// ul [@class = 'alert alert-risks']/li [4]"). then (funkcija (e) {console.log ('Atrasta kļūda:' + e); (e). vajadzētu.be.equal ('Lūdzu, ievadiet pilsētu');}).getText ("// ul [@class = 'alert alert-risks']/li [5]"). tad (funkcija (e) {console.log ('Atrasta kļūda:' + e); (e).should.be.equal ('Lūdzu, ievadiet valsti');}); });

• Datu apkopošana, lai apstiprinātu URL saiti/tekstu/lapu - "LoopDataExample1.js"

  • Šis piemērs parāda: izmantojiet JSON datu masīvu, lai saglabātu saiti un nosaukumu, pēc tam atkārtojiet

    • Pārbaudiet katru URL tekstu un saiti
    • Noklikšķiniet uz saites un ielādējiet lapu

// Saites dati - saite un teksts

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 "}]; … // cilpa cauri katrai saitei.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). tad (funkcija (nosaukums) {// verificējiet nosaukumu (nosaukums).should.be.equal ("Tīmekļa draivera IO - Apmācības testa lapa ");}) // atrodiet vietrādi URL.getAttribute ('a =' + d.nosaukums," href "). Pēc tam (funkcija (saite) {(saite).should.equal (d.link); console.log ('URL atrasts:' + d.link];}) // dodieties uz URL lapu un pārbaudiet, vai tā pastāv.klikšķiniet ('a =' + d.name).waitForVisible ("#js-repo-pjax- konteiners ", 10000).tad (function () {console.log ('Atrasta Github lapa');});});});

• Statisko datu apkopošana veidlapu lauku aizpildīšanai - "loopDataExample2.js"

  • Šis piemērs parāda: Izmantojiet JSON datu masīvu, lai saglabātu vārdu/uzvārdu

    • Pārlūkojiet datus, lai aizpildītu veidlapas laukus, un pēc tam iesniedziet veidlapu
    • Gaidiet rezultātu lapu
    • Rezultātu lapā pārbaudiet vārdu / uzvārdu

// datu masīvs - firstName un lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // cilpa caur katru dataArray dataArray.forEach (funkcija (d) {it ('jāaizpilda lauki, kopsavilkuma lapa', funkcija () {atgriešanās draiveris // pārliecinieties, vai atrodaties sākumlapā.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). tad (funkcija (nosaukums) {// verificējiet nosaukumu (virsraksts).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 ("Pirmais Nosaukums: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Then (function (e) {(e).should.be.equal (d.lastName)); console.log ("Uzvārds:" + e);}).submitForm ("#search-form"). pēc tam (function () {console.log ('Iesniegt meklēšanas veidlapu');}).waitForVisible ("#search-results", 10000).tad (function () {console.log ('Rezultātu lapa atrasta');}).getText ("// h1"). then (function (link) {console.log ('Teksts atrasts:' + saite); (saite).vajadzētu.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Apstiprināt CSS rekvizītus - "cssValidation1.js"

  • Šis piemērs parāda, kā:

    • Apstipriniet šādus CSS rekvizītus:

      • krāsa
      • polsterējums (augšā, apakšā, pa labi, pa kreisi)
      • fona krāsa

it ('vajadzētu saturēt pareizu kļūdas teksta krāsu', function () {return driver.getCssProperty ("// ul [@class = 'alert alert-risks']/li [1]", "krāsa"). tad (function (result) {console.log ('Atrasta krāsa:' + result.parsed.hex + "vai" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('tabulas šūnā vajadzētu būt pareizam polsterējumam', function () {

atgriezt draiveri // polsterējums: augšējā labajā apakšējā kreisajā stūrī.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top").) (funkcija (rezultāts) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). tad (funkcija (rezultāts) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- pa labi "). tad (funkcija (rezultāts) {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 (funkcija (rezultāts) {console.log ('padding-left found: ' + rezultāts.vērtība); (rezultāts.vērtība).vai jābūt.vienādam (' 5 pikseļi ');}); });

it ('tabulas galvenē jābūt pareizai fona krāsai', function () {

atgriezt draiveri.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). tad (funkcija (rezultāts) {console.log ('atrasta fona krāsa:' + result.parsed. hex); (result.parsed.hex). jābūt.vienādam ('#eeeeee');}); });

6. solis: padomi un triki

• Atkļūdošana:

  • Ieslēdziet reģistrēšanu draivera līmenī, lai iegūtu vairāk atkļūdošanas un izveidotu žurnālus.

    • Iestatīt logLevel uz “detalizēts”
    • Iestatīt logOutput uz direktorija nosaukumu ('žurnāli')

draiveris = webdriverio.remote (loglevel: 'verbose', logOutput: 'žurnāli', {vēlamās iespējas: {browserName: 'firefox'}});

• Lai atkļūdotu, izmantojiet console.log (), atkļūdošanu (), getText ().

  • console.log () - izmantojiet, lai parādītu informāciju, lai noteiktu stāvokli.
  • atkļūdošana () - izmantojiet pauzes pārlūku/skriptu, līdz komandrindā tiek nospiests ievadīšanas taustiņš.

  • getText () - izmantojiet, lai pārbaudītu, vai mijiedarbojaties ar pareizo elementu.

    Īpaši noderīga ar xpath izteiksmēm

// Noklikšķiniet uz saraksta 3. vienuma

it ('vajadzētu noklikšķināt uz saraksta 3. vienuma', funkcija () {// izmantojiet getText (), lai pārbaudītu, vai elementa atgriešanās draiverim xpath ir pareizs.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Pēc tam (funkcija (saite) {// izmantojiet console.log (), lai izvadītu informāciju console.log ('Saite atrasta:' + saite); (saite).should.equal ("3. vienums");}) // izmantojiet debug (), lai apturētu darbību, lai redzētu, kas notiek pārlūkprogrammā.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a"). (e) {console.log ('Atrasti meklēšanas rezultāti');});});

• Izmantojiet vides mainīgo, lai dinamiski mainītu pārlūkprogrammu:

  • Izmantojiet vides mainīgo SELENIUM_BROWSER, lai izsauktu citu pārlūkprogrammu, katru reizi nemainot testa skriptu.
  • Atbalsts prasa nelielas kodēšanas izmaiņas.

Koda izmaiņas:

// ielādējiet draiveri pārlūkam

draiveris = webdriverio.remote ({vēlamās iespējas: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Atbalstītās pārlūkprogrammas:

• Internet Explorer - IE 8+ (tikai Windows)

  SELENIUM_BROWSER = ti, mocha

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = hroma mokas

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Pārbaude:

• Operētājsistēmai Windows izmantojiet git bash apvalku:

  • SELENIUM_BROWSER = hroma mokas
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Operētājsistēmai Mac vai Linux atveriet termināli:

  • SELENIUM_BROWSER = hroma mokas
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Atsaucīga pārbaude:

  • Nosakiet robežvērtības, pamatojoties uz projektu vai ietvaru (ti, sāknēšanas palaišana).

  • Definējiet vides mainīgos katram pārtraukuma punktam:

    • GALDZNIEKS - 1200 pikseļi
    • TABLETE - 992 pikseļi
    • MOBILS - 768 pikseļi

  • Izstrādājiet atkārtoti lietojamu komandu, lai nolasītu vides mainīgo un iestatītu pārlūkprogrammas lielumu.

    Skatiet piemēru zemāk

  • Izsauciet atkārtoti lietojamo komandu testa skriptā.

// atkārtoti lietojams kods - bibliotēka // koda fragments if (bp == "DESKTOP") {obj.width = 1200; obj.augstums = 600; obj.nosaukums = bp; } cits if (bp == "TABLET") {obj.width = 992; obj.augums = 600; obj.nosaukums = bp; } cits ja (bp == "MOBILS") {obj.width = 768; obj.augstums = 400; obj.nosaukums = bp; }

// Pārbaudes skripts

pirms (funkcija (darīts) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (draiveris));} // iestatiet loga izmēru ('vajadzētu iestatīt loga izmēru', function (done) {// tikai platumam ir nozīme driver.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Atkārtoti lietojamas komandas (pielāgotas komandas):

  • Web draivera IO ir viegli pagarināms.
  • Man patīk visas atkārtoti izmantojamās komandas ievietot bibliotēkā. (varbūt šī ir vecā skola, bet tā darbojas!)

common/commonLib.js

// pārbaudītLastNameCheckError ()

// // Apraksts: // Pārbauda uzvārda veidlapas validācijas kļūdas ziņojumu // Ievads: // numurs - kļūdas indekss (1-5) // Izeja: // nav // var verificētLastNameCheckError = function () { var idx = argumenti [0], atzvanīšana = argumenti [argumenti.garums - 1]; this.getText ("// ul [@class = 'alert alert-risks']/li [" + idx + "]", funkcija (err, e) {console.log ('Atrasta kļūda:' + e); (e).should.be.equal ('Lūdzu, ievadiet uzvārdu');}).zvanīt (atzvanīt); }; // eksportēt funkciju module.exports.verifyLastNameCheckError = pārbaudītLastNameCheckError;

Šeit ir noteiktas izmaiņas, kas nepieciešamas, lai izsauktu atkārtoti lietojamu funkciju

Pilnu darba piemēru skatiet formFieldValidation.js

// pieprasīt atkārtoti lietojamu komandu - CommonLib

common = prasīt ('./ Common/CommonLib'); … // saistīt komandas draiveris.addCommand ('verifikācijasfirmasnosaukuma kļūda', common.verifyFirstNameCheckError.bind (draiveris)); driver.addCommand ('verificētLastNameError', common.verifyLastNameCheckError.bind (draiveris)); it ('vajadzētu saturēt 2 kļūdas: vārds/uzvārds', function () {// izsaukt atkārtoti lietojamo funkciju draiveri.verifyFirstNameError (1);.verifyLastNameError (2);});

• Projekta faila/direktorija struktūra:

  • Šeit ir tipiska projekta struktūra:

    • "Projekts" - galvenais projektu katalogs

      • README.md - globāla projekta lasīšanas programma

      • "Kopējais" - globālais funkciju katalogs, kas kopīgs visiem projektiem

        • common -lib.js - globālā funkciju bibliotēka
        • README.md - globālo funkciju lasīšanas programma

      • "Produkts1" - 1. produkta katalogs

        • tests-script1.js
        • tests-script2.js

        • "Kopējais" - 1. projekta vietējo funkciju direktorijs

          • prod1 -lib.js - vietējā funkciju bibliotēka 1. projektam
          • README.md - Readme vietējām funkcijām 1. projektam

      • "Product2"-produkta 2test-script1.jstest-script2.js direktorijs

        • "Kopējais" - 2. projekta vietējo funkciju direktorijs

          • prod2 -lib.js - vietējā funkciju bibliotēka 2. projektam
          • README.md - readme vietējām funkcijām projektam 2

• Sadaliet testa skriptus vairākos failos:

  • Šeit ir vairāku failu izmantošanas piemērs:

    • Veselības pārbaude - pamata testa skripts, lai pārbaudītu, vai viss darbojas
    • Statiskais elements un teksta validācija - pārbaudiet visus elementus un tekstu
    • Veidlapas/lapas kļūdu validācija - kļūdu validācija
    • Meklēšanas rezultāti - pārbaudiet dinamisku saturu

• Atzvanīšana VS. Solījumi:

  • Web Driver IO 3. versija atbalsta gan atzvanīšanu, gan solījumus.

    Apsolījumi ir vēlamā metode, jo tas samazina kļūdu apstrādes kodu. Lūdzu, skatiet to pašu piemēru, kas rakstīts, izmantojot atzvanus un solījumus.

Atzvanīšana

// Iestatiet/pārbaudiet vārdu/uzvārdu, izmantojot atzvanīšanu

it ('jāiestata/jāpārbauda vārds/uzvārds, izmantojot atzvanus'), funkcija (darīts) {driver.setValue ("#fname", "Tony", funkcija (e) {driver.getValue ("#fname", function (err, e) {(e). vajadzētu.be.equal ("Tony"); console.log ("Vārds:" + e); driver.setValue ("#lname", "Keith", funkcija (e) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Uzvārds:" + e); done ();});});});});});

Solījumi

// Iestatiet/pārbaudiet vārdu/uzvārdu, izmantojot solījumus

it ('vajadzētu iestatīt/verificēt vārdu/uzvārdu, izmantojot solījumus', function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). tad (funkcija (e) {(e). vajadzētu.be.equal ("Tony"); console.log ("Vārds:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). tad (funkcija (e) {(e). vajadzētu.be.equal ("Keith"); console.log ("Uzvārds:" + e);});});

7. solis: vairāk resursu

Šeit ir daži papildu resursi jūsu atsaucei:

• Diskusiju grupas (Gitter)

  • Tīmekļa draivera IO diskusiju grupa
  • Mocha diskusiju grupa

• Citi interesanti projekti

  • Supertests - HTTP apgalvojumi
  • Chai - apgalvojumi

8. solis. Secinājums

Es kādu laiku pētīju tehnoloģijas, ko izmantot savam projektam. Sākotnēji sāku ar Selēna tīmekļa draiveri, bet pārgāju uz tīmekļa draivera IO izmantošanu. Šķiet, ka tīmekļa draivera IO ir vieglāk izmantot un to ir daudz vieglāk paplašināt (vismaz dokumentācija paplašināšanai - daudzkārt lietojamas komandas bija labāka).

Kad es pirmo reizi sāku aplūkot tehnoloģijas, bija grūti atrast labus piemērus, kas būtu saistīti ar visu, ko es centos darīt. Šī iemesla dēļ es vēlējos ar jums dalīties ar šo informāciju un zināšanām.

Tehnoloģijas strādāja daudz labāk, nekā es gaidīju, tomēr bija saistīta mācīšanās līkne. Kad es sapratu, kā visi komponenti darbojas kopā, es varēju ļoti īsā laikā uzrakstīt sarežģītus testa skriptus. Sarežģītākie skripti bija uz JavaScript balstīti komponenti, piemēram, datumu atlasītājs un modālie atlasītāji.

Es nekad neesmu sevi apzīmējis kā JavaScript izstrādātāju, kā arī negribēju būt JavaScript eksperts, taču šo tehnoloģiju izmantošana mani noteikti ir motivējusi pilnveidot savas JS prasmes.

Es ceru, ka šis raksts ir noderīgs, un piemēri ir skaidri un informatīvi.

Lūdzu, dariet man zināmu, ja jums ir kādi jautājumi vai komentāri.

Paldies, Tonijs Kīts