Mafunzo ya Dereva wa Wavuti IO Kutumia Wavuti ya Moja kwa Moja na Mifano ya Kufanya Kazi: Hatua 8

2024 Mwandishi: John Day | [email protected]. Mwisho uliobadilishwa: 2024-01-30 12:54

Mafunzo ya Dereva wa Tovuti IO Kutumia Wavuti ya Moja kwa Moja na Mifano ya Kufanya Kazi

Sasisho la Mwisho: 2015-26-07

(Angalia mara nyingi ninaposasisha mafundisho haya na maelezo zaidi na mifano)

Usuli

Hivi majuzi nilikuwa na changamoto ya kupendeza iliyowasilishwa kwangu. Nilihitaji kuanzisha upimaji wa kiotomatiki kwa idara ya Q / A na uzoefu mdogo sana wa kiufundi na hakuna msingi wa programu.

Kwa kweli hizi zilikuwa changamoto mbili (2) tofauti. Ya kwanza ilikuwa kutambua teknolojia za kufanya upimaji wa kiotomatiki. Ya pili ilikuwa kufundisha idara ya Q / A.

Nakala hiyo itashughulikia tu teknolojia zilizotumiwa na kile nilichojifunza katika mchakato.

Teknolojia zilifanya kazi vizuri lakini ilibidi nitafute habari na nilitumia masaa mengi kugundua maswala.

Nilikuwa na wakati mgumu kupata habari kwenye mtandao juu ya teknolojia hizi zote zikifanya kazi pamoja.

Nilitaka kushiriki habari hii, kwa hivyo niliandika nakala hii pamoja na maandishi ya majaribio ya mfano na wavuti ya jaribio ili kutekeleza hati dhidi yake.

Hati zote za mtihani zinaweza kupatikana kwenye github na tovuti ya majaribio ya kufanya kazi iko katika Tovuti ya Jaribio la Mafunzo ya Dereva ya Wavuti

Natumaini utaiona kuwa muhimu. Ukifanya hivyo, tafadhali nijulishe.

Malengo Tumia teknolojia kwa:

• Jaribu utendaji wa wavuti
• Jaribu utendaji wa JavaScript
• Inaweza kuendeshwa kwa mikono
• Inaweza kuendeshwa kiatomati

• Rahisi kujifunza lugha kwa wasio programu

  Q / Wafanyikazi walio na maarifa ya kimsingi ya HTML na JavaScript

• Tumia programu ya chanzo wazi tu

Teknolojia

Orodha ya teknolojia ninayochagua:

• mocha - mkimbiaji wa jaribio - hufanya maandishi ya mtihani
• maktaba ya kudai
• webdriverio - vifungo vya kudhibiti kivinjari (vifungo vya lugha)
• selenium - uvumbuzi wa kivinjari na kiwanda kinachoendesha

• Kivinjari / Vivinjari vya rununu + vivinjari

  • Firefox (Kivinjari pekee)
  • Chrome (Kivinjari na dereva)
  • IE (Kivinjari na dereva)
  • Safari (Kivinjari na programu-jalizi ya dereva)

Hatua ya 1: Ufungaji wa Programu

Ili kuanza unahitaji kuwa na Node JS, Dereva ya Wavuti IO, Mocha, Lazima na Selenium kusimama peke yake seva iliyosanikishwa.

Hapa kuna maagizo ya usanidi wa Windows 7.

(Mimi ni mtumiaji wa Mac / Linux lakini nililazimika kusanikisha kila kitu kwenye mashine za Windows 7, ndio sababu nimeijumuisha kwa kumbukumbu yako. Utaratibu wa kusanikisha kwenye Mac / Linux ni sawa. Tafadhali wasiliana na marejeo ya mkondoni kwa zaidi habari.)

Kutoka kwa kivinjari:

• Sakinisha Node ambayo ni pamoja na NPM (Node Package Manager)
• nenda kwa
  • Bonyeza kufunga
  • Hifadhi na uendesha faili
  • Weka njia na ubadilishaji (NODE_PATH)

  • Nenda kwenye Jopo la Kudhibiti-> Mfumo na Usalama-> Mfumo

    • Mipangilio ya Mfumo wa hali ya juu

    • Kuweka Mazingira (Vigeugeu vya Mtumiaji)

      • Ongeza kwa PATH

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

      • Ongeza NODE_PATH (Vigeugeu vya Mfumo)

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

Kumbuka: Niliweka programu zote hapa chini kwa kutumia chaguo la npm ulimwenguni (-g). Kwa kawaida hii haifai lakini kwa usanikishaji huu nilihitaji kusanikisha ulimwenguni kwani ingetumika katika miradi mingi.

Fungua haraka ya amri (cmd):

