Веб -айдоочу IO үйрөткүчү жандуу веб -сайтты колдонуу жана иштөө мисалдары: 8 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:42

Web Driver IO үйрөткүчү жандуу веб -сайтты жана жумушчу мисалдарды колдонуу

Акыркы өзгөртүү: 26.07.2015

(Мен бул көрсөтмөлөрдү кененирээк жана мисалдар менен жаңыртканымда тез -тез текшерип туруңуз)

Фон

Жакында мага кызыктуу чакырык келди. Мен өтө аз техникалык тажрыйбасы бар жана программалоо билими жок Q/A бөлүмүнө автоматташтырылган тестирлөөнү киргизишим керек болчу.

Бул чынында эле эки (2) өзүнчө кыйынчылык болчу. Биринчиси, автоматташтырылган тестирлөөнү жүргүзүү үчүн технологияларды аныктоо. Экинчиси С/А бөлүмүн окутуу болчу.

Макалада колдонулган технологиялар жана процессте үйрөнгөн нерселерим гана каралат.

Технологиялар жакшы иштеди, бирок мен чындап эле маалымат издөөгө туура келди жана маселелерди чечүү үчүн көп саат жумшадым.

Бул технологиялар жөнүндө интернеттен маалымат табуу кыйын болду, баары чогуу иштешти.

Мен бул маалыматты бөлүшкүм келди, ошондуктан мен бул макаланы иштеп жаткан тесттин сценарийлери жана скрипттерди иштетүү үчүн тесттик веб -сайт менен бирге жаздым.

Бардык тест сценарийлерин githubдан тапса болот жана жумушчу тест сайты Web Driver IO Tutorial Test Site сайтында жайгашкан

Мен муну пайдалуу деп ишенем. Эгер ошондой болсо, мага билдирип коюңуз.

Технологияларды колдонуу:

• Веб -сайттын иштешин текшерүү
• JavaScript функциясын текшерүү
• Кол менен иштетсе болот
• Автоматтык түрдө иштетсе болот

• Программисттер үчүн тилди үйрөнүү оңой

  Q/HTML жана JavaScript боюнча негизги билимдери бар персонал

• Ачык программалык камсыздоону гана колдонуңуз

Технологиялар

Мен тандаган технологиялардын тизмеси:

• mocha - сыноо чуркоочу - тест сценарийлерин аткарат
• mustjs - ырастоочу китепкана
• webdriverio - браузерди башкаруу шилтемелери (тил байлоолору)
• селен - браузердин абстракциясы жана иштеп жаткан фабрика

• Браузер/Мобилдик драйверлер + браузерлер

  • Firefox (Браузер үчүн гана)
  • Chrome (браузер жана драйвер)
  • IE (браузер жана драйвер)
  • Safari (браузер жана драйвер плагини)

1 -кадам: Программаны орнотуу

Баштоо үчүн сиз Node JS, Web Driver IO, Mocha, Should жана Selenium стенддерин орнотушуңуз керек.

Бул жерде Windows 7 үчүн орнотуу көрсөтмөлөрү.

(Мен Mac/Linuxтун колдонуучусумун, бирок мен баарын Windows 7 машиналарына орнотушум керек болчу, ошондуктан мен аны сиздин маалыматыңыз үчүн киргиздим. Mac/Linuxко орнотуу процедурасы окшош. Көбүрөөк маалымат алуу үчүн онлайн шилтемелери менен кеңешиңиз. маалымат.)

Браузерден:

• NPM камтыган Node орнотуу (Node Package Manager)

• https://nodejs.org/ дарегине өтүңүз

  • Орнотууну чыкылдатыңыз
  • Файлды сактоо жана иштетүү
  • Жол менен өзгөрмөнү коюу (NODE_PATH)

  • Башкаруу панелине өтүңүз-> Система жана Коопсуздук-> Система

    • Advanced System Settings

    • Айлана -чөйрөнү жөндөө (Колдонуучунун өзгөрмөлөрү)

      • 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

    Бул сиздин компьютериңизге глобалдуу түрдө "керек" орнотот

• Selenium Stand Alone Server орнотуу

  • Http://www.seleniumhq.org/download/ дарегине өтүңүз
  • Jar файлын жүктөп алып, "селени" каталогуна өтүңүз.

