Вэб драйвер IO -ийн шууд вэбсайт ашиглах заавар ба ажлын жишээ: 8 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:04

Вэб драйвер IO -ийн шууд вэбсайт ашиглах заавар ба ажлын жишээ

Сүүлийн шинэчлэлт: 2015.07.26

(Би энэ зааварчилгааг илүү дэлгэрэнгүй, жишээнүүдээр шинэчилж байхдаа байнга шалгаж үзээрэй)

Арын дэвсгэр

Саяхан надад нэгэн сонирхолтой сорилтыг танилцуулсан. Техникийн туршлага багатай, програмчлалын мэдлэггүй Q/A хэлтэст автомат тестийг нэвтрүүлэх шаардлагатай болсон.

Энэ бол үнэхээр хоёр (2) тусдаа сорилт байсан. Эхнийх нь автомат тест хийх технологийг тодорхойлох явдал байв. Хоёр дахь нь асуулт хариултын тэнхимийг сургах явдал байв.

Уг нийтлэлд зөвхөн ашигласан технологиуд болон энэ явцад олж мэдсэн зүйлсийнхээ талаар ярих болно.

Технологи сайн ажилласан боловч би үнэхээр мэдээлэл хайх хэрэгтэй болж, олон цаг асуудлыг шийдэж чадсан.

Эдгээр технологийн хамтын ажиллагааны талаархи мэдээллийг интернетээс олоход надад хэцүү байсан.

Би энэ мэдээллийг хуваалцахыг хүсч байсан тул скриптүүдийг ажиллуулах тестийн скриптүүд болон туршилтын вэбсайттай хамт энэ нийтлэлийг бичсэн.

Бүх туршилтын скриптийг github дээрээс олж болох бөгөөд ажлын туршилтын сайт нь Web Driver IO сургалтын туршилтын сайт дээр байрладаг.

Танд хэрэгтэй гэж найдаж байна. Хэрэв тийм бол надад мэдэгдээрэй.

Зорилго Технологийг ашиглахын тулд:

• Вэб сайтын ажиллагааг шалгах
• JavaScript функцийг туршиж үзээрэй
• Гараар ажиллуулах боломжтой
• Автоматаар ажиллуулах боломжтой

• Программист бус хүмүүст хэл сурахад хялбар

  Q/HTML болон JavaScript -ийн анхан шатны мэдлэгтэй ажилтнууд

• Зөвхөн нээлттэй эхийн програм хангамжийг ашиглах

Технологи

Миний сонгосон технологийн жагсаалт:

• mocha - туршилтын гүйгч - туршилтын скриптүүдийг гүйцэтгэдэг
• mustjs - батламж номын сан
• webdriverio - хөтчийн хяналтын холболт (хэлний холболт)
• селен - хөтөчийн хийсвэрлэл болон ажиллаж буй үйлдвэр

• Хөтөч/гар утасны драйвер + хөтөч

  • Firefox (зөвхөн хөтөч дээр)
  • Chrome (хөтөч ба драйвер)
  • IE (Хөтөч ба драйвер)
  • Safari (хөтөч ба драйверын залгуур)

Алхам 1: Програм хангамж суурилуулах

Эхлэхийн тулд танд Node JS, Web Driver IO, Mocha, Should, Selenium дангаараа сервер суулгасан байх шаардлагатай.

Windows 7 -ийг суулгах заавар энд байна.

(Би Мак/Линукс хэрэглэгч боловч Windows 7 машин дээр бүх зүйлийг суулгах ёстой байсан тул үүнийг танд зориулан оруулсан болно. Mac/Linux дээр суулгах журам нь ойролцоо байна. Дэлгэрэнгүй мэдээллийг онлайн лавлагаанаас лавлана уу. мэдээлэл.)

Хөтөчөөс:

• NPM (Node Package Manager) агуулсан Node -ийг суулгах

• https://nodejs.org/ руу очно уу.

  • Суулгах дээр дарна уу
  • Файлыг хадгалаад ажиллуулна уу
  • Зам болон хувьсагчийг тохируулах (NODE_PATH)

  • Control Panel-> System and Security-> System хэсэгт очно уу

    • Нарийвчилсан системийн тохиргоо

    • Хүрээлэн буй орчны тохиргоо (Хэрэглэгчийн хувьсагчид)

      • PATH дээр нэмэх

        C: / Хэрэглэгчид {USERNAME} AppData / Роуминг / npm;

      • NODE_PATH (системийн хувьсагч) нэмэх

        C: / Хэрэглэгчид {USERNAME} AppData / Роуминг / npm / node_modules

Тэмдэглэл: Би доорх бүх програм хангамжийг npm дэлхийн сонголтыг (-g) ашиглан суулгасан. Үүнийг ихэвчлэн зөвлөдөггүй боловч энэ суулгацыг олон төсөл дээр ашиглах тул дэлхий даяар суулгах шаардлагатай болсон.

Командын мөрийг нээнэ үү (cmd):

(орон нутгийн хэрэглэгчийн админ)

• Селений "вэб драйвер IO" суулгана уу

  • npm webdriverio -g суулгана уу

    Энэ нь вэб драйвер IO -г дэлхий даяар таны машин дээр суулгах болно