(msimamizi wa mtumiaji wa karibu)

• Sakinisha seleniamu "dereva wa wavuti IO"

  • npm kufunga webdriverio -g

    Hii itaweka dereva wa wavuti IO ulimwenguni kwenye mashine yako

• Sakinisha programu ya mkimbiaji wa "mocha"

  • npm kufunga mocha -g

    Hii itaweka mocha kimataifa kwenye mashine yako

• Sakinisha maktaba ya "lazima"

  • npm kufunga lazima -g

    Hii itaweka "lazima" ulimwenguni kwenye mashine yako

• Sakinisha Selenium Simama peke yako Seva
  • Nenda kwa
  • Pakua faili ya jar na uhamie saraka ya "selenium".

• Sakinisha vivinjari na madereva ya kivinjari ili ujaribu

  • Kutoka kwa haraka ya cmd:

    • Unda saraka ya "selenium"
    • C: Watumiaji {USERNAME} selenium

    • Amri:

      • cd C: Watumiaji {USERNAME}
      • mkdir selenium

    • Firefox

      • Sakinisha kivinjari cha firefox, ikiwa haijawekwa tayari.
      • Njia inapaswa kuwekwa kuanza Firefox kutoka kwa haraka ya amri (cmd).

      • Jopo la Kudhibiti-> Mfumo na Usalama-> Mfumo

        • Mipangilio ya Mfumo wa hali ya juu
        • Mipangilio ya Mazingira
        • Ongeza (ongeza matumizi ya nusu-koloni) kwa Njia inayobadilika
        • C: / Program Files (x86) Mozilla Firefox
      • Hakuna dereva maalum wa wavuti anayehitajika kwa Firefox.

    • Chrome

      • Sakinisha kivinjari cha chrome, ikiwa haijawekwa tayari.
      • Njia INAWEZA kuweka kuweka Chrome kutoka kwa haraka ya amri (cmd).
      • Jaribu kwanza: chrome.exe kutoka kwa amri ya haraka (cmd)
      • Ikiwa chrome haitaanza basi:

      • Jopo la Kudhibiti-> Mfumo na Usalama-> Mfumo

        • Mipangilio ya Mfumo wa hali ya juu
        • Mipangilio ya Mazingira
        • Ongeza (ongeza matumizi ya nusu-koloni) kwa Njia inayobadilika
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Dereva maalum wa wavuti inahitajika kwa Chrome.

        Nenda kwa chromium.org na unzip dereva 32 kidogo kwenye saraka ya "selenium"

    • Internet Explorer (ya Windows tu - haitafanya kazi kwenye majukwaa mengine)

      • Dereva maalum wa wavuti inahitajika kwa IE.

        • Nenda kwa
        • Pakua na unzip dereva 64 kidogo kwenye saraka ya "selenium".

Hatua ya 2: Hati ya Msingi ya Mtihani

Wacha tuanze na misingi.

Hapa kuna hati rahisi ya mocha ambayo itafungua wavuti na kuthibitisha kichwa.

// mafunzo1.js

// // Huu ni hati rahisi ya jaribio la kufungua tovuti na // kuhalalisha kichwa. // maktaba zinazohitajika var webdriverio = zinahitaji ('webdriverio'), inapaswa = kuhitaji ('lazima'); // kizuizi cha hati ya mtihani au suite fafanua ('Mtihani wa Kichwa cha Dereva wa Wavuti IO - Wavuti ya Ukurasa wa Mafunzo ya Mafunzo', kazi () {// weka muda wa kuisha kwa sekunde 10 hii. muda wa kuzima (10000); var driver = {}; // ndoano ya kukimbia kabla ya majaribio kabla (kazi (imekamilika) {// pakia dereva kwa kivinjari cha kivinjari = webdriverio.remote ({takaCapability: {browserName: 'firefox'}}); driver.init (done);}); // kipimo cha jaribio - "vipimo" ((inapaswa kupakia ukurasa sahihi na kichwa ', kazi () {// ukurasa wa mzigo, kisha piga kazi () rudisha dereva.url (' https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // pata kichwa, halafu pitisha jina la kufanya kazi (). getTitle (). kisha (kazi (kichwa) {// thibitisha kichwa (kichwa).should.be.equal ("Dereva wa Wavuti IO - Ukurasa wa Jaribio la Mafunzo. ");) {driver.end (done);});});

Uchunguzi:

• Kwanza unapaswa kugundua hati ya mtihani imeandikwa katika JAVASCRIPT (inaisha kwa ugani wa.js).