• Сыноо үчүн браузерлерди жана браузерлердин драйверлерин орнотуңуз

  • Cmd чакыруусунан:

    • "Селен" каталогун түзүү
    • C: / Users {USERNAME} selenium

    • Буйруктар:

      • cd C: / Колдонуучулар {USERNAME}
      • мкдир селен

    • Firefox

      • Эгерде орнотула элек болсо, Firefox браузерин орнотуңуз.
      • Жол Firefoxту буйрук сабынан (cmd) баштоо үчүн орнотулушу керек.

      • Control Panel-> System and Security-> System

        • Advanced System Settings
        • Айлана -чөйрөнүн жөндөөлөрү
        • Жол өзгөрмөсүнө кошуу (кош чекитти кошуу)
        • C: / Program Files (x86) Mozilla Firefox
      • Firefox үчүн атайын веб -драйвердин кереги жок.

    • Chrome

      • Chrome браузерин орнотуңуз, эгер буга чейин орнотула элек болсо.
      • Жол Chrome'ду буйрук сабынан (cmd) баштоого коюлушу мүмкүн.
      • Биринчи тест: chrome.exe буйрук сабынан (cmd)
      • Эгерде хром башталбаса:

      • Control Panel-> System and Security-> System

        • Advanced System Settings
        • Айлана -чөйрөнүн жөндөөлөрү
        • Path Variable'ге кошуу (кош чекитти кошуу)
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome үчүн атайын веб -драйвер керек.

        Chromium.org сайтына кирип, 32 биттик драйверди "selenium" каталогуна чыгарыңыз

    • Internet Explorer (Windows үчүн гана - башка платформаларда иштебейт)

      • IE үчүн атайын веб -драйвер керек.

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

2 -кадам: Негизги тест скрипти

Келгиле, кээ бир негиздерден баштайлы.

Бул жерде веб -сайтты ачып, аталышын текшере турган жөнөкөй mocha скрипти.

// Tutorial1.js

// // Бул веб -сайтты ачуу жана // аталышын текшерүү үчүн жөнөкөй тест сценарийи. // керектүү китепканалар var webdriverio = талап кылуу ('webdriverio'), керек = талап кылуу ('керек'); // тест скриптинин блогу же пакети сүрөттөйт ('Title Test for Web Driver IO - Tutorial Test Page Website', function () {// timeout to 10 seconds this.timeout (10000); var driver = {}; // тесттерден мурун иштетүү үчүн илгич (функция (аткарылган) {// браузер үчүн драйверди жүктөө = webdriverio.remote ({хүссэнCapabilities: {browserName: 'firefox'}}); driver.init (аткарылган);}); // тест спецификасы - "спецификация" ал ('туура баракты жана аталышты жүктөө керек', function () {// баракты жүктөө, андан кийин функцияны чакыруу () драйверди кайтаруу.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // аталышты алыңыз, андан кийин аталышты функцияга өткөрүңүз ().getTitle (). андан кийин (функция (аталыш) {// аталышты текшерүү (аталыш).should.be.equal ("Web Driver IO - Окутуучу тест баракчасы) "); // консолго мүчүлүштүктөрдү оңдоо үчүн жооп бербөө // console.log ('Учурдагы баракчанын аталышы:' + аталышы);});}); // бул блоктогу бардык сыноолордон кийин (функция (аткарылган)) {driver.end (аткарылган);});});

Байкоолор:

• Сиз адегенде тест сценарийи JAVASCRIPT (.js кеңейтүүсү менен бүтөт) тилинде жазылганын байкашыңыз керек.

