Tutorial sa Web Driver IO Paggamit ng isang Live Web Site at Mga Halimbawa sa Paggawa: 8 Mga Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Tutorial sa Web Driver IO Paggamit ng Isang Live Web Site At Mga Halimbawa sa Paggawa

Huling Pag-update: 2015-26-07

(Bumalik nang madalas habang ina-update ko ang mga itinuturo na ito na may higit pang mga detalye at halimbawa)

Background

Kamakailan lamang ay nagkaroon ako ng isang kagiliw-giliw na hamon na ipinakita sa akin. Kailangan kong ipakilala ang awtomatikong pagsubok sa isang departamento ng Q / A na may napakakaunting karanasan sa teknikal at walang background sa programa.

Ito ay talagang dalawa (2) na magkakahiwalay na hamon. Ang una ay upang makilala ang mga teknolohiya upang maisagawa ang awtomatikong pagsubok. Ang pangalawa ay upang sanayin ang departamento ng Q / A.

Tatalakayin lamang ng artikulo ang mga teknolohiyang ginamit at kung ano ang natutunan ko sa proseso.

Ang mga teknolohiya ay gumagana nang maayos ngunit kailangan ko talagang maghanap para sa impormasyon at ginugol ng maraming oras sa pag-alam ng mga isyu.

Nahirapan akong maghanap ng impormasyon sa Internet tungkol sa mga teknolohiyang ito na lahat ay nagtutulungan.

Nais kong ibahagi ang impormasyong ito, kaya't sinulat ko ang artikulong ito kasama ang mga gumaganang halimbawa ng mga script sa pagsubok at isang pagsubok na web site upang patakbuhin ang mga script.

Ang lahat ng mga script ng pagsubok ay matatagpuan sa github at ang gumaganang pansubok na site ay matatagpuan sa Web Driver IO Tutorial Test Site

Inaasahan kong kapaki-pakinabang ito. Kung gagawin mo ito, mangyaring ipaalam sa akin.

Mga Layunin Gumamit ng mga teknolohiya upang:

• Subukan ang pagpapaandar ng web site
• Subukan ang pagpapaandar ng JavaScript
• Maaaring patakbuhin nang manu-mano
• Maaaring awtomatikong patakbuhin

• Madaling matuto ng wika para sa mga hindi programmer

  Q / Isang tauhan na may pangunahing kaalaman sa HTML at JavaScript

• Gumamit lamang ng Open source software

Mga Teknolohiya

Listahan ng mga teknolohiyang pipiliin ko:

• mocha - test runner - isinasagawa ang mga script ng pagsubok
• shouldjs - assertion library
• webdriverio - browser control bindings (wika bindings)
• siliniyum - abstraction ng browser at pagpapatakbo ng pabrika

• Mga driver ng browser / Mobile + browser

  • Firefox (Browser lang)
  • Chrome (Browser at driver)
  • IE (Browser at driver)
  • Safari (plug-in ng Browser at driver)

Hakbang 1: Pag-install ng Software

Upang magsimula kailangan mong magkaroon ng Node JS, Web Driver IO, Mocha, Dapat at Selenium na mag-isa na naka-install ang server.

Narito ang mga tagubilin sa pag-install para sa Windows 7.

(Gumagamit ako ng Mac / Linux ngunit kailangan kong mai-install ang lahat sa mga makina ng Windows 7, ito ang dahilan kung bakit ko isinama ito para sa iyong sanggunian. Ang pamamaraan para sa pag-install sa isang Mac / Linux ay magkatulad. Mangyaring kumunsulta sa mga sanggunian sa online para sa higit pa impormasyon.)

Mula sa isang browser:

• I-install ang Node na may kasamang NPM (Node Package Manager)
• pumunta sa
  • I-click ang i-install
  • I-save at patakbuhin ang file
  • Itakda ang path at variable (NODE_PATH)

  • Pumunta sa Control Panel-> System at Security-> System

    • Mga Advanced na Setting ng System

    • Pagtatakda ng Kapaligiran (Mga variable ng gumagamit)

      • Idagdag sa PATH

        C: / Mga Gumagamit {USERNAME} AppData / Roaming / npm;

      • Idagdag ang NODE_PATH (Mga variable ng system)

        C: / Mga Gumagamit {USERNAME} AppData / Roaming / npm / node_modules

Tandaan: Na-install ko ang lahat ng software sa ibaba gamit ang npm global na pagpipilian (-g). Karaniwan itong hindi inirerekomenda ngunit para sa pag-install na ito kailangan kong mag-install ng buong mundo dahil gagamitin ito sa maraming proyekto.