• "Mocha" туршилтын гүйлтийн програмыг суулгана уу

  • npm mocha -g суулгана уу

    Энэ нь дэлхий даяар mocha -г таны машин дээр суулгах болно

• "Шаардлагатай" батлах номын санг суулгана уу

  • npm суулгах ёстой -g

    Энэ нь дэлхий даяар таны компьютер дээр "ёстой" -г суулгах болно

• Селений бие даасан серверийг суулгана уу

  • Http://www.seleniumhq.org/download/ руу орно уу.
  • Jar файлыг татаж аваад "селени" лавлах руу шилжинэ үү.

• Туршихын тулд хөтөч болон хөтчийн драйверуудыг суулгаарай

  • Cmd тушаалаас:

    • "Селен" лавлах үүсгэх
    • C: / Хэрэглэгчид {USERNAME} селени

    • Тушаалууд:

      • cd C: / Хэрэглэгчид {USERNAME}
      • мкдир селен

    • Firefox

      • Хэрэв суулгаагүй бол firefox хөтөчийг суулгаарай.
      • Firefox -ийг командын мөрөөс (cmd) эхлүүлэхийн тулд замыг тохируулах ёстой.

      • Хяналтын самбар-Систем ба Аюулгүй байдал-Систем

        • Нарийвчилсан системийн тохиргоо
        • Байгаль орчны тохиргоо
        • Path Variable дээр нэмэх (цэг таслалыг нэмэх) нэмнэ үү
        • C: / Program Files (x86) Mozilla Firefox
      • Firefox -д зориулсан тусгай вэб драйвер шаардлагагүй.

    • Chrome

      • Хэрэв суулгаагүй бол chrome хөтөчийг суулгана уу.
      • Chrome -ийг командын мөрөөс (cmd) эхлүүлэх замыг тохируулж болно.
      • Эхлээд турших: командын мөрөөс chrome.exe (cmd)
      • Хэрэв Chrome эхлэхгүй бол:

      • Хяналтын самбар-Систем ба Аюулгүй байдал-Систем

        • Нарийвчилсан системийн тохиргоо
        • Байгаль орчны тохиргоо
        • Path Variable дээр нэмэх (цэг таслалыг нэмэх) нэмнэ үү
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome -д тусгай вэб драйвер хэрэгтэй.

        Chromium.org руу орж 32 битийн драйверыг "селени" лавлах санд задлаарай

    • Internet Explorer (зөвхөн Windows -д зориулагдсан - бусад платформ дээр ажиллахгүй)

      • IE -д зориулсан тусгай вэб драйвер хэрэгтэй.

        • Http://www.seleniumhq.org/download/ руу орно уу.
        • 64 битийн драйверыг "селени" директор руу татаж аваад задлаарай.

Алхам 2: Үндсэн тестийн скрипт

Зарим үндсэн зүйлээс эхэлье.

Энд вэб сайт нээж гарчгийг баталгаажуулах энгийн mocha скрипт байна.

// заавар1.js

// // Энэ бол вэбсайт нээх, // гарчгийг баталгаажуулах энгийн тест скрипт юм. // шаардлагатай номын сан var webdriverio = шаарддаг ('webdriverio'), ёстой = шаардах ('ёстой'); // туршилтын скрипт блок эсвэл багцыг тайлбарласан болно ('Вэб драйверын IO -ийн гарчгийн тест - зааварчилгааны хуудасны вэбсайт', function () {// timeout this 10 time this.timeout (10000); var driver = {}; // туршилтын өмнө ажиллуулахын тулд дэгээ (функц (хийгдсэн) {// хөтчийн хөтөчийг драйверийг ачаална уу = webdriverio.remote ({хүссэнCapabilities: {browserName: 'firefox'}}); driver.init (хийсэн);}); // туршилтын үзүүлэлт - "тодорхойлолт" энэ ('зөв хуудас, гарчиг ачаалах ёстой', function () {// хуудсыг ачаалах, дараа нь function () рүү буцах драйвер.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // гарчиг аваад дараа нь функцийг ().getTitle () руу дамжуулна уу. Дараа нь (функц (гарчиг) {// гарчгийг баталгаажуулах (гарчиг).should.be.equal ("Вэб драйвер IO - Хичээлийн тестийн хуудас "); // консол дибаг хийх талаар тайлбар өгөхгүй // console.log ('Одоогийн хуудасны гарчиг:' + гарчиг);});}); // энэ блок дахь бүх туршилтуудын дараа (функц (хийгдсэн) {driver.end (дууссан);});});

Ажиглалт:

• Та эхлээд тестийн скриптийг JAVASCRIPT (.js өргөтгөлөөр төгсдөг) гэж бичсэн болохыг анхаарах хэрэгтэй.