• Негизги структура бардык тест сценарийлери үчүн дээрлик бирдей.

  • Башкы Комментарийлер (//)
  • Милдеттүү китепканалар
  • Параметрлерди коюу (милдеттүү эмес)
  • Hook: Браузердин драйверин жүктөө
  • Test Suite (сүрөттөө)
  • Test Specs (Сюитада көптөгөн мүнөздөмөлөр болушу мүмкүн)
  • Крюк: Тазалаңыз

• Тест топтому эки параметрди камтыган сүрөттөө функциясы менен башталат:

  • Стринг - Тест топтомунун сүрөттөлүшү

    • "Туура вербия үчүн баракты текшериңиз"
    • "Радио баскычтарынын ишин текшерүү"

  • Функция - аткаруу үчүн код блогу

    сүрөттөө ('Тест топтомунун сүрөттөмөсү', function () {});

• Сыноо пакети 1 же андан көп тест спецификасын камтыйт (спецификация)

• Мүнөздөмөлөр эки функциядан турган функциядан башталат:

  • String - Тест спецификациясынын сүрөттөлүшү

    • "Шилтеме текст жана шилтеме URL туура болушу керек"
    • "Туура сөздү камтышы керек (көчүрүү палубасы)
  • Функция - аткаруу үчүн код блогу
  • it ('Тест спецификациясынын сүрөттөмөсү', function () {});
• Specте коддун абалын текшерүүчү бир же бир нече күтүүлөр камтылган

• Бул ырастоолор деп аталат

  "Керек" китепканасы ырастоолорду берет

• Дээрлик бардык учурларда, сиз селектордун жардамы менен бир же бир нече элементтин ордун табышыңыз керек, андан кийин элементтерде кандайдыр бир операцияларды жасашыңыз керек болот.

  • Мисалдар:

    • Барактан текстти таап, текстти текшериңиз
    • Форма толтуруп, тапшырыңыз
    • Элементтин CSSти текшериңиз

Келгиле, комментарийлер менен мисалды жакшылап карап көрөлү

Керектүү китепканаларды жүктөңүз: веб драйвер IO жана керек.

// керектүү китепканалар

var webdriverio = талап кылуу ('webdriverio'), керек = талап кылуу ('керек');

Тест топтомун аныктаңыз. Бул топтом мындай деп аталат: "Web Driver IO үчүн титулдук тест - Окутуу тест баракчасынын веб -сайты"

// тесттик скрипт блогу же пакети

сүрөттөө ('Web Driver IO үчүн Title Test - Tutorial Test Page Website', function () {…});

Баракты жүктөөдө сценарийдин күтүү убактысы болбошу үчүн, күтүү убакытын 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 ("Web Driver IO - Окутуучу тест баракчасы");

Аяктаганда айдоочуну таштап, тазалоо үчүн илгич.

// бул блоктогу бардык сыноолордон кийин иштетүү үчүн "илгич"

кийин (function (done) {driver.end (done);});

3 -кадам: Test Scriptти иштетүү

Эми сыноо скрипти иштетилгенде эмне кыларын карап көрөлү.

Биринчи Selenium Stand Alone Serverди баштаңыз:

• Windows үчүн буйрук сабын колдонуңуз (cmd):

  • java -jar
  • # java -jar селен-сервер-автономдуу-2.46.0.jar

• Mac же Linux үчүн терминалды ачыңыз:

  • java -jar
  • $ java -jar селени-сервер-автономдуу-2.46.0.jar
• Жогорудагы скриншотту караңыз

Кийинки сыноо скриптин иштетүү:

• Windows үчүн буйрук сабын колдонуу (cmd):

  • mocha
  • # mocha tutorial1.js

• Mac же Linux үчүн терминалды ачыңыз:

  • mocha
  • $ mocha tutorial.js
• Жогорудагы скриншотту караңыз

Анда эмне болду?

Моча "tutorial1.js" скриптин чакырат. Айдоочу браузерди (Firefox) баштады, баракты жүктөп, аталышын ырастады.

4 -кадам: Мисал Web Site

Бардык мисалдар бул сайтка каршы иштейт.

Мисал веб -сайтта жайгашкан: Web Driver IO Tutorial Test Page

Бардык тест сценарийлерин githubдан көчүрүп алса болот.

5 -кадам: конкреттүү мисалдар

Бардык код githubда жеткиликтүү: githubдагы Web Driver IO Tutorial

• Шилтемени жана Текстти иреттелбеген тизмеде текшериңиз - "linkTextURL1.js"

  • Түзүлбөгөн тизмеде бар жана шилтеме 4 -тизме пункту.
  • URL "https://tlkeith.com/contact.html" болушу керек

// Текшерүү Биз менен байланыш шилтеме тексти

it ('Биз менен байланыш шилтемесинин тексти болушу керек'), function () {return driver.getText ("// ul [@id = 'mylist']/li [4]/a"). анан (функция (шилтеме) {консолу.log ('Шилтеме табылды:' + шилтеме); (шилтеме).should.equal ("Биз менен байланыш");});}); // Биз менен байланыш URL дарегин текшериңиз ('Биз менен байланыш URL'ин камтышы керек', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL found:' + link);});});