• Muundo wa kimsingi ni karibu sawa kwa hati zote za mtihani.

  • Maoni ya Kichwa (//)
  • Maktaba zinazohitajika
  • Weka Chaguzi (hiari)
  • Hook: Dereva Kivinjari cha Mzigo
  • Suite ya Mtihani (eleza)
  • Vipimo vya Mtihani (inaweza kuwa Aina nyingi katika Suite)
  • Hook: Safisha

• Suite ya jaribio huanza na kazi ya kuelezea ambayo inachukua vigezo viwili:

  • Kamba - Maelezo ya chumba cha majaribio

    • "Angalia ukurasa wa verbiage inayofaa"
    • "Thibitisha shughuli za vifungo vya redio"
  • kazi - kizuizi cha nambari ya kutekeleza

    fafanua ('Maelezo ya suti ya majaribio', kazi () {});

• Suite ya jaribio itakuwa na maelezo 1 au zaidi ya mtihani (vipimo)

• Aina huanza na kazi ambayo inachukua vigezo viwili:

  • Kamba - Maelezo ya vipimo vya mtihani

    • "Inapaswa kuwa sahihi kiungo cha maandishi na kiungo cha URL"
    • "Inapaswa kuwa na verbiage sahihi (nakala ya dawati)
  • kazi - kizuizi cha nambari ya kutekeleza
  • ni ('Maelezo ya vipimo vya jaribio', kazi () {});
• Kielelezo kina matarajio moja au zaidi ambayo yanajaribu hali ya nambari

• Hizi huitwa madai

  Maktaba ya "lazima" hutoa madai

• Karibu katika visa vyote, utahitaji kupata kipengee kimoja au zaidi ukitumia kiteuzi kisha ufanyie operesheni fulani kwenye (vitu)

  • Mifano:

    • Pata maandishi kwenye ukurasa na uhakikishe maandishi
    • Jaza fomu na uwasilishe
    • Thibitisha CSS ya kipengee

Wacha tuangalie kwa karibu mfano huo na maoni

Pakia maktaba zinazohitajika: dereva wa wavuti IO na inapaswa.

// maktaba zinazohitajika

var webdriverio = zinahitaji ('webdriverio'), lazima = zinahitaji ('lazima');

Fafanua safu ya jaribio. Suite hii inaitwa: "Mtihani wa Kichwa cha Dereva wa Wavuti IO - Wavuti ya Ukurasa wa Jaribio la Mafunzo"

// kizuizi cha hati ya mtihani au Suite

fafanua ('Jaribio la Kichwa cha Dereva wa Wavuti IO - Wavuti ya Ukurasa wa Mafunzo ya Mafunzo', kazi () {…});

Weka muda wa kuisha kuwa sekunde 10 ili hati isiishe wakati wa kupakia ukurasa.

// weka muda wa kumaliza hadi sekunde 10

hii.kuisha (10000);

Hook kupakia dereva wa kivinjari kabla ya kutumia vipimo "specs". Dereva wa Firefox amebeba mfano huu.

// ndoano ya kukimbia kabla ya vipimo

kabla (kazi (imekamilika) {// pakia dereva kwa kivinjari cha kivinjari = webdriverio.remote ({desiredCapabilities: {browserName: 'firefox'}}); driver.init (done);});

Fafanua vipimo vya mtihani.

// kipimo cha mtihani - "vipimo"

ni ('inapaswa kubeba ukurasa sahihi na kichwa', kazi () {…});

Pakia ukurasa wa wavuti

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

Pata kichwa, kisha pitisha jina la kazi ()

getTitle (). kisha (kazi (kichwa) {

… });

Thibitisha kichwa ukitumia maktaba ya madai.

(kichwa). lazima.. iwe sawa ("Dereva ya Wavuti IO - Ukurasa wa Jaribio la Mafunzo");

Hook kuacha na kusafisha dereva ukimaliza.

// "ndoano" kukimbia baada ya vipimo vyote kwenye kizuizi hiki

baada ya (kazi (imefanywa) {driver.end (done);});

Hatua ya 3: Endesha Hati ya Mtihani

Sasa wacha tuone kile hati ya mtihani inafanya wakati inaendeshwa.

Anza kwanza Senium Simama peke yako Seva:

• Kwa laini ya amri ya matumizi ya Windows (cmd):

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

• Kwa Mac au Linux, terminal wazi:

  • java -jar
  • $ java -jar selenium-server-iliyosimama-2.46.0.jar
• Tazama picha ya skrini hapo juu

Halafu tumia hati ya mtihani:

• Kwa laini ya amri ya matumizi ya Windows (cmd):

  • mocha
  • # mocha mafunzo1.js

• Kwa Mac au Linux, terminal wazi:

  • mocha
  • $ mocha mafunzo.js
• Tazama picha ya skrini hapo juu

Basi nini kilitokea?

Mocha anatumia hati "tutorial1.js". Dereva alianza kivinjari (Firefox), akapakia ukurasa na akathibitisha kichwa.

Hatua ya 4: Mfano wa Tovuti

Mifano zote zinaendeshwa dhidi ya wavuti hii.

Wavuti ya mfano iko kwenye: Ukurasa wa Jaribio la Mafunzo ya Dereva ya Wavuti

Hati zote za mtihani zinaweza kupakuliwa kutoka kwa github.

Hatua ya 5: Mifano maalum

Nambari yote inapatikana kwenye github: Mafunzo ya Dereva ya Wavuti IO kwenye github

• Thibitisha Nakala ya Kiungo na Kiungo katika orodha isiyodhibitiwa - "linkTextURL1.js"

  • Orodha isiyodhibitiwa ina na kiunga ni kitu cha orodha ya 4.
  • URL inapaswa kuwa "https://tlkeith.com/contact.html"

// Thibitisha Nakala ya kiungo ya Wasiliana Nasi

ni ('inapaswa kuwa na Nakala ya kiungo wa Wasiliana Nasi', kazi () {kurudi dereva.getText ("// ul [@ id = 'mylist'] / li [4] / a") kisha (function (link) {console.log ('Kiungo kimepatikana:' + kiungo); (kiungo). lazima iwe sawa ("Wasiliana Nasi");});}); // Thibitisha URL ya Wasiliana Nasi ('inapaswa kuwa na URL ya Wasiliana Nasi', kazi () {kurudi dereva.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a", "href") basi (function (link) {(link).should.equal ("https://tlkeith.com/contact.html");

• Thibitisha Nakala ya Hakimiliki - "Copyright1.js"

  • Hati miliki iko kwenye kijachini Mfano huu unaonyesha njia 2 tofauti za kupata maandishi ya hakimiliki:

    • na kama chaguo la kipengee
    • kwa kutumia xpath kama kiteuzi cha kipengee

// Thibitisha maandishi ya hakimiliki ukitumia id kama kiteua vitu

ni ('inapaswa kuwa na maandishi ya hakimiliki', kazi () {kurudi dereva.getText ("# hakimiliki"). kisha (fanya kazi (kiungo) {console.log ('Hakimiliki imepatikana:' + kiungo); (kiungo). inapaswa. sawa ("Tony Keith - tlkeith.com @ 2015 - Haki zote zimehifadhiwa.");});}); // Thibitisha maandishi ya hakimiliki kwa kutumia xpath kama kiteua cha kipengee ('inapaswa kuwa na maandishi ya hakimiliki', kazi () {kurudi dereva.getText ("// footer / center / p"). Kisha (fanya kazi (kiungo) {console.log ('Hati miliki imepatikana:' + kiungo); (kiungo). Lazima iwe sawa ("Tony Keith - tlkeith.com @ 2015 - Haki zote zimehifadhiwa.");});});

• Jaza Sehemu za Fomu na Uwasilishe - "formFillSubmit1.js"

  • Jaza jina la kwanza, jina la mwisho na uwasilishe, kisha subiri matokeo.

  • Mfano huu unaonyesha njia 3 za kujaza uwanja wa kuingiza jina la kwanza:

    • kwa id
    • na xpath kutoka kwa pembejeo
    • na xpath kutoka fomu-> pembejeo
  • Pia inaonyesha jinsi ya kusafisha uwanja wa kuingiza

// Weka jina la kwanza ukitumia id kwa: Tony

ni ('inapaswa kuweka jina la kwanza kwa Tony', kazi () {kurudi dereva.setValue ("# fname", "Tony").getValue ("# fname"). kisha (function (e) {(e)..we sawa ("Tony"); console.log ("Jina la Kwanza:" + e);});}); // Futa jina la kwanza ukitumia id ('inapaswa kusafisha jina la kwanza', fanya kazi () {kurudi dereva.clearElement ("# fname").getValue ("# fname"). Kisha (function (e) {(e). lazima iwe sawa (""); console.log ("Jina la Kwanza:" + e);});}); // Weka jina la kwanza ukitumia xpath kutoka kwa pembejeo kwenda: Tony it ('inapaswa kuweka jina la kwanza kwa Tony', kazi () {return driver.setValue ("// input [@ name = 'fname']", "Tony" getValue ("// input [@ name = 'fname']"). halafu (function (e) {(e).should.be.equal ("Tony"); console.log ("Jina la Kwanza:" + e);});}); // Futa jina la kwanza ukitumia xpath kutoka kwa kuliingiza ('inapaswa kusafisha jina la kwanza', kazi () {kurudi dereva.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). kisha (fanya kazi (e) {(e). lazima.be sawa (" "); console.log (" Jina la Kwanza: "+ e);});});}); // Weka jina la kwanza ukitumia xpath kutoka kwa fomu kwenda: Tony it ('inapaswa kuweka jina la kwanza kwa Tony', kazi () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Kisha (function (e) {(e).should.be equal ("Tony"); console.log ("Jina la Kwanza:" + e);});}); // Weka jina la mwisho ukitumia id kwa: Keith it ('inapaswa kuweka jina la mwisho kwa Keith', kazi () {return driver.setValue ("# lname", "Keith").getValue ("# lname"). (function (e) {(e).should.be equal ("Keith"); console.log ("Jina la Mwisho:" + e);});}); // Tuma fomu na subiri matokeo ya utaftaji ('inapaswa kuwasilisha fomu na subiri matokeo', fanya kazi () {kurudi dereva.submitForm ("# fomu ya utaftaji"). Kisha (fanya kazi (e) {console.log (' Tuma Fomu ya Utafutaji ');})). SubiriKuonekana ("# matokeo ya utaftaji", 10000).basi (fanya (e) {console.log (' Matokeo ya Utafutaji yamepatikana ');});}););

• Bonyeza Onyesha / Ficha Kitufe na Thibitisha Nakala - "showHideVerify1.js"

  • Nakala iko katika kipengee cha onyesho / ficha. Kitufe kinadhibiti hali.

  • Mfano huu unaonyesha:

    • Bonyeza kitufe ili kupanua
    • Subiri kipengee kionekane (kimepanuliwa)
    • Thibitisha maandishi (nakala ya dawati)

// bonyeza kitufe cha "Maelezo zaidi" na uthibitishe maandishi katika kipengee kilichopanuliwa

ni ('inapaswa kubonyeza kitufe cha maelezo zaidi na idhibitishe maandishi', fanya kazi () {kurudi dereva. bonyeza ("# moreinfo"). halafu (fanya kazi) (console.log ('Bonyeza kitufe cha Maelezo zaidi');})…inapaswa kuwa sawa ("Vitu vyote vizuri nenda hapa!");});});