Buksan ang prompt ng utos (cmd):

(lokal na administrator ng gumagamit)

• I-install ang selenium na "web driver IO"

  • npm i-install ang webdriverio -g

    I-install nito ang web driver IO sa buong mundo sa iyong machine

• I-install ang "mocha" test runner software

  • npm install mocha -g

    I-install nito ang mocha sa buong mundo sa iyong machine

• I-install ang "dapat" assertion library

  • npm install dapat -g

    I-install nito ang "dapat" sa buong mundo sa iyong makina

• I-install ang Selenium Stand Alone Server

  • Pumunta sa
  • Mag-download ng jar file at lumipat sa direktoryo ng "siliniyum".

• Mag-install ng mga browser at driver ng browser upang subukan

  • Mula sa cmd prompt:

    • Lumikha ng direktoryo ng "siliniyum"
    • C: / Mga Gumagamit {USERNAME} selenium

    • Mga Utos:

      • cd C: / Mga Gumagamit {USERNAME}
      • mkdir selenium

    • Firefox

      • Mag-install ng firefox browser, kung hindi pa naka-install.
      • Ang landas ay dapat itakda upang simulan ang Firefox mula sa command prompt (cmd).

      • Control Panel-> System at Security-> System

        • Mga Advanced na Setting ng System
        • Mga Setting ng Kapaligiran
        • Idagdag (idagdag ang paggamit ng semi-colon) sa Variable ng Path
        • C: / Program Files (x86) Mozilla Firefox
      • Walang espesyal na driver ng web para sa Firefox.

    • Chrome

      • I-install ang chrome browser, kung hindi pa naka-install.
      • Maaaring maitakda ang landas upang simulan ang Chrome mula sa command prompt (cmd).
      • Subukan muna: chrome.exe mula sa command prompt (cmd)
      • Kung ang chrome ay hindi nagsisimula pagkatapos:

      • Control Panel-> System at Security-> System

        • Mga Advanced na Setting ng System
        • Mga Setting ng Kapaligiran
        • Idagdag (idagdag ang paggamit ng semi-colon) sa Variable ng Path
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Kailangan ng isang espesyal na web driver para sa Chrome.

        Pumunta sa chromium.org at i-unzip ang 32 bit driver sa direktoryo ng "siliniyum"

    • Ang Internet Explorer (para sa Windows lamang - ay hindi gagana sa iba pang mga platform)

      • Ang isang espesyal na driver ng web ay kinakailangan para sa IE.

        • Pumunta sa
        • Mag-download at i-unzip ang 64 bit driver sa direktoryo ng "siliniyum".

Hakbang 2: Pangunahing Script Script

Magsimula tayo sa ilang mga pangunahing kaalaman.

Narito ang isang simpleng script ng mocha na magbubukas ng isang web site at i-verify ang pamagat.

// tutorial1.js

// // Ito ay isang simpleng script ng pagsubok upang buksan ang isang website at // patunayan ang pamagat. // kinakailangang mga aklatan var webdriverio = nangangailangan ('webdriverio'), dapat = nangangailangan ('dapat'); // a test script block or suite describes ('Pagsubok sa Pamagat para sa Web Driver IO - Tutorial Halaman ng Pahina ng Tutorial', pagpapaandar () {// magtakda ng timeout sa 10 segundo nito.timeout (10000); var driver = {}; // hook upang tumakbo bago ang mga pagsubok bago (function (tapos) {// i-load ang driver para sa driver ng browser = webdriverio.remote ({ninanais na Mga Kakayahan: {browserName: 'firefox'}}); driver.init (tapos);}); // isang pagsusuri.html ') // kumuha ng pamagat, pagkatapos ay ipasa ang pamagat sa pagpapaandar ().getTitle (). pagkatapos (pagpapaandar (pamagat) {// i-verify ang pamagat (pamagat).should.be.equal ("Web Driver IO - Pahina ng Pagsubok sa Tutorial "); // hindi pagkakasundo para sa console debug // console.log ('Pamagat ng Kasalukuyang Pahina:' + pamagat);});}); // isang" kawit "upang patakbuhin pagkatapos ng lahat ng mga pagsubok sa bloke na ito pagkatapos (pag-andar (tapos na) {driver.end (tapos);});});

Mga obserbasyon:

• Dapat mo munang mapansin ang script ng pagsubok na nakasulat sa JAVASCRIPT (nagtatapos sa.js extension).