• Автордук укук Текстин текшерүү - "Copyright1.js"

  • Бул мисал автордук текстти табуунун 2 башка жолун көрсөтөт:

    • элемент тандагыч катары
    • xpath элементин тандоо катары

// Элемент тандагыч катары id аркылуу автордук укуктун текстин текшериңиз

it ('Автордук укук текстин камтышы керек', function () {return driver.getText ("#copyright"). анан (function (link) {console.log ('Copyright found:' + link); (link).should. барабар ("Tony Keith - tlkeith.com @ 2015 - Бардык укуктар корголгон.");});}); // Автордук укуктун текстин элемент тандоочу катары xpath аркылуу текшериңиз ('Автордук укук текстин камтышы керек', function () {return driver.getText ("// footer/center/p"). Then (function (link) {console.log ('Автордук укук табылды:' + шилтеме]; (шилтеме).should.equal ("Тони Кейт - tlkeith.com @ 2015 - Бардык укуктар корголгон.");});});

• Форма талааларын толтуруу жана тапшыруу - "formFillSubmit1.js"

  • Атын, фамилиясын толтуруп, тапшырыңыз, андан кийин жыйынтыкты күтүңүз.

  • Бул мисал фамилияны киргизүү талаасын толтуруунун 3 ыкмасын көрсөтөт:

    • id боюнча
    • киргизүүдөн xpath аркылуу
    • xpath менен форма-> киргизүүдөн
  • Ошондой эле киргизүү талаасын тазалоо көрсөтүлөт

// id атын колдонуп атын коюңуз: Тони

it ('аталышын Тониге коюу керек'), function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). анан (function (e) {(e).should.be.equal ("Тони"); console.log ("Аты:" + e);});}); // id колдонуп фамилияны тазалаңыз ('аты тазаланышы керек', function () {return driver.clearElement ("#fname").getValue ("#fname"). Анан (функция (e) {(e).should.be.equal (""); console.log ("Аты:" + e);});}); // Атын xpath аркылуу киргизүүдөн баштап коюңуз: Tony it ('атын Тони кылып коюу керек'), function () {return driver.setValue ("// input [@name = 'fname']", "Tony")).getValue ("// киргизүү [@name = '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);});}); // Атын xpath аркылуу формадан төмөнкүгө коюңуз: Тони ал ('атын Тони кылып коюу керек'), function () {return driver.setValue ("// form [@id = 'search-form']/input] 1] "," Тони ").getValue (" // форма [@id = 'издөө-формасы]/киргизүү [1] "). Анан (функция (e) {(e).should.be.equal ("Tony"); console.log ("Аты:" + e);});}); // Id колдонуп фамилияны төмөнкүгө коюңуз: Keith it ('фамилиясын Кейтке коюу керек'), 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 ("#search-results", 10000).then (function (e) {console.log (' Search Results Found ');});});

• Көрсөтүү/Жашыруу баскычын басыңыз жана Текстти Текшерүү - "showHideVerify1.js"

  • Текст көрсөтүү/жашыруу элементинде. Баскыч абалды көзөмөлдөйт.

  • Бул мисал көрсөтөт:

    • Кеңейтүү үчүн баскычты басыңыз
    • Элементтин көрүнүшүн күтө туруңуз (кеңейтилген)
    • Текстти текшерүү (палубаны көчүрүү)

// "Көбүрөөк маалымат" баскычын чыкылдатып, кеңейтилген элементтеги текстти текшериңиз