• Thibitisha Makosa ya Shamba ya Fomu - "formFieldValidation.js"

  • Tumia hati za majaribio ili kuthibitisha ujumbe sahihi wa hitilafu umetengenezwa.

  • Mfano huu unaonyesha:

    Thibitisha ujumbe wa maandishi wa hitilafu na uthibitishe eneo (orodha isiyo na orodha ya orodha)

ni ('inapaswa kuwa na makosa 5: kwanza / mwisho / anwani / jiji / jimbo', kazi () {

dereva wa kurudi.getText ("// ul [@ class = 'tahadhari tahadhari-hatari'] / li [1]") kisha (fanya (e) {console.log ('Kosa limepatikana:' + e); (e). lazima iwe sawa ('Tafadhali ingiza jina la kwanza');}). TextText ("// ul [@ class = 'alert alert-danger'] / li [2]") kisha (fanya kazi (e) {console.log ('Kosa limepatikana:' + e); (e). lazima liwe sawa ('Tafadhali ingiza jina la mwisho');}}.getText ("// ul [@ class = 'tahadhari tahadhari-hatari '] / li [3] "). kisha (fanya kazi (e) {console.log (' Kosa limepatikana: '+ e); (e). lazima iwe sawa (' Tafadhali ingiza anwani ');}). GetText ("// ul [@ class = 'alert alert-danger'] / li [4]") kisha (fanya kazi (e) {console.log ('Kosa limepatikana:' + e); (e). lazima.na usawa ('Tafadhali ingiza jiji');}). TextText ("// ul [@ class = 'tahadhari tahadhari-hatari'] / li [5]") kisha (fanya (e) {console.log ('Kosa limepatikana:' + e); (e). Lazima iwe sawa ('Tafadhali ingiza jimbo');}); });