• Ang pangunahing istraktura ay halos magkapareho para sa lahat ng mga script ng pagsubok.

  • Mga Komento sa Header (//)
  • Mga Kinakailangan na Aklatan
  • Itakda ang Opsyon (opsyonal)
  • Hook: Mag-load ng Driver ng Browser
  • Test Suite (ilarawan)
  • Mga Detalye ng Pagsubok (maaaring maraming Mga Detalye sa isang Suite)
  • Kawit: maglinis ka

• Nagsisimula ang test suite sa isang paglalarawan na pagpapaandar na tumatagal ng dalawang mga parameter:

  • String - Paglalarawan ng test suite

    • "Suriin ang pahina para sa tamang verbiage"
    • "I-verify ang mga pagpapatakbo ng radio button"
  • pagpapaandar - bloke ng code upang maisagawa

    ilarawan ('Paglalarawan ng test suite', pagpapaandar () {});

• Maglalaman ang test suite ng 1 o higit pang spec ng pagsubok (detalye)

• Nagsisimula ang mga detalye sa pagpapaandar na ito na tumatagal ng dalawang mga parameter:

  • String - Paglalarawan ng pagtutukoy ng pagsubok

    • "Dapat ay tamang teksto ng link at URL ng link"
    • "Dapat maglaman ng tamang verbiage (copy deck)
  • pagpapaandar - bloke ng code upang maisagawa
  • ito ('Paglalarawan ng pagsubok na pagtutukoy', pagpapaandar () {});
• Naglalaman ang isang spec ng isa o higit pang mga inaasahan na sumusubok sa estado ng code

• Ang mga ito ay tinatawag na assertions

  Nagbibigay ang aklatan na "dapat" ng mga assertion

• Sa halos lahat ng mga kaso, kakailanganin mong hanapin ang isa o higit pang mga elemento gamit ang isang tagapili pagkatapos ay magsagawa ng ilang operasyon sa (mga) elemento

  • Mga halimbawa:

    • Maghanap ng teksto sa isang pahina at i-verify ang teksto
    • Populate isang form at isumite
    • Patunayan ang CSS ng isang elemento

Tingnan natin nang mabuti ang halimbawa na may mga komento

I-load ang kinakailangang mga aklatan: web driver IO at dapat.

// mga kinakailangang aklatan

var webdriverio = nangangailangan ('webdriverio'), dapat = nangangailangan ('dapat');

Tukuyin ang test suite. Ang suite na ito ay tinawag na: "Pagsusulit sa Pamagat para sa Web Driver IO - Tutorial Halaman ng Website ng Pagsubok"

// isang test script block o suite

ilarawan ('Pagsubok sa Pamagat para sa Web Driver IO - Tutorial Halaman ng Pahina ng Tutorial', pagpapaandar () {…});

Itakda ang timeout sa 10 segundo upang ang script ay hindi mag-timeout kapag naglo-load ng pahina.

// itakda ang timeout sa 10 segundo

this.timeout (10000);

Hook upang mai-load ang driver ng browser bago patakbuhin ang mga pagtutukoy na "specs". Ang driver ng Firefox ay na-load sa halimbawang ito.

// hook upang tumakbo bago ang mga pagsubok

bago (pagpapaandar (tapos) {// i-load ang driver para sa driver ng browser = webdriverio.remote ({ninanais na Mga Kakayahan: {browserName: 'firefox'}}); driver.init (tapos);});

Tukuyin ang detalye ng pagsubok.

// a test spec - "detalye"

ito ('dapat ay wastong pag-load ng pahina at pamagat', pagpapaandar () {…});

I-load ang pahina ng website

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

Kumuha ng pamagat, pagkatapos ay ipasa ang pamagat sa pagpapaandar ()

.getTitle (). pagkatapos (pagpapaandar (pamagat) {

… });

I-verify ang pamagat gamit ang dapat na assertion library.

(pamagat).should.be.equal ("Web Driver IO - Pahina ng Pagsubok sa Tutorial");

Mag-hook upang umalis at linisin ang driver kapag tapos na.

// isang "hook" upang tumakbo pagkatapos ng lahat ng mga pagsubok sa block na ito

pagkatapos (pagpapaandar (tapos) {driver.end (tapos);});

Hakbang 3: Patakbuhin ang Test Script

Ngayon tingnan natin kung ano ang ginagawa ng test script kapag ito ay pinatakbo.

Simulan muna ang Selenium Stand Alone Server:

• Para sa Windows gamitin ang linya ng utos (cmd):

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

• Para sa Mac o Linux, buksan ang terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Tingnan ang screenshot sa itaas

Susunod na patakbuhin ang script ng pagsubok:

• Para sa Windows gamitin ang linya ng utos (cmd):

  • mocha
  • # mocha tutorial1.js

• Para sa Mac o Linux, buksan ang terminal:

  • mocha
  • $ mocha tutorial.js
• Tingnan ang screenshot sa itaas

So anong nangyari

Inanyayahan ni Mocha ang iskrip na "tutorial1.js". Sinimulan ng driver ang browser (Firefox), na-load ang pahina at na-verify ang pamagat.

Hakbang 4: Halimbawa ng Web Site

Ang lahat ng mga halimbawa ay pinatakbo laban sa site na ito.

Ang halimbawang web site ay matatagpuan sa: Web Driver IO Tutorial Test Page

Ang lahat ng mga pagsubok na script ay maaaring ma-download mula sa github.

Hakbang 5: Mga Tiyak na Halimbawa

Magagamit ang lahat ng code sa github: Tutorial sa Web Driver IO sa github

• I-verify ang Link at Link Text sa isang hindi naayos na listahan - "linkTextURL1.js"

  • Ang unordered list ay may isang at ang link ay ang ika-4 na item sa listahan.
  • Ang URL ay dapat na "https://tlkeith.com/contact.html"

// Verify contact Us link text

ito ('dapat maglaman ng teksto sa link ng Makipag-ugnay sa Amin', pagpapaandar () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). pagkatapos (function (link) {console.log ('Nakita ang link:' + link); (link).should.equal ("Makipag-ugnay sa Amin");});}); // I-verify ang Makipag-ugnay sa Amin URL ito ('dapat maglaman ng Makipag-ugnay sa Amin URL', pagpapaandar () {return driver.getAttribut ("// ul [@ id = 'mylist'] / li [4] / a", "href").tapos (pagpapaandar (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('Natagpuan ang URL:' + link);});});

• I-verify ang Teksto ng Copyright - "Copyright1.js"

  • Ang copyright ay nasa footer. Ang halimbawang ito ay nagpapakita ng 2 magkakaibang paraan upang hanapin ang teksto ng copyright:

    • sa pamamagitan ng bilang tagapili ng elemento
    • sa pamamagitan ng paggamit ng xpath bilang tagapili ng elemento

// Verify Copyright text using id as element selector

ito ('dapat maglaman ng teksto ng Copyright', pagpapaandar () {return driver.getText ("# copyright"). pagkatapos (function (link) {console.log ('Nakita ang copyright:' + link); (link).should. pantay ("Tony Keith - tlkeith.com @ 2015 - Nakalaan ang lahat ng mga karapatan.");});}); // Verify Copyright text using xpath as element selector it ('dapat maglaman ng teksto ng Copyright', pagpapaandar () {return driver.getText ("// footer / center / p"). Pagkatapos (function (link) {console.log ('Natagpuan ang copyright:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Nakalaan ang lahat ng mga karapatan.");});});

• Populate Form Fields at Isumite - "formFillSubmit1.js"

  • Punan ang unang pangalan, apelyido at isumite, pagkatapos ay maghintay para sa mga resulta.

  • Ipinapakita ng halimbawang ito ang 3 mga pamamaraan ng pagpuno ng patlang ng input ng unang pangalan:

    • ni id
    • sa pamamagitan ng xpath mula sa pag-input
    • sa pamamagitan ng xpath mula sa form-> input
  • Ipinapakita rin kung paano i-clear ang isang input field

// Itakda ang unang pangalan gamit ang id kay: Tony

ito ('dapat itakda ang unang pangalan kay Tony', pagpapaandar () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). pagkatapos (function (e) {(e).should.be.equal ("Tony"); console.log ("Unang Pangalan:" + e);});}); // Clear the first name using id it ('dapat i-clear ang unang pangalan', function () {return driver.clearElement ("# fname").getValue ("# fname"). Pagkatapos (function (e) {(e).should.be.equal (""); console.log ("Unang Pangalan:" + e);});}); // Itakda ang unang pangalan gamit ang xpath mula sa pag-input sa: Tony it ('dapat itakda ang unang pangalan kay Tony', pagpapaandar () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). pagkatapos (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);});}); // Clear the first name using xpath from input it ('should clear first name', function () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). pagkatapos (function (e) {(e).should.be.equal (" "); console.log (" First Name: "+ e);});}); // Itakda ang unang pangalan gamit ang xpath mula sa form patungo sa: Tony it ('dapat itakda ang unang pangalan kay Tony', function () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Pagkatapos (function (e) {(e).should.be.equal ("Tony"); console.log ("Unang Pangalan:" + e);});}); // Itakda ang apelyido gamit ang id sa: Keith it ('dapat itakda ang apelyido sa Keith', pagpapaandar () {return driver.setValue ("# lname", "Keith").getValue ("# lname"). Pagkatapos (pagpapaandar (e) {(e).should.be.equal ("Keith"); console.log ("Huling Pangalan:" + e);});}); // Isumite ang form at maghintay para sa mga resulta ng paghahanap na ito ('dapat magsumite ng form at maghintay para sa mga resulta', function () {return driver.submitForm ("# search-form"). Pagkatapos (function (e) {console.log (' Isumite ang Form sa Paghahanap ');}).waitForVisible ("# mga resulta sa paghahanap", 10000).tapos (pagpapaandar (e) {console.log (' Nahanap ang Mga Resulta sa Paghahanap ');});});