it ('көбүрөөк маалымат баскычын басып, текстти текшериши керек'), function () {return driver.click ("#moreinfo"). then (function () {console.log ('Click more More button' ';)).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'collExample']/div"). анан (function (e) {console.log ('Text:' + e); (e).should.be.equal ("Бардык жакшы нерселер бул жакка кетет!");});});

• Форма талаасындагы каталарды текшерүү - "formFieldValidation.js"

  • Туура ката билдирүүлөрүн текшерүү үчүн тест скрипттерин колдонуңуз.

  • Бул мисал көрсөтөт:

    Ката текст кабарларын текшериңиз жана жайгашкан жерин ырастаңыз (тизмеленбеген тизме позициясы)

it ('5 катадан турушу керек: биринчи/акыркы/дарек/шаар/мамлекет', function () {

драйверди кайтаруу.getText ("// ul [@class = 'alert alert-risk']/li [1]"). анан (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Атын киргизиңиз');}).getText ("// ul [@class = 'alert alert-risk']/li [2]"). анан (функция (e) {console.log ('Ката табылды:' + e); (e).should.be.equal ('Сураныч фамилияны киргизиңиз');}).getText ("// ul [@class = 'alert alert-risk ']/li [3] ").. анда (function (e) {console.log (' Error found: ' + e); (e).should.be.equal (' Даректи киргизиңиз ');}). getText ("// ul [@class = 'alert alert-risk']/li [4]"). анда (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Сураныч, шаарды киргизиңиз');}).getText ("// ul [@class = 'alert alert-risk']/li [5]"). анан ('Ката табылды:' + e); (e).should.be.equal ('Сураныч, абалды киргизиңиз');}); });

• URL шилтемесин/текстин/баракчасын текшерүү үчүн маалыматтарды айландыруу - "LoopDataExample1.js"

  • Бул мисал көрсөтөт: Шилтемени жана атын сактоо үчүн JSON маалыматтарынын массивин колдонуңуз, анан кайталаңыз

    • Ар бир URL текстин жана шилтемесин текшериңиз
    • Шилтемени басыңыз жана баракты жүктөңүз

// Шилтеме маалыматтары - шилтеме жана текст

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 "}, {" шилтеме ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" шилтеме ":" 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 "}]; … // ар бир linkArray аркылуу цикл.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). анан (функция (аталышы) {// аталышын текшерүү (аталышы).should.be.equal ("Веб драйвер IO - Tutorial Test Page ");}) // 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 = [{"биринчи аты": "Тони", "акыркы аты": "Кейт"}, {"биринчи ысым": "Жон", "фамилия": "Дое"}, {"биринчи ат ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // ар бир dataArray dataArray.forEach (цикл) (функция (d) {it ('талааларды толтуруу керек', функция () {кайтаруучу драйвер // баштапкы бетте экениңизди текшериңиз.url ('http:/ /www.).setValue ("#fname", d.firstName).getValue ("#fname"). анан (милдети (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 ("#search-form"). анан (function () {console.log ('Search Form Submit');}).waitForVisible ("#search-results", 10000). анан (function () {console.log ('Result Page Found');}).getText ("// h1"). анан (функция (шилтеме) {console.log ('Текст табылды:' + шилтеме);

• CSS касиеттерин текшерүү - "cssValidation1.js"

  • Бул мисал көрсөтөт:

    • Төмөнкү CSS касиеттерин ырастаңыз:

      • түс
      • толтуруу (үстү, асты, оң, сол)
      • фон түсү