• Kufungua Takwimu ili Kuthibitisha Kiunga / Nakala / Ukurasa wa URL - "LoopDataExample1.js"

  • Mfano huu unaonyesha: Tumia safu ya data ya JSON kuhifadhi kiunga na jina, kisha iterate

    • Thibitisha kila maandishi ya URL na kiunga
    • Bonyeza kiungo na upakie ukurasa

// Kiunga data - kiunga na maandishi

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"kiungo": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," jina ":" 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 "," jina ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" kiungo ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," jina ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob / master / callbackPromise.js "," jina ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," jina ": "debu gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" kiungo ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," jina ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial / blob / master / dataLoopExample1.js "," name ":" dataLoopExample1.js "}];. (url. ' Ukurasa wa Jaribio la Mafunzo ");}} // pata URL.getAttribute ('a =' + d.name," href "). Kisha (function (link) {(link).should.equal (d.link); console.log ('URL imepatikana:' + d.link);}) // nenda kwenye ukurasa wa URL na uthibitishe kuwa ipo. bonyeza ('a =' + d.name).waitForVisible ("# js-repo-pjax- chombo ", 10000). basi (kazi () {console.log ('Ukurasa wa Github Umepatikana');});});});

• Takwimu Takwimu Tupu Kujaza Sehemu za Fomu - "loopDataExample2.js"

  • Mfano huu unaonyesha: Tumia safu ya data ya JSON kuhifadhi jina la kwanza / la mwisho

    • Pinduka kupitia data ili kujaza sehemu za fomu, kisha uwasilishe fomu
    • Subiri ukurasa wa matokeo
    • Thibitisha jina la kwanza / la mwisho kwenye ukurasa wa matokeo