• Үндсэн бүтэц нь бүх тестийн скриптүүдийн хувьд бараг ижил байдаг.

  • Толгойн тайлбар (//)
  • Шаардлагатай номын сан
  • Сонголтыг тохируулах (заавал биш)
  • Дэгээ: Хөтчийн драйверийг ачаална уу
  • Туршилтын багц (тайлбарлах)
  • Туршилтын үзүүлэлтүүд (Suite доторх олон үзүүлэлтүүд байж болно)
  • Дэгээ: цэвэрлэ

• Туршилтын багц нь хоёр параметрийг агуулсан тайлбарлах функцээс эхэлдэг.

  • String - Туршилтын програмын тодорхойлолт

    • "Зөв үг хэллэг байгаа эсэхийг шалгах хуудас"
    • "Радио товчлуурын ажиллагааг шалгах"

  • функц - гүйцэтгэх кодын блок

    тайлбарлах (‘Туршилтын багцын тайлбар ', function () {});

• Туршилтын багц нь 1 ба түүнээс дээш тооны туршилтын үзүүлэлтийг агуулсан болно.

• Үзүүлэлтүүд нь хоёр параметрийг агуулсан функцээс эхэлдэг:

  • String - Туршилтын техникийн тодорхойлолтын тодорхойлолт

    • "Зөв холбоосын текст, холбоосын URL байх ёстой."
    • "Зөв үг хэллэг агуулсан байх ёстой (хуулбар хийх тавцан)
  • функц - гүйцэтгэх кодын блок
  • it (‘Туршилтын техникийн тодорхойлолт ', function () {});
• Тодорхойлолт нь кодын төлөв байдлыг шалгадаг нэг буюу хэд хэдэн хүлээлтийг агуулдаг

• Эдгээрийг батламж гэж нэрлэдэг

  "Зөв" номын сан нь баталгааг өгдөг

• Бараг бүх тохиолдолд та сонгогч ашиглан нэг буюу хэд хэдэн элементийг хайж олох хэрэгтэй бөгөөд дараа нь элементүүд дээр зарим үйлдэл хийх шаардлагатай болно.

  • Жишээ:

    • Хуудсан дээрх текстийг олж, текстийг шалгана уу
    • Маягтыг бөглөж, илгээнэ үү
    • Элементийн CSS -ийг баталгаажуулна уу

Сэтгэгдэл бүхий жишээг илүү нарийвчлан авч үзье

Шаардлагатай номын санг ачаална уу: вэб драйвер IO ба байх ёстой.

// шаардлагатай номын сангууд

var webdriverio = шаарддаг ('webdriverio'), ёстой = шаарддаг ('ёстой');

Туршилтын багцыг тодорхойлно уу. Энэхүү иж бүрдлийг "Вэб драйверын IO -ийн гарчгийн тест - Хичээлийн тестийн хуудасны вэбсайт" гэж нэрлэдэг.

// туршилтын скрипт блок эсвэл багц

тайлбарлах ('Вэб драйверын IO -ийн гарчгийн тест - Хичээлийн хуудасны вэбсайт', функц () {…});

Хуудсыг ачаалах үед скрипт хугацаа алдахгүйн тулд завсарлагааны хугацааг 10 секунд болгож тохируулна уу.

// завсарлагааны хугацааг 10 секунд болгож тохируулна уу

this.timeout (10000);

"Үзүүлэлтүүд" техникийн тодорхойлолтыг ажиллуулахаасаа өмнө хөтчийн драйверийг ачаалах хэрэгтэй. Энэ жишээнд Firefox драйвер ачаалагдсан байна.

// туршилтын өмнө ажиллуулахын тулд дэгээ

өмнө (функц (дууссан) {// хөтчийн хөтөчийг драйверын драйвер руу ачаална уу = webdriverio.remote ({хүссэнCapabilities: {browserName: 'firefox'}}); driver.init (хийгдсэн);});

Туршилтын тодорхойлолтыг тодорхойлно уу.

// туршилтын үзүүлэлт - "тодорхойлолт"

it ('хуудас, гарчиг зөв байх ёстой', function () {…});

Вэбсайтын хуудсыг ачаална уу

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

Гарчиг аваад дараа нь гарчигийг функц рүү дамжуулна уу ()

.getTitle (). дараа нь (функц (гарчиг) {

… });

Шаардлагатай номын санг ашиглан гарчгийг баталгаажуулна уу.

(гарчиг).should.be.equal ("Вэб драйвер IO - Хичээлийн тестийн хуудас");

Ажил дууссаны дараа жолоочийг орхиж, цэвэрлээрэй.

// энэ блок дахь бүх тестийн дараа ажиллуулах "дэгээ"

after (function (done) {driver.end (done);});

Алхам 3: Туршилтын скриптийг ажиллуулна уу

Одоо туршилтын скрипт ажиллаж байх үед юу хийдгийг харцгаая.

Эхлээд Selenium Stand Alone Server -ийг эхлүүлнэ үү.

• Windows -ийн хувьд командын мөрийг (cmd) ашиглана уу.

  • java -жар
  • # java -jar селени-сервер-бие даасан-2.46.0.jar

• Mac эсвэл Linux -ийн хувьд терминалыг нээнэ үү.

  • java -жар
  • $ java -jar селени-сервер-бие даасан-2.46.0.jar
• Дээрх дэлгэцийн агшинг үзнэ үү

Дараа нь туршилтын скриптийг ажиллуулна уу.

• Windows -ийн хувьд командын мөрийг (cmd) ашиглана уу.

  • моча
  • # mocha заавар1.js

• Mac эсвэл Linux -ийн хувьд терминалыг нээнэ үү.

  • моча
  • $ mocha tutorial.js
• Дээрх дэлгэцийн агшинг үзнэ үү

Тэгэхээр юу болсон бэ?

Моча "tutorial1.js" скриптийг дууддаг. Драйвер хөтөчийг (Firefox) эхлүүлж, хуудсыг ачаалж, гарчгийг баталгаажуулав.

Алхам 4: Вэб сайтын жишээ

Бүх жишээг энэ сайтын эсрэг ажиллуулдаг.

Жишээ вэб сайт нь: Вэб драйверын IO сургалтын туршилтын хуудас дээр байрладаг

Бүх туршилтын скриптийг github дээрээс татаж авах боломжтой.

Алхам 5: Тодорхой жишээ

Бүх кодыг github дээр авах боломжтой: github дээрх вэб драйверын IO заавар

• "LinkTextURL1.js" гэсэн дараалалгүй жагсаалт дахь холбоос ба текстийг баталгаажуулна уу.

  • Эрэмблэгдээгүй жагсаалт нь гэсэн нэртэй бөгөөд холбоос нь жагсаалтын 4 дэх зүйл юм.
  • URL нь "https://tlkeith.com/contact.html" байх ёстой

// Бидэнтэй холбоо барих холбоосын текстийг баталгаажуулна уу

it ('Бидэнтэй холбоо барих холбоосын текстийг агуулсан байх ёстой', function () {буцах драйвер.getText ("// ul [@id = 'mylist']/li [4]/a"). дараа нь (функц (холбоос) {консол.log ('Линк олдсон:' + линк); (холбоос).should.equal ("Бидэнтэй холбоо бариарай");});}); // Бидэнтэй холбоо барих URL хаягийг баталгаажуулна уу ('Холбоо барих хаягийг агуулсан байх ёстой', function () {буцах драйвер.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL олдсон:' + холбоос);});});

• Зохиогчийн эрхийн текстийг баталгаажуулах - "Copyright1.js"

  • Энэхүү жишээ нь зохиогчийн эрхийн текстийг олох 2 өөр аргыг харуулж байна.

    • элемент сонгогчоор
    • xpath -ийг элемент сонгогч болгон ашиглах

// Зохиогчийн эрхийн текстийг элемент сонгогч болгон id ашиглан баталгаажуулна уу

it ('Зохиогчийн эрхийн текст агуулсан байх ёстой', function () {буцах драйвер.getText ("#зохиогчийн эрх"). дараа нь (function (link) {console.log ('Зохиогчийн эрх олдсон:' + линк); (холбоос). тэнцүү ("Тони Кейт - tlkeith.com @ 2015 - Бүх эрх хуулиар хамгаалагдсан.");});}); // Зохиогчийн эрхийн текстийг xpath ашиглан элемент сонгогч болгон шалгана уу ('зохиогчийн эрхийн текст агуулсан байх ёстой', function () {буцах драйвер.getText ("// footer/center/p"). Дараа нь (функц (холбоос) {console.log ('Зохиогчийн эрх олдсон:' + линк]; (холбоос).should.equal ("Tony Keith - tlkeith.com @ 2015 - Бүх эрх хуулиар хамгаалагдсан.");});});

• Маягтын талбаруудыг бөглөж илгээх - "formFillSubmit1.js"

  • Нэр, овог нэрээ оруулаад үр дүнг хүлээнэ үү.

  • Энэ жишээ нь нэр оруулах талбарыг бөглөх 3 аргыг харуулав.

    • id -ээр
    • оролтоос xpath
    • form-> оролтоос xpath-ээр
  • Мөн оролтын талбарыг хэрхэн цэвэрлэхийг харуулав

// id ашиглан анхны нэрийг тохируул: Tony

it ('нэрээ Тони болгож тохируулах ёстой'), function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Тони"); console.log ("Нэр:" + e);});}); // Id it ашиглан нэрээ цэвэрлэ ('нэрийг цэвэрлэх ёстой', function () {return driver.clearElement ("#fname").getValue ("#fname"). Дараа нь (function (e) {(e).should.be.equal (""); console.log ("Нэр:" + e);});}); // Оруулахаас xpath ашиглан нэрээ тохируулна уу: Tony it ('нэрээ Тони болгож тохируулах ёстой'), function () {return driver.setValue ("// input [@name = 'fname']", "Tony")).getValue ("// оролт [@нэр = 'fname']")). дараа нь (функц (e) {(e).should.be.equal ("Тони"); console.log ("Нэр:" + д);});}); // Оруулахаас xpath ашиглан нэрийг цэвэрлэ ('нэр цэвэрлэх ёстой', function () {return driver.clearElement ("// input [@name = 'fname']")).getValue ("// input [@name = 'fname'] ")). дараа нь (функц (e) {(e).should.be.equal (" "); console.log (" Нэр: " + e);});}); // Form-аас xpath ашиглан нэрээ тохируулах: Tony it ('нэрээ Тони болгож тохируулах ёстой'), function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Тони ").getValue (" // маягт [@id = 'хайлтын хэлбэр']/оролт [1] "). Дараа нь (функц (e) {(e).should.be.equal ("Тони"); console.log ("Нэр:" + e);});}); // id ашиглан овог нэрээ тохируулна уу: Keith it ('овог нэрээ Keith болгож тохируулах ёстой'), function () {return driver.setValue ("#lname", "Keith").getValue ("#lname"), дараа нь (функц (e) {(e).should.be.equal ("Keith"); console.log ("Овог:" + e);});}); // Маягт илгээж, хайлтын үр дүнг хүлээнэ үү ('маягтыг илгээж үр дүнг хүлээх ёстой', function () {return driver.submitForm ("#search-form"). Дараа нь (function (e) {console.log (' Хайлтын маягтыг оруулах ');}).waitForVisible ("#хайлтын үр дүн", 10000). Дараа нь (function (e) {console.log (' Хайлтын үр дүн олдсон ');});});

• Show/Hide Button дээр дарж Текстийг баталгаажуулна уу - "showHideVerify1.js"

  • Текст нь шоу/нуух элемент дотор байна. Товчлуур нь мужийг хянадаг.

  • Энэ жишээ харуулж байна:

    • Дэлгэрүүлэхийн тулд товчлуур дээр дарна уу
    • Элемент харагдахыг хүлээнэ үү (өргөтгөсөн)
    • Текстийг баталгаажуулах (давцангийн хуулбар)

// "Дэлгэрэнгүй мэдээлэл" товчийг дарж өргөтгөсөн элемент дэх текстийг шалгана уу

it ('Дэлгэрэнгүй мэдээллийн товчлуурыг дарж текстийг шалгах ёстой'), function () {буцах драйвер. дарна уу ("#дэлгэрэнгүй мэдээлэл") ("#collapseExample", 5000).getText ("// div [@id = 'collExample']/div"). дараа нь (function (e) {console.log ('Текст:' + e); (e).should.be.equal ("Сайн бүхэн энд явна!");});});

• Маягтын талбарын алдааг баталгаажуулах - "formFieldValidation.js"

  • Алдааны мессеж зөв хийгдсэн эсэхийг шалгахын тулд туршилтын скриптүүдийг ашиглана уу.

  • Энэ жишээ харуулж байна:

    Алдааны текст мессежийг шалгаж, байршлыг баталгаажуулна уу (жагсаалтгүй байрлал)

it ('5 алдааг агуулсан байх ёстой: эхний/сүүлчийн/хаяг/хот/муж'), function () {

буцах драйвер.getText ("// ul [@class = 'alert alert-аюул']/li [1]"). Дараа нь (function (e) {console.log ('Алдаа олдсон:' + e); (e).should.be.equal ('Нэрээ оруулна уу');}).getText ("// ul [@class = 'alert alert-аюул']/li [2]"). дараа нь (функц (e) {console.log ('Алдаа олдсон:' + e); (e).should.be.equal ('Овогоо оруулна уу';))) ']/li [3] "). дараа нь (функц (e) {console.log (' Алдаа олдсон: ' + e); (e).should.be.equal (' Хаягийг оруулна уу ');}). getText ("// ul [@class = 'alert alert-аюул']/li [4]"). дараа нь (function (e) {console.log ('Алдаа олдсон:' + e); (e)..be.equal ('Хотыг оруулна уу');}).getText ("// ul [@class = 'alert alert-аюул']/li [5]"). дараа нь (function (e) {console.log ('Алдаа олдсон:' + e); (e).should.be.equal ('Төлөв оруулна уу');}); });

• URL холбоос/текст/хуудсыг баталгаажуулахын тулд өгөгдлийг давтаж байна - "LoopDataExample1.js"

  • Энэ жишээ харуулж байна: Холбоос болон нэрийг хадгалахын тулд JSON өгөгдлийн массивыг ашиглаж, дараа нь давтан хийнэ үү

    • URL текст болон холбоос бүрийг баталгаажуулна уу
    • Холбоос дээр дарж хуудсыг ачаална уу

// Мэдээллийг холбох - холбоос ба текст

var linkArray = [{"холбоос": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"линк": "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 "}, {" линк ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," нэр ":" formFillSubmit1.js "}, {" линк ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" линк ":" 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 "}, {" линк ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," нэр ": "дэбу gExample1.js "}, {" холбоос ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," нэр ":" formFieldValidation.js "}, {" холбоос ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" линк ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // linkArray linkArray.forEach (function (d) {it ('текст/линкийг агуулсан байх ёстой.' + D.name, function () {буцах драйвер // эхлэл хуудсан дээр байгаа эсэхийг шалгаарай.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). дараа нь (функц (гарчиг) {// гарчгийг баталгаажуулах (гарчиг).should.be.equal ("Вэб драйвер IO - Хичээлийн туршилтын хуудас ");}) // URL.getAttribute ('a =' + d.name," href ") -ийг олоорой. Дараа нь (функц (холбоос) {(холбоос).should.equal (d.link); console.log ('URL олдсон:' + d.link);}) // URL хуудас руу очоод байгаа эсэхийг шалгаарай. дарна уу ('a =' + d.name).waitForVisible ("#js-repo-pjax- контейнер ", 10000). дараа нь (function () {console.log ('Github Page Found');});});});

• Маягтын талбаруудыг бөглөхийн тулд статик өгөгдлийг давтаж байна - "loopDataExample2.js"

  • Энэ жишээнд: Нэр, овог нэрээ хадгалахын тулд JSON өгөгдлийн массивыг ашиглана уу

    • Маягтын талбаруудыг бөглөхийн тулд өгөгдлүүдийг эргүүлээд дараа нь маягтыг илгээнэ үү
    • Үр дүнгийн хуудсыг хүлээнэ үү
    • Үр дүнгийн хуудсан дээрх овог нэрээ баталгаажуулна уу

// өгөгдлийн массив - firstName ба lastNamevar dataArray = [{"" firstName ":" Tony "," lastName ":" Keith "}, {" firstName ":" John "," lastName ":" Doe "}, {" firstName ":" Жейн "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // dataArray dataArray.forEach (функц (d) {it ('талбаруудыг бөглөх ёстой', функц () {буцах драйвер // эхлэл хуудсан дээр байгаа эсэхийг шалгаарай.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). дараа нь (функц (гарчиг) {// гарчгийг баталгаажуулах (гарчиг).should.be.equal ("Вэб драйвер IO - Хичээлийн тестийн хуудас");}).setValue ("#fname", d.firstName).getValue ("#fname"). Дараа нь (function (e) {(e).should.be.equal (d.firstName); console.log ("Эхлээд Нэр: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Дараа нь (функц (e) {(e).should.be.equal (d.lastName)); console.log ("Овог:" + e);}).submitForm ("#хайлтын хэлбэр"). дараа нь (function () {console.log ('Хайлтын маягтыг илгээх');}).waitForVisible ("#хайлтын үр дүн", 10000). дараа нь (function () {console.log ('Үр дүнгийн хуудас олдсон');}).getText ("// h1"). Дараа нь (функц (холбоос) {console.log ('Текст олсон:' + линк);

• CSS шинж чанарыг баталгаажуулах - "cssValidation1.js"

  • Энэ жишээ нь:

    • Дараах CSS шинж чанаруудыг баталгаажуулна уу.

      • өнгө
      • дүүргэлт (дээд, доод, баруун, зүүн)
      • дэвсгэр өнгө

it ('алдааны текстийн зөв өнгийг агуулсан байх ёстой'), function () {буцах драйвер.getCssProperty ("// ul [@class = 'alert alert-аюул']/li [1]", "өнгө"). дараа нь (функц (үр дүн) {console.log ('Өнгө олдсон:' + result.parsed.hex + "эсвэл" + result.value); (үр дүн.parsed.hex). байх ёстой });});

it ('хүснэгтийн нүдэнд зөв дүүргэлтийг агуулсан байх ёстой'), function () {

буцах драйвер // padding: баруун дээд доод зүүн.getCssProperty ("// хүснэгт [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). дараа нь (функц (үр дүн) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// хүснэгт [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). дараа нь (function (result) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- баруун "). дараа нь (функц (үр дүн) {console.log ('padding-right found:' + үр дүн. утга); (үр дүн "// хүснэгт [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). Дараа нь (функц (үр дүн) {console.log ('padding-left found: ' + үр дүн. үнэ цэнэ); });

it ('хүснэгтийн толгой хэсэгт арын дэвсгэр өнгө зөв байх ёстой'), function () {

буцах драйвер.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). Дараа нь (function (result) {console.log ('background color found:' + result.parsed. hex); });

Алхам 6: Зөвлөмж ба заль мэх

• Дебаг хийх:

  • Илүү их дибаг хийх, бүртгэл үүсгэхийн тулд драйверын түвшинд бүртгэлийг асаана уу.

    • LogLevel -ийг "дэлгэрэнгүй" болгож тохируулна уу
    • LogOutput -ийг директорын нэр болгон тохируулах ('logs')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {хүссэн чадварууд: {browserName: 'firefox'}});

• Дебаг хийхийн тулд console.log (), debug (), getText () ашиглана уу.

  • console.log () - Төлөвийг тодорхойлохын тулд мэдээллийг харуулахын тулд ашиглана уу.
  • debug () - Командын мөрөнд enter дарагдах хүртэл түр зогсоох хөтөч/скриптийг ашиглана уу.

  • getText () - Зөв элементтэй харилцаж байгаагаа баталгаажуулахын тулд ашиглана уу.

    Ялангуяа xpath илэрхийлэлд тустай

// Жагсаалтаас 3 -р зүйл дээр дарна уу

it ('жагсаалтаас 3 -р зүйл дээр дарах ёстой'), function () {// getText () ашиглан xpath нь элементийг буцаах драйверын зөв эсэхийг баталгаажуулна.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Дараа нь (функц (холбоос) {// console.log () -ийг ашиглан console.log ('Link олдсон:' + линк); (холбоос).should.equal ("Item 3");}) // хөтөч дээр юу болж байгааг харахын тулд үйлдлийг зогсоохын тулд debug () -г ашиглана уу.debug (). Дарна уу ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // google хайлтын маягт гарч ирэхийг хүлээнэ үү.waitForVisible ("#tsf", 20000). дараа нь (e) {console.log ('Хайлтын үр дүн олдсон');});});

• Хөтөчийг динамикаар өөрчлөхийн тулд орчны хувьсагчийг ашиглана уу.

  • Туршилтын скриптийг өөрчлөхгүйгээр өөр хөтөч дуудахын тулд SELENIUM_BROWSER орчны хувьсагчийг ашиглана уу.
  • Дэмжихийн тулд кодлоход бага зэрэг өөрчлөлт оруулах шаардлагатай.

Кодын өөрчлөлт:

// хөтөчийг драйвер дээр ачаална уу

драйвер = webdriverio.remote ({хүссэнCacibility: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Дэмжигдсэн хөтчүүд:

• Internet Explorer - IE 8+ (зөвхөн Windows)

  SELENIUM_BROWSER = өөрөөр хэлбэл моча

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = хром моча

• Opera 12+

  SELENIUM_BROWSER = дуурийн моча

• Сафари

  SELENIUM_BROWSER = сафари моча

Туршилт:

• Windows -ийн хувьд git bash бүрхүүлийг ашиглана уу:

  • SELENIUM_BROWSER = хром моча
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Mac эсвэл Linux -ийн хувьд терминалыг нээнэ үү.

  • SELENIUM_BROWSER = хром моча
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Хариуцлагатай тест:

  • Төсөл эсвэл хүрээ (өөрөөр хэлбэл bootstrap) дээр үндэслэн завсарлах цэгүүдийг тодорхойлох.

  • Таслах цэг бүрийн хувьд хүрээлэн буй орчны хувьсагчдыг тодорхойлно уу.

    • ДЭЛГЭН ЗАМ - 1200 пиксел
    • Хүснэгт - 992 пиксел
    • Мобайл - 768 пиксел

  • Орчуулгын орчны хувьсагчийг уншиж, хөтчийн хэмжээг тохируулахын тулд дахин ашиглах боломжтой командыг хөгжүүлээрэй.

    Доорх жишээг үзнэ үү

  • Туршилтын скрипт дээрээ дахин ашиглах боломжтой командыг дуудаарай.

// дахин ашиглах код - номын сан // кодын хэсэг бол (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } if if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } if if (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Туршилтын скрипт

өмнө (function (done) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // цонхны хэмжээг тохируулах ('цонхны хэмжээг тохируулах ёстой', функц (хийгдсэн) {// зөвхөн өргөн нь л чухал юм driver.setWindowSize (winsize.width, winsize.height, function () {}). дуудлага (хийсэн);});

• Дахин ашиглах боломжтой командууд (Custom Commands):

  • Вэб драйверын IO -ийг хялбархан өргөтгөх боломжтой.
  • Би дахин ашиглах боломжтой бүх тушаалыг номын санд оруулах дуртай. (магадгүй энэ бол хуучин сургууль боловч энэ нь ажилладаг!)

нийтлэг/commonLib.js

// verifyLastNameCheckError ()

// // Тодорхойлолт: // Овог хэлбэрийн баталгаажуулалтын алдааны мэдэгдлийг баталгаажуулдаг // // Оролт: // тоо - алдааны индекс (1-5) // Гаралт: // аль нь ч үгүй // var verifyLastNameCheckError = function () { var idx = аргумент [0], буцааж залгах = аргумент [argument.length - 1]; энэ.getText ("// ul [@class = 'alert alert-аюул']/li [" + idx + "]", функц (алдаа, e) {console.log ('Алдаа олдсон:' + e); (e).should.be.equal ('Овогоо оруулна уу');}). дуудлага хийх (буцааж залгах); }; // module.exports.verifyLastNameCheckError = verifyLastNameCheckError функцийг экспортлох;

Дахин ашиглах боломжтой функцийг дуудахад шаардлагатай тодорхой өөрчлөлтүүд энд байна

Ажлын бүрэн жишээг formFieldValidation.js дээрээс үзнэ үү

// дахин ашиглах боломжтой командыг шаарддаг - CommonLib

нийтлэг = шаардах ('./ Common/CommonLib'); … // тушаалуудыг холбоно Driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (драйвер)); driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (жолооч)); it ('2 алдаа агуулсан байх ёстой: нэр/овог'), function () {// дахин ашиглах боломжтой функцийн драйверыг дуудах.verifyFirstNameError (1);.verifyLastNameError (2);});

• Төслийн файл/лавлах бүтэц:

  • Төслийн ердийн бүтэц энд байна:

    • "Төсөл" - төслийн үндсэн лавлах

      • README.md - дэлхийн төслийн readme

      • "Нийтлэг" - бүх төсөлд түгээмэл хэрэглэгддэг дэлхийн чиг үүргийн лавлах

        • common -lib.js - дэлхийн функцын номын сан
        • README.md - дэлхийн функцуудыг унших

      • "Бүтээгдэхүүн1" - 1 -р бүтээгдэхүүний лавлах

        • тест-скрипт1.js
        • тест-скрипт2.js

        • "Нийтлэг" - 1 -р төслийн орон нутгийн функцуудын лавлах

          • prod1 -lib.js - 1 -р төслийн орон нутгийн функцын номын сан
          • README.md - 1 -р төслийн орон нутгийн функцүүдийг унших

      • "Бүтээгдэхүүн2"-2test-script1.jstest-script2.js бүтээгдэхүүний лавлах

        • "Нийтлэг" - 2 -р төслийн орон нутгийн функцуудын лавлах

          • prod2 -lib.js - 2 -р төслийн орон нутгийн функцын номын сан
          • README.md - 2 -р төслийн орон нутгийн функцүүдийг унших

• Туршилтын скриптүүдийг олон файл болгон хуваах:

  • Энд олон файл ашиглах жишээ байна:

    • Sanity Check - бүх зүйл ажиллаж байгааг шалгах үндсэн тест скрипт
    • Статик элемент ба текстийн баталгаажуулалт - бүх элемент, текстийг шалгах
    • Маягт/Хуудасны алдааны баталгаажуулалт - алдааны баталгаажуулалт
    • Хайлтын үр дүн - динамик контентыг турших

• Дуудлага хийх VS. Амлалтууд:

  • Вэб драйвер IO -ийн 3 -р хувилбар нь дуудлага болон амлалтыг хоёуланг нь дэмждэг.

    Алдаа зохицуулах кодыг бууруулдаг тул амлалт нь хамгийн тохиромжтой арга юм. Дуудлага, амлалт ашиглан бичсэн ижил жишээг доороос үзнэ үү.

Дуудлага хийх

// Callback ашиглан нэр/овог нэрээ тохируулах/баталгаажуулах

it ('Callbacks ашиглан нэр/овогоо тохируулах/баталгаажуулах ёстой'), функц (хийгдсэн) {driver.setValue ("#fname", "Tony", функц (e) {driver.getValue ("#fname", функц (алдаа), e) {(e).should.be.equal ("Тони"); console.log ("Нэр:" + e); driver.setValue ("#lname", "Keith", функц (e) { driver.getValue ("#lname", функц (алдаа, e) {(e).should.be.equal ("Keith"); console.log ("Овог:" + e); хийсэн ();});});});});});

Амлалтууд

// Амлалт ашиглан овог нэрээ тохируулах/баталгаажуулах

it ('Амлалт ашиглан нэр/овогоо тохируулах/баталгаажуулах ёстой'), function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). then (function (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). дараа нь (функц (e) {(e).should.be.equal ("Keith"); console.log ("Овог:" + e);});});

Алхам 7: Илүү их нөөц

Таны лавлагааны зарим нэмэлт эх сурвалжууд энд байна:

• Хэлэлцүүлгийн бүлгүүд (Gitter)

  • Вэб драйвер IO хэлэлцүүлгийн бүлэг
  • Mocha хэлэлцүүлгийн бүлэг

• Бусад сонирхолтой төслүүд

  • Хамгийн шилдэг - HTTP баталгаажуулалт
  • Чай - мэдэгдэл

Алхам 8: Дүгнэлт

Би төсөлд ашиглах технологийг судлахад хэсэг хугацаа зарцуулсан. Би анх Selenium Web Driver -ийг ашиглаж эхэлсэн боловч Web Driver IO ашиглахаар шилжсэн. Вэб драйвер IO -ийг ашиглахад хялбар, өргөтгөхөд илүү хялбар мэт санагдсан (наад зах нь өргөтгөх баримт бичиг - дахин ашиглах командууд илүү дээр байсан).

Анх технологийг хайж эхлэхэд миний хийхийг оролдож буй аливаа зүйлтэй холбоотой сайн жишээг олоход хэцүү байсан. Энэ л мэдээлэл, мэдлэгээ та бүхэнтэй хуваалцахыг хүссэн шалтгаан минь энэ юм.

Технологи нь миний бодож байснаас хамаагүй илүү сайн ажилласан боловч сургалтын муруй байсан. Бүх бүрэлдэхүүн хэсгүүд хэрхэн хамтарч ажилладаг болохыг ойлгосны дараа би маш богино хугацаанд нарийн төвөгтэй тестийн скриптүүдийг бичиж чадсан. Хамгийн хэцүү скрипт бол JavaScript дээр суурилсан огноо сонгогч, модаль сонгогч гэх мэт бүрэлдэхүүн хэсгүүд байв.

Би өөрийгөө JavaScript хөгжүүлэгч гэж хэзээ ч нэрлэж байгаагүй, JavaScript -ийн мэргэжилтэн болохыг хүсээгүй ч эдгээр технологийг ашиглах нь намайг JS ур чадвараа дээшлүүлэхэд түлхэц өгсөн нь гарцаагүй.

Энэ нийтлэл нь ашигтай бөгөөд жишээ нь ойлгомжтой, мэдээлэл сайтай байна гэж найдаж байна.

Хэрэв танд асуулт эсвэл санал байвал надад мэдэгдээрэй.

Баярлалаа, Тони Кейт