• I-click ang Ipakita / Itago ang Button at Patunayan ang Teksto - "showHideVerify1.js"

  • Ang teksto ay nasa isang palabas / itago na elemento. Kinokontrol ng pindutan ang estado.

  • Ipinapakita ng halimbawang ito:

    • I-click ang pindutan upang mapalawak
    • Hintaying makita ang elemento (pinalawak)
    • Patunayan ang teksto (kopyahin ang kubyerta)

// click "More Info" button at i-verify ang teksto sa pinalawak na elemento

ito ('dapat mag-click sa higit pang pindutan ng impormasyon at i-verify ang teksto', pagpapaandar () {return driver.click ("# moreinfo"). pagkatapos (function () {console.log ('Na-click ang Higit pang Impormasyon na pindutan');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@ id = 'collapseExample'] / div"). pagkatapos (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Lahat ng bagay na mabuti pumunta dito!");});});

• Patunayan ang Mga Error sa Patlang sa Form - "formFieldValidation.js"

  • Gumamit ng mga script ng pagsubok upang mapatunayan ang wastong mga mensahe ng error ay ginawa.

  • Ipinapakita ng halimbawang ito:

    I-verify ang mga error na text message at i-verify ang lokasyon (hindi naayos na posisyon ng listahan)

ito ('dapat maglaman ng 5 mga error: una / huling / address / lungsod / estado', pagpapaandar () {

return driver.getText ("// ul [@ class = 'alert alert-danger'] / li [1]"). pagkatapos (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Mangyaring ipasok ang unang pangalan');}).getText ("// ul [@ class = 'alert alert-panganib'] / li [2]"). pagkatapos (pagpapaandar (e) {console.log ('Error found:' + e); (e).should.be.equal ('Mangyaring ipasok ang apelyido');}).getText ("// ul [@ class = 'alert alert-panganib '] / li [3] "). pagkatapos (function (e) {console.log (' Error found: '+ e); (e).should.be.equal (' Mangyaring ipasok ang address ');}). getText ("// ul [@ class = 'alert alert-danger'] / li [4]"). pagkatapos (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Mangyaring ipasok ang lungsod');}).getText ("// ul [@ class = 'alert alert-danger'] / li [5]"). pagkatapos (function (e) {console.log ('May nahanap na error:' + e); (e).should.be.equal ('Mangyaring ipasok ang estado');}); });