// safu ya data - jina la kwanza na jina la mwishoNamevar dataArray = [{{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," LastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}];. /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). kisha (fanya kazi (kichwa) {// thibitisha kichwa (kichwa).should.be.equal ("Web Dereva IO - Ukurasa wa Jaribio la Mafunzo");} kuwekaValue ("# jina la jina", d.firstName).getValue ("# fname"). kisha (function (e) {(e).should.be.equal (d.firstName); console.log ("Kwanza Jina: "+ e);}}.setValue (" # lname ", d.lastName).getValue (" # lname "). Kisha (fanya kazi (e) {(e). Lazima iwe sawa (d.lastName) console.log ("Jina la Mwisho:" + e);})).submitForm ("# search-form"). halafu (fanya kazi) ({console.log ('Tuma Fomu ya Utafutaji');}). subiriKuonekana. Nakala imepatikana: '+ kiungo); (kiungo). Lazima iwe sawa ("Karibu" + d.firstName + "" + d.lastName + ".");});});});});});));

• Thibitisha Sifa za CSS - "cssValidation1.js"

  • Mfano huu unaonyesha jinsi ya:

    • Thibitisha mali zifuatazo za CSS:

      • rangi
      • pedi (juu, chini, kulia, kushoto)
      • rangi ya asili

ni ('inapaswa kuwa na rangi sahihi ya maandishi ya makosa', kazi () {kurudi dereva.getCssProperty ("// ul [@ class = 'alert alert-danger'] / li [1]", "color") kisha (fanya kazi (matokeo) {console.log ('Rangi imepatikana:' + result.parsed.hex + "au" + result.value); });});