it ('ката текстинин туура түсүн камтышы керек'), function () {return driver.getCssProperty ("// ul [@class = 'alert alert-risk']/li [1]", "color"). анан (function (result) {console.log ('Color found:' + result.parsed.hex + "же" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('стол уячасына туура толтурууну камтышы керек', function () {

кайра айдоочу // толтуруу: жогорку оң жактын асты сол.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). анан (функция (натыйжа) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@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:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). анда (функция (натыйжа) {console.log ('padding-left found: ' + result.value); (result.value).shave.be.equal (' 5px ');}); });

it ('столдун аталышында туура фон түсү болушу керек', function () {

драйверди кайтаруу.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). анан (функция (натыйжа) {console.log ('фон түсү табылган:' + result.parsed. hex); });

6 -кадам: Кеңештер жана амалдар

• Мүчүлүштүктөрдү оңдоо:

  • Мүчүлүштүктөрдү оңдоо жана журналдарды түзүү үчүн айдоочу деңгээлинде журналды күйгүзүңүз.

    • LogLevel'ди "кеңири" деп коюңуз
    • LogOutputты каталогдун атына коюу ('logs')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {istediğinizCapabilities: {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 () колдонуңуз ('Шилтеме табылды:' + шилтемеси]; (шилтеме).should.equal ("3 -пункт");}) // браузерде эмне болуп жатканын көрүү үчүн аракеттерди токтотуу үчүн debug () колдонуңуз.debug ().click ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link clicked');}) // google издөө формасынын пайда болушун күтөбүз.waitForVisible ("#tsf", 20000). анан (функция (e) {console.log ('Search Results Found');});});

• Браузерди динамикалык түрдө өзгөртүү үчүн айлана чөйрөнүн өзгөрмөсүн колдонуңуз:

  • Сыноо сценарийин өзгөртпөстөн, башка браузерди иштетүү үчүн SELENIUM_BROWSER чөйрөсүнүн өзгөрмөсүн колдонуңуз.
  • Колдоо үчүн бир аз коддоо өзгөрүүсүн талап кылат.

Код өзгөрүүлөр:

// браузер үчүн драйверди жүктөө

драйвер = webdriverio.remote ({каалаганCapabilities: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Колдоого алынган браузерлер:

• Internet Explorer - IE 8+ (Windows үчүн гана)

  SELENIUM_BROWSER = ie моча

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox моча

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = хром моча

• Opera 12+

  SELENIUM_BROWSER = опера моча

• Safari

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

Сыноо:

• Windows үчүн git bash shell колдонуңуз:

  • SELENIUM_BROWSER = хром моча
  • $ SELENIUM_BROWSER = Chrome Mocha DynamicBrowser.js

• Mac же Linux үчүн терминалды ачыңыз:

  • SELENIUM_BROWSER = хром моча
  • $ SELENIUM_BROWSER = Chrome Mocha DynamicBrowser.js

• Жооптуу тестирлөө:

  • Долбоорго же алкакка негизделген чекит чекиттерин аныктаңыз (б.а. жүктөөчү түйүн).

  • Ар бир чекит үчүн чөйрөнүн өзгөрмөлөрүн аныктаңыз:

    • ҮСТӨЛ - 1200 пиксел
    • TABLET - 992 px
    • MOBILE - 768 пиксел

  • Айлана чөйрөнүн өзгөрмөсүн окуу жана браузердин өлчөмүн коюу үчүн кайра колдонула турган буйрукту иштеп чыгуу.

    Төмөндөгү мисалды караңыз

  • Сыноо сценарийинде кайра колдонула турган буйрукка чалыңыз.

// кайра колдонулуучу код - китепкана // коддун үзүндүсү if (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } else if (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } else if (bp == "MOBILE") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Тест сценарийи

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

• Кайра колдонулуучу буйруктар (Өзгөчө буйруктар):

  • Web Driver IO оңой кеңейтилет.
  • Мен кайра колдонулуучу бардык буйруктарды китепканага киргизүүнү жакшы көрөм. (балким бул эски мектеп, бирок ал иштейт!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Description: // фамилияны текшерүү катасы тууралуу кабарды текшерет // // Киргизүү: // саны - катанын индекси (1-5) // Чыгуу: // жок // var verifyLastNameCheckError = function () { var idx = аргументтер [0], кайра чалуу = аргументтер [arguments.length - 1]; бул.getText ("// ul [@class = 'alert alert-risk']/li [" + idx + "]", function (err, e) {console.log ('Error found:' + e); (д).should.be.equal ('Сураныч фамилияңызды киргизиңиз');}).чалуу (кайра чалуу); }; // module.exports.verifyLastNameCheckError = verifyLastNameCheckError функциясын экспортто;

Бул жерде кайра колдонулуучу функцияны чакыруу үчүн зарыл болгон конкреттүү өзгөртүүлөр

Толук иштөө мисалы үчүн formFieldValidation.js караңыз

// кайра колдонула турган буйрукту талап кылат - CommonLib

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

• Долбоор Файл/Каталог Түзүмү:

  • Бул жерде типтүү долбоор структурасы:

    • "Долбоор" - башкы проект каталогу

      • README.md - глобалдык долбоор үчүн readme

      • "Жалпы" - бардык долбоорлор үчүн жалпы глобалдык функциялар үчүн каталог

        • common -lib.js - глобалдык функциялар китепканасы
        • README.md - глобалдык функциялар үчүн readme

      • "Продукт1" - продукт 1 үчүн каталог

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

        • "Жалпы" - 1 -долбоордун жергиликтүү функциялары үчүн каталог

          • prod1 -lib.js - 1 -долбоор үчүн жергиликтүү функциялардын китепканасы
          • README.md - 1 -долбоордун жергиликтүү функциялары үчүн readme

      • "Product2"-2test-script1.jstest-script2.js продуктунун каталогу

        • "Жалпы" - 2 -долбоордун жергиликтүү функциялары үчүн каталог

          • prod2 -lib.js - 2 -долбоор үчүн жергиликтүү функциялардын китепканасы
          • README.md - 2 -долбоордун жергиликтүү функциялары үчүн readme

• Тест скрипттерин бир нече файлга бөлүңүз:

  • Бул жерде бир нече файлды колдонуунун үлгүсү келтирилген:

    • Sanity Check - баары иштеп жатканын текшерүү үчүн негизги тест скрипти
    • Статикалык элемент жана текстти текшерүү - бардык элементтерди жана текстти текшерүү
    • Форма/Барак катасын текшерүү - катаны текшерүү
    • Издөө жыйынтыктары - динамикалык мазмунду текшерүү

• Callbacks VS. Убадалар:

  • Web Driver IOнун 3 -версиясы кайра чалууларды жана убадаларды колдойт.

    Убадалар артыкчылыктуу ыкма, анткени ал катаны иштетүү кодун азайтат. Сураныч, төмөндөгү чалууларды жана убадаларды колдонуу менен жазылган мисалды караңыз.

Callbacks

// Callback аркылуу атын/фамилиясын коюу/текшерүү

it ('Callbacks аркылуу атын/фамилиясын белгилөө/ырастоо керек'), функция (аткарылган) {driver.setValue ("#fname", "Tony", function (e) {driver.getValue ("#fname", function (err), e) {(e).should.be.equal ("Тони"); console.log ("Аты:" + e); driver.setValue ("#lname", "Keith", function (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 ("Тони"); console.log ("Аты:" + e);}).setValue ("#lname", "Keith").getValue ("#lname"). анда (функция (e) {(e).should.be.equal ("Keith"); console.log ("Фамилия:" + e);});});

7 -кадам: Көбүрөөк ресурстар

Бул жерде сиздин маалымдама үчүн кээ бир кошумча булактар:

• Талкуу топтору (Gitter)

  • Web Driver IO Discussion Group
  • Mocha талкуулоо тобу

• Башка кызыктуу долбоорлор

  • Supertest - HTTP ырастоолор
  • Чай - ырастоолор

8 -кадам: Жыйынтык

Мен проектимде колдонула турган технологияларды изилдөөгө бир аз убакыт бөлдүм. Мен башында Selenium Web Driver менен иштей баштадым, бирок Web Driver IO колдонууга өттүм. Web Driver IO колдонуу оңой жана узартуу бир топ жеңилирээк көрүндү (жок дегенде узартуу үчүн документтер - кайра колдонулуучу буйруктар жакшы болчу).

Мен биринчи жолу технологияларды карай баштаганда, мен жасоого аракет кылып жаткан нерсеге салыштырмалуу жакшы мисалдарды табуу кыйын болду. Мына ушул себептен улам мен бул маалыматты жана билимимди сиздер менен бөлүшкүм келди.

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

Мен эч качан өзүмдү JavaScriptти иштеп чыгуучу катары белгилеген эмесмин жана JavaScriptтин эксперти болгум келген жок, бирок бул технологияларды колдонуу мени JS жөндөмүмдү курчутууга түрткү берди.

Бул макала пайдалуу жана мисалдар ачык жана маалыматтуу деп үмүттөнөм.

Суроолоруңуз же комментарийиңиз болсо, мага билдириңиз.

Рахмат, Тони Кейт