• Pag-loop ng Data upang Patunayan ang Link / Text / Pahina ng URL - "LoopDataExample1.js"

  • Ipinapakita ang halimbawang ito: Gumamit ng isang hanay ng data ng JSON upang maiimbak ang link at pangalan, pagkatapos ay umulit

    • I-verify ang bawat teksto ng URL at link
    • I-click ang pahina ng link at i-load

// Link data - link at teksto

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 "}]; … // loop through each linkArray linkArray.forEach (function (d) {it ('dapat maglaman ng text / link pagkatapos ng goto page -' + d.name, function () {return driver // siguraduhin na ikaw ay nasa panimulang pahina.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). pagkatapos (function (title) {// verify title (title).should.be.equal ("Web Driver IO - Pahina ng Pagsubok sa Tutorial ");}) // hanapin ang URL.getAttribute ('a =' + d.name," href "). Pagkatapos (function (link) {(link).should.equal (d.link); console.log ('Nahanap ang URL:' + d.link);}) // pumunta sa pahina ng URL at i-verify na mayroon ito.click ('a =' + d.name).waitForVisible ("# js-repo-pjax- lalagyan ", 10000).tapos (pagpapaandar () {console.log ('Natagpuan ang Pahina ng Github');});});});

• Pag-loop ng Static na Data upang Populate Forms Fields - "loopDataExample2.js"

  • Ipinapakita ang halimbawang ito: Gumamit ng isang hanay ng data ng JSON upang maiimbak ang una / apelyido

    • Mag-loop sa pamamagitan ng data upang mapunan ang mga patlang ng form, pagkatapos isumite ang form
    • Maghintay para sa pahina ng mga resulta
    • Patunayan ang una / apelyido sa pahina ng mga resulta