ni ('inapaswa kuwa na padding sahihi kwenye seli ya meza', kazi () {

kurudi dereva // padding: juu kulia chini kushoto.getCssProperty ("// meza [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top") kisha (fanya kazi (matokeo) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-bottom ") kisha (fanya kazi (matokeo) {console.log ('padding-bottom found:' + result.value); (matokeo.thamani). inapaswa kuwa sawa ('10px');}).getCssProperty ("// meza [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- kisha (fanya kazi (matokeo) {console.log ('pedi-kulia imepatikana:' + matokeo.thamani); (matokeo.thamani). lazima iwe sawa ('5px');}). "// meza [@ id = 'orodha ya faili"] / thead / tr [1] / td [1] "," padding-left "). kisha (fanya kazi (matokeo) {console.log (' padding-left found: '+ matokeo.thamani); (matokeo.thamani). lazima iwe sawa (' 5px ');}); });

ni ('inapaswa kuwa na rangi sahihi ya usuli katika kichwa cha meza', kazi () {

dereva wa kurudi.getCssProperty ("// meza [@ id = 'filelist'] / thead", "background-color"). halafu (fanya kazi (matokeo) {console.log ('rangi ya nyuma imepatikana:' + result.parsed. hex); });

Hatua ya 6: Vidokezo na ujanja

• Utatuaji:

  • Washa ukataji wa magogo kwenye kiwango cha dereva kwa utatuzi zaidi na uunda magogo.

    • Weka logLevel kwa 'verbose'
    • Weka logOutput kwa jina la saraka ('magogo')

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

• Tumia console.log (), debug (), GetText () ili utatue.

  • console.log () - Tumia kuonyesha habari kuamua hali.
  • debug () - Tumia kivinjari / hati ya kusitisha hadi kuingia kushinikizwa kwenye laini ya amri.

  • GetText () - Tumia kuhakikisha unashirikiana na kipengee sahihi.

    Hasa inasaidia na misemo ya xpath

// Bonyeza kwenye Kipengee 3 kutoka kwenye orodha

ni ('inapaswa kubofya kwenye Kifungu cha 3 kutoka kwenye orodha', kazi () {// tumia kupataText () kudhibitisha kuwa xpath ni sahihi kwa dereva wa kurudisha kipengee.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / " ("Bidhaa 3");}} // tumia utatuzi () kusimamisha hatua ili kuona kile kinachotokea kwenye kivinjari.debug (). Bonyeza ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // subiri fomu ya utaftaji wa google itaonekana.waitForVisible ("# tsf", 20000).then (function (e) {console.log ('Matokeo ya Utafutaji yamepatikana');});});

• Tumia Mazingira yanayobadilika Kubadilisha Kivinjari Nguvu:

  • Tumia ubadilishaji wa mazingira SELENIUM_BROWSER kuomba kivinjari tofauti bila kubadilisha hati ya jaribio kila wakati.
  • Inahitaji mabadiliko kidogo ya kuweka alama ili kuunga mkono.

Mabadiliko ya Kanuni:

// pakia dereva kwa kivinjari

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

Vivinjari vinavyoungwa mkono:

• Internet Explorer - IE 8+ (Windows pekee)

  SELENIUM_BROWSER = yaani mocha

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = chrome mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Upimaji:

• Kwa Windows tumia ganda la git bash:

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

• Kwa Mac au Linux, terminal wazi:

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

• Upimaji Msikivu:

  • Amua vituo vya mapumziko kulingana na mradi au mfumo (yaani bootstrap).

  • Fafanua anuwai ya mazingira kwa kila sehemu ya kuvunja:

    • DESKTOP - 1200 px
    • JEDWALI - 992 px
    • SIMU - 768 px

  • Tengeneza amri inayoweza kutumika tena ya kusoma mazingira yanayobadilika na kuweka saizi ya kivinjari.

    Angalia mfano hapa chini

  • Piga amri inayoweza kutumika tena katika hati yako ya majaribio.

nambari inayoweza kutumika tena - maktaba // kificho cha nambari ikiwa (bp == "DESKTOP") {obj.width = 1200; urefu = 600; jina = jina bp; } vingine ikiwa (bp == "TABLET") {obj.width = 992; urefu = 600; jina = jina bp; } mwingine ikiwa (bp == "MOBILE") {obj.width = 768; urefu = 400; jina = jina bp; }

// Hati ya Mtihani

kabla (kazi (imekamilika) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver)); kazi (imekamilika) {// tu upana wa mambo ya dereva.setWindowSize (winsize.width, winsize.height, function () {}). call (done);});

• Amri zinazoweza kutumika tena (Amri za Kawaida):

  • Dereva wa Wavuti IO inaweza kupanuliwa kwa urahisi.
  • Ninapenda kuweka amri zote zinazoweza kutumika tena kwenye maktaba. (labda hii ni shule ya zamani lakini inafanya kazi!)

kawaida / kawaidaLib.js

// thibitishaLastNameCheckError ()

// // Maelezo: // Inathibitisha ujumbe wa makosa ya uthibitisho wa fomu ya jina la mwisho // // Ingizo: // nambari - faharisi ya makosa (1-5) // Pato: // hakuna // var confirmLastNameCheckError = function () { var idx = hoja [0], kupiga tena = hoja [hoja. urefu - 1]; hii.getText ("// ul [@ class = 'tahadhari tahadhari-hatari'] / li [" + idx + "]", kazi (err, e) {console.log ('Error found:' + e); (e). lazima iwe sawa ('Tafadhali ingiza jina la mwisho');}). piga simu (kupiga simu tena); }; // kusafirisha moduli ya kazi.exports.verifyLastNameCheckError = confirmLastNameCheckError;

Hapa kuna mabadiliko maalum yanayohitajika kuita kazi inayoweza kutumika tena

Angalia formFieldValidation.js kwa mfano kamili wa kufanya kazi

// zinahitaji amri inayoweza kutumika tena - CommonLib

kawaida = zinahitaji ('./ Kawaida / KawaidaLib'); … // funga amri driver.addCommand ('confirmFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('confirmLastNameError', common.verifyLastNameCheckError.bind (dereva)); ni ('inapaswa kuwa na makosa 2: jina la kwanza / la mwisho', kazi () {// piga dereva wa kazi inayoweza kutumika tena. verifyFirstNameError (1);.verifyLastNameError (2);});

• Faili la Mradi / Muundo wa Saraka:

  • Hapa kuna muundo wa kawaida wa mradi:

    • "Mradi" - saraka kuu ya mradi

      • README.md - kusoma kwa mradi wa ulimwengu

      • "Kawaida" - saraka ya kazi za ulimwengu zinazojulikana kwa miradi yote

        • kawaida-lib.js - maktaba ya kazi ya ulimwengu
        • README.md - kusoma kwa kazi za ulimwengu

      • "Bidhaa1" - saraka ya bidhaa 1

        • script-mtihani1.js
        • mtihani-script2.js

        • "Kawaida" - saraka ya kazi za ndani ili mradi 1

          • prod1-lib.js - maktaba ya kazi ya ndani ya mradi 1
          • README.md - kusoma kwa kazi za mitaa ili mradi 1

      • "Product2" - saraka ya bidhaa 2test-script1.jstest-script2.js

        • "Kawaida" - saraka ya kazi za ndani ili mradi 2

          • prod2-lib.js - maktaba ya kazi ya ndani ya mradi 2
          • README.md - kusoma kwa kazi za mitaa ili mradi 2

• Vunja maandishi ya mtihani kuwa faili nyingi:

  • Hapa kuna sampuli ya kutumia faili nyingi:

    • Usafi wa Kuangalia - hati ya msingi ya mtihani ili kudhibitisha kila kitu kinafanya kazi
    • Element tuli na Uthibitishaji wa Nakala - thibitisha vitu vyote na maandishi
    • Uthibitishaji wa Makosa ya Fomu / Ukurasa - uthibitishaji wa makosa
    • Matokeo ya Utafutaji - jaribu yaliyomo yenye nguvu

• Callbacks VS. Ahadi:

  • Toleo la 3 la Dereva wa Wavuti IO inasaidia kurudi nyuma na ahadi.

    Ahadi ni njia inayopendelewa kwani inapunguza nambari ya utunzaji wa makosa. Tafadhali angalia hapa chini mfano huo huo ulioandikwa kwa kutumia kurudi nyuma na ahadi.

Kurudi nyuma

// Weka / thibitisha jina la kwanza / la mwisho ukitumia Kupiga tena

ni ('inapaswa kuweka / kuthibitisha jina la kwanza / la mwisho kwa kutumia Callbacks', kazi (imekamilika) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e). lazima.be sawa ("Tony"); console.log ("Jina la Kwanza:" + e); dereva.setValue ("# jina", "Keith", kazi (e) { dereva.getValue ("# jina", kazi (makosa, e) {(e). lazima.be sawa ("Keith"); console.log ("Jina la Mwisho:" + e); umefanya ();});});});});});