// data array - firstName and lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // loop through each dataArray dataArray.forEach (function (d) {it ('dapat mapunan ang mga patlang, pahina ng sumbit', pagpapaandar () {return driver // siguraduhin na ikaw ay nasa panimulang pahina.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). pagkatapos (function (title) {// verify title (title).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("# fname", d.firstName).getValue ("# fname"). pagkatapos (function (e) {(e).should.be.equal (d.firstName); console.log ("Una Pangalan: "+ e);}).setValue (" # lname ", d.lastName).getValue (" # lname "). Pagkatapos (function (e) {(e).should.be.equal (d.lastName); console.log ("Huling Pangalan:" + e);}).submitForm ("# search-form"). pagkatapos (function () {console.log ('Isumite ang Form sa Paghahanap');}).waitForVisible ("# mga resulta sa paghahanap", 10000).tapos (function () {console.log ('Natagpuan ang Pahina ng Resulta');}).getText ("// h1"). pagkatapos (pagpapaandar (link) {console.log ('Natagpuan ang teksto:' + link); (link).should.equal ("Maligayang pagdating" + d.firstName + "" + d.lastName + ".");});});});

• Patunayan ang Mga Katangian ng CSS - "cssValidation1.js"

  • Ipinapakita ng halimbawang ito kung paano:

    • Patunayan ang mga sumusunod na katangian ng CSS:

      • kulay
      • padding (itaas, ibaba, kanan, kaliwa)
      • kulay ng background

ito ('dapat maglaman ng tamang kulay ng error text', pagpapaandar () {return driver.getCssProperty ("// ul [@ class = 'alert alert-panganib'] / li [1]", "color"). pagkatapos (pagpapaandar (resulta) {console.log ('Natagpuan ang kulay:' + resulta.parsed.hex + "o" + resulta.value); (resulta.parsed.hex).should.be.equal ('# a94442'); });});

ito ('dapat maglaman ng tamang padding sa table cell', pagpapaandar () {

ibalik ang driver // padding: tuktok sa kanang ibaba sa kaliwa.getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top"). pagkatapos (pag-andar (resulta) {console.log ('natagpuan ang tuktok:' + resulta.value); (resulta.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-ilalim "). pagkatapos (pag-andar (resulta) {console.log ('nakita ang padding-ilalim:' + resulta.value); (resulta.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- kanan "). pagkatapos (pag-andar (resulta) {console.log ('nalaman ang padding-kanan:' + resulta.value); (resulta.value).should.be.equal ('5px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-left"). pagkatapos (pag-andar (resulta) {console.log (nahanap ang 'padding-left: '+ resulta.value); (resulta.value).should.be.equal (' 5px ');}); });

ito ('dapat maglaman ng tamang kulay ng background sa table header', pagpapaandar () {

return driver.getCssProperty ("// table [@ id = 'filelist'] / thead", "background-color"). pagkatapos (function (resulta) {console.log ('background color found:' + resulta.parsed. hex); (resulta. pares.hex). dapat. maging pantay ('# eeeeee');}); });

Hakbang 6: Mga Tip at Trick

• Pag-debug:

  • I-on ang pag-log sa antas ng driver para sa higit pang pag-debug at upang lumikha ng mga tala.

    • Itakda ang logLevel sa 'verbose'
    • Itakda ang logOutput sa pangalan ng direktoryo ('mga tala')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'mga log', {ninanais na Mga Kakayahan: {browserName: 'firefox'}});

• Gumamit ng console.log (), debug (), getText () upang i-debug.

  • console.log () - Gamitin upang ipakita ang impormasyon upang matukoy ang estado.
  • debug () - Gumamit ng pause browser / script hanggang ang enter ay pinindot sa linya ng utos.

  • getText () - Gamitin upang i-verify na nakikipag-ugnay ka sa tamang elemento.

    Lalo na kapaki-pakinabang sa mga expression ng xpath

// Mag-click sa Item 3 mula sa listahan

ito ('dapat mag-click sa Item 3 mula sa listahan', pagpapaandar () {// use getText () upang mapatunayan na ang xpath ay tama para sa driver ng elemento na bumalik.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). Pagkatapos (function (link) {// use console.log () to output information console.log ('Link found:' + link); (link).should.equal ("Item 3");}) // gumamit ng debug () upang ihinto ang pagkilos upang makita kung ano ang nangyayari sa browser.debug ().click ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Na-click ang link');}) // hintaying lumitaw ang form ng paghahanap sa google.waitForVisible ("# tsf", 20000). pagkatapos (pag-andar (e) {console.log ('Nahanap ang Mga Resulta sa Paghahanap');});});

• Gumamit ng Variable sa Kapaligiran upang Palitan ang Dynows ng Browser:

  • Gumamit ng variable ng kapaligiran SELENIUM_BROWSER upang humingi ng ibang browser nang hindi binabago ang test script sa bawat oras.
  • Nangangailangan ng kaunting pagbabago sa pag-coding upang suportahan.

Mga Pagbabago ng Code:

// load the driver for browser

driver = webdriverio.remote ({ninanais na Mga Kakayahan: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Mga sinusuportahang Browser:

• Internet Explorer - IE 8+ (Windows Only)

  SELENIUM_BROWSER = ie 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

Pagsubok:

• Para sa Windows gamitin ang git bash shell:

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

• Para sa Mac o Linux, buksan ang terminal:

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

• Tumutugon na Pagsubok:

  • Tukuyin ang mga breakpoint batay sa proyekto o balangkas (ie bootstrap).

  • Tukuyin ang mga variable ng kapaligiran para sa bawat breakpoint:

    • DESKTOP - 1200 px
    • TABLET - 992 px
    • MOBILE - 768 px

  • Bumuo ng isang magagamit muli na utos upang basahin ang variable ng kapaligiran at itakda ang laki ng browser.

    Tingnan ang halimbawa sa ibaba

  • Tumawag sa muling magagamit na utos sa iyong script ng pagsubok.

// reusable code - library // code snippet if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } iba pa kung (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } iba pa kung (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Script script

bago (function (tapos) {winize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // itakda ang laki ng window nito ('dapat itakda ang laki ng window', pagpapaandar (tapos) {// ang lapad lamang ay mahalaga sa driver.setWindowSize (winize.width, winsize.height, function () {}). call (tapos);});

• Reusable Command (Pasadyang Mga Utos):

  • Ang Web Driver IO ay madaling maipalawak.
  • Gusto kong ilagay ang lahat ng mga magagamit muli na utos sa isang silid-aklatan. (marahil ito ay lumang paaralan ngunit ito ay gumagana!)

karaniwang / karaniwangLib.js

// verifyLastNameCheckError ()

// // Paglalarawan: // Napatunayan ang mensahe ng error sa pagpapatunay ng form ng apelyido // // Input: // number - index of error (1-5) // Output: // none // var verifyLastNameCheckError = function () { var idx = arguments [0], callback = arguments [arguments.length - 1]; this.getText ("// ul [@ class = 'alert alert-danger'] / li [" + idx + "]", function (err, e) {console.log ('Error found:' + e); (e).should.be.equal ('Mangyaring ipasok ang apelyido');}).call (callback); }; // export the function module.exports.verifyLastNameCheckError = verifyLastNameCheckError;

Narito ang mga tukoy na pagbabago na kinakailangan upang tumawag sa isang magagamit muli na pagpapaandar

Tingnan ang formFieldValidation.js para sa kumpletong halimbawa ng pagtatrabaho

// nangangailangan ng muling magagamit na utos - CommonLib

karaniwang = nangangailangan ('./ Common / CommonLib'); … // bind the command driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (driver)); ito ('dapat maglaman ng 2 mga error: una / huling pangalan', pagpapaandar () {// tawagan ang driver na magagamit muli.verifyFirstNameError (1);.verifyLastNameError (2);});

• Istraktura ng File / Direktoryo ng Project:

  • Narito ang tipikal na istraktura ng proyekto:

    • "Project" - pangunahing direktoryo ng proyekto

      • README.md - readme para sa pandaigdigang proyekto

      • "Karaniwan" - direktoryo para sa pandaigdigang mga pagpapaandar na karaniwang sa lahat ng mga proyekto

        • common-lib.js - pandaigdigang library ng pag-andar
        • README.md - readme para sa mga pandaigdigang pag-andar

      • "Product1" - direktoryo para sa produkto 1

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

        • "Karaniwan" - direktoryo para sa mga lokal na pagpapaandar sa proyekto 1

          • prod1-lib.js - library ng lokal na pag-andar para sa proyekto 1
          • README.md - readme para sa mga lokal na pagpapaandar sa proyekto 1

      • "Product2" - direktoryo para sa produkto 2test-script1.jstest-script2.js

        • "Karaniwan" - direktoryo para sa mga lokal na pagpapaandar sa proyekto 2

          • prod2-lib.js - library ng lokal na pag-andar para sa proyekto 2
          • README.md - readme para sa mga lokal na pagpapaandar sa proyekto 2

• Hatiin ang mga script ng pagsubok sa maraming mga file:

  • Narito ang isang sample ng paggamit ng maraming mga file:

    • Sanity Check - pangunahing script ng pagsubok upang mapatunayan ang lahat ay gumagana
    • Static na Elemento at Pagpapatunay ng Teksto - i-verify ang lahat ng mga elemento at teksto
    • Pagpapatunay ng Error sa Form / Page - pagpapatunay ng error
    • Mga Resulta sa Paghahanap - subukan ang pabagu-bagong nilalaman

• Mga Callback VS. Mga pangako:

  • Sinusuportahan ng Bersyon 3 ng Web Driver IO ang parehong mga callback at pangako.

    Ang mga pangako ang ginustong pamamaraan dahil binawasan nito ang code sa paghawak ng error. Mangyaring tingnan sa ibaba ang parehong halimbawang nakasulat gamit ang mga callback at pangako.

Mga Callback

// Itakda / i-verify ang una / apelyido gamit ang Callback

ito ('dapat itakda / i-verify ang una / apelyido gamit ang Callbacks', pagpapaandar (tapos) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("# lname", "Keith", function (e) { driver.getValue ("# lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Huling Pangalan:" + e); tapos ();});});});});});