Ahadi

// Weka / thibitisha jina la kwanza / la mwisho ukitumia Ahadi

ni ('inapaswa kuweka / kuthibitisha jina la kwanza / la mwisho kwa kutumia Ahadi', kazi () {kurudi dereva.setValue ("# jina", "Tony").getValue ("# jina"). kisha (fanya kazi (e) {(e). lazima iwe sawa ("Tony"); console.log ("Jina la Kwanza:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). kisha (function (e) {(e).should.be equal ("Keith"); console.log ("Jina la Mwisho:" + e);});});

Hatua ya 7: Rasilimali zaidi

Hapa kuna rasilimali zingine za kumbukumbu yako:

• Vikundi vya Majadiliano (Gitter)

  • Kikundi cha Majadiliano cha Dereva wa Wavuti
  • Kikundi cha Majadiliano cha Mocha
• Miradi mingine ya kupendeza
  • Supertest - madai ya
  • Chai - madai

Hatua ya 8: Hitimisho

Nilitumia muda kutafiti teknolojia za kutumia kwa mradi wangu. Mwanzoni nilianza na Dereva ya Wavuti ya Selenium lakini nikabadilisha kutumia Dereva ya Wavuti IO. Dereva wa Wavuti IO ilionekana kuwa rahisi kutumia na rahisi kupanua (angalau nyaraka za kupanua - amri zinazoweza kutumika tena zilikuwa bora).

Nilipoanza kuangalia teknolojia ilikuwa ngumu kupata mifano mizuri ambayo ilikuwa sawa na kitu chochote nilichokuwa nikijaribu kufanya. Hii ndio sababu nilitaka kushiriki habari hii na maarifa na wewe.

Teknolojia zilifanya kazi vizuri zaidi kuliko nilivyotarajia hata hivyo kulikuwa na eneo la kujifunza lililohusika. Mara tu nilipoelewa jinsi vifaa vyote vilifanya kazi pamoja, niliweza kuandika hati ngumu za mtihani kwa muda mfupi sana. Hati ngumu zaidi zilikuwa vifaa vya msingi vya JavaScript kama kiteua tarehe na wateule wa moduli.

Sijawahi kujiita kama msanidi programu wa JavaScript na wala sikuwahi kutaka kuwa mtaalam wa JavaScript, lakini kutumia teknolojia hizi hakika kumenihamasisha kuongeza ustadi wangu wa JS.

Natumahi nakala hii ni muhimu na mifano iko wazi na inaarifu.

Tafadhali nijulishe ikiwa una maswali yoyote au maoni.

Asante, Tony Keith