Mga pangako

// Itakda / i-verify ang una / apelyido gamit ang Mga Pangako

ito ('dapat itakda / i-verify ang una / apelyido gamit ang Mga Pangako', pagpapaandar () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). pagkatapos (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). pagkatapos (pagpapaandar (e) {(e).should.be.equal ("Keith"); console.log ("Huling Pangalan:" + e);});});

Hakbang 7: Higit Pang Mga Mapagkukunan

Narito ang ilang mga karagdagang mapagkukunan para sa iyong sanggunian:

• Mga Grupo ng Talakayan (Gitter)

  • Pangkat ng Talakayan sa Web Driver IO
  • Pangkat ng Talakayan ni Mocha

• Iba pang mga kagiliw-giliw na proyekto

  • Supertest - Mga assertong
  • Chai - assertions

Hakbang 8: Konklusyon

Gumugol ako ng ilang oras sa pagsasaliksik ng mga teknolohiya na gagamitin para sa aking proyekto. Orihinal na nagsimula ako sa Selenium Web Driver ngunit lumipat sa paggamit ng Web Driver IO. Ang Web Driver IO ay tila mas madaling gamitin at mas madaling mapalawak (hindi bababa sa dokumentasyon para sa pagpapalawak - mas mahusay na magagamit na mga utos).

Noong una akong nagsimulang tumingin sa mga teknolohiya mahirap makahanap ng magagandang halimbawa na kamag-anak sa anumang sinusubukan kong gawin. Ito ang dahilan kung bakit nais kong ibahagi sa iyo ang impormasyong at kaalaman na ito.

Ang mga teknolohiya ay nagtrabaho ng mas mahusay kaysa sa inaasahan ko subalit mayroong pag-aaral na kurba na kasangkot. Kapag naintindihan ko kung paano nagtulungan ang lahat ng mga sangkap, nakasulat ako ng mga kumplikadong script ng pagsubok sa isang napakaikling panahon. Ang pinakamahirap na mga script ay batay sa mga bahagi ng JavaScript tulad ng isang tagapili ng petsa at mga tagapili ng modal.

Hindi ko na-label ang aking sarili bilang isang developer ng JavaScript at hindi ko nais na maging dalubhasa sa JavaScript, ngunit ang paggamit ng mga teknolohiyang ito ay tiyak na nag-uudyok sa akin upang patalasin ang aking mga kasanayan sa JS.

Inaasahan kong ang artikulong ito ay kapaki-pakinabang at ang mga halimbawa ay malinaw at kaalaman.

Mangyaring ipaalam sa akin kung mayroon kang anumang mga katanungan o komento.

Salamat, Tony Keith