Тікелей веб -сайтты және жұмыс мысалдарын қолданатын веб -драйвер IO оқулығы: 8 қадам

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:26

Тікелей веб -сайтты және жұмыс мысалдарын қолданатын веб -драйвер IO оқулығы

Соңғы жаңарту: 26.07.2015 ж

(Бұл нұсқаулықтарды толығырақ және мысалдармен жаңартқан кезде жиі тексеріңіз)

Фон

Жақында маған қызықты тапсырма ұсынылды. Маған техникалық тәжірибесі өте төмен және бағдарламалық білімі жоқ Q/A бөліміне автоматтандырылған тестілеуді енгізу қажет болды.

Бұл шын мәнінде екі (2) бөлек сынақ болды. Біріншісі - автоматтандырылған тестілеуді жүргізу технологияларын анықтау. Екіншісі - сұрақ -жауап бөлімін оқыту.

Мақалада тек қолданылған технологиялар мен процесте мен білгендер қарастырылады.

Технологиялар жақсы жұмыс істеді, бірақ мен ақпаратты іздеуге тура келді және мәселелерді шешуге көп сағат жұмсадым.

Маған Интернетте осы технологиялар туралы ақпарат табуға қиналдым, барлығы бірге жұмыс істейді.

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

Барлық тест сценарийлерін github -тан табуға болады, ал жұмыс сынағы сайты Web Driver IO оқулық сынақ сайтында орналасқан.

Сізге бұл пайдалы деп ойлаймын. Егер жасасаңыз, маған хабарлаңыз.

Мақсаттар Технологияларды қолдану:

• Веб -сайттың жұмысын тексеріңіз
• JavaScript функциясын тексеріңіз
• Қолмен іске қосуға болады
• Автоматты түрде іске қосуға болады

• Бағдарламашылар үшін тілді үйрену оңай

  Q/A 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 Package Manager) бар түйінді орнату

• https://nodejs.org/ сайтына өтіңіз

  • Орнату түймесін басыңыз
  • Файлды сақтаңыз және іске қосыңыз
  • Жол мен айнымалы мәнді орнатыңыз (NODE_PATH)

  • Басқару тақтасы-Жүйе және қауіпсіздік-Жүйеге өтіңіз

    • Қосымша жүйелік параметрлер

    • Орта параметрі (пайдаланушы айнымалылары)

      • PATH жолына қосыңыз

        C: / Users {USERNAME} AppData / роуминг / npm;

      • NODE_PATH қосыңыз (жүйелік айнымалылар)

        C: / Users {USERNAME} AppData / роуминг / npm / node_modules

Ескерту: Мен төмендегі барлық бағдарламалық қамтамасыз етуді npm жаһандық опциясын (-g) пайдаланып орнаттым. Бұл әдетте ұсынылмайды, бірақ бұл орнату үшін мен бүкіл әлем бойынша орнатуым керек болды, себебі ол бірнеше жобаларда қолданылады.

Пәрмен жолын ашу (cmd):

(жергілікті қолданушы әкімшісі)

• Селен «веб -драйвері IO» орнатыңыз

  • npm webdriverio -g орнатыңыз

    Бұл бүкіл әлем бойынша веб -драйвер IO -ны сіздің компьютеріңізге орнатады

• «Mocha» сынақ жүргізуші бағдарламалық жасақтамасын орнатыңыз

  • npm mocha -g орнатыңыз

    Бұл бүкіл әлем бойынша сіздің компьютеріңізге mocha орнатады

• «Керек» бекіту кітапханасын орнатыңыз

  • npm орнату -g керек

    Бұл бүкіл әлемде сіздің компьютеріңізге «керек» орнатады

• Selenium Stand Alone серверін орнатыңыз

  • Http://www.seleniumhq.org/download/ сайтына өтіңіз
  • Jar файлын жүктеп алып, «селен» каталогына өтіңіз.

• Тексеру үшін браузерлер мен шолғыш драйверлерін орнатыңыз

  • Cmd шақыруынан:

    • «Селен» каталогын жасаңыз
    • C: / Users {USERNAME} селен

    • Командалар:

      • cd C: / Пайдаланушылар {USERNAME}
      • мкдир селен

    • Firefox

      • Firefox браузерін орнатыңыз, егер ол әлі орнатылмаған болса.
      • Пәрмен жолынан (cmd) Firefox -ты іске қосу үшін жолды орнату керек.

      • Басқару тақтасы-Жүйе және қауіпсіздік-Жүйе

        • Қосымша жүйелік параметрлер
        • Қоршаған орта параметрлері
        • Жол айнымалысына қосу (қос нүктелі нүктені қосыңыз)
        • C: / Program Files (x86) Mozilla Firefox
      • Firefox үшін арнайы веб -драйвер қажет емес.

    • Chrome

      • Chrome браузерін орнатыңыз, егер ол әлі орнатылмаған болса.
      • Жолды Chrome -ды пәрмен жолынан (cmd) іске қосуға орнатуға болады.
      • Алдымен тест: chrome.exe пәрмен жолынан (cmd)
      • Егер хром басталмаса:

      • Басқару тақтасы-Жүйе және қауіпсіздік-Жүйе

        • Қосымша жүйелік параметрлер
        • Қоршаған орта параметрлері
        • Жол айнымалысына қосу (қос нүктелі нүктені қосыңыз)
        • 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 () {// күту уақытын 10 секундқа орнатыңыз 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 кеңейтімімен аяқталады).

• Негізгі құрылым барлық сынақ сценарийлері үшін дерлік бірдей.

  • Тақырып түсініктемелері (//)
  • Қажетті кітапханалар
  • Опцияларды орнату (міндетті емес)
  • Ілмек: Браузер драйверін жүктеңіз
  • Test Suite (сипаттау)
  • Сынақ сипаттамалары (пакетте көптеген ерекшеліктер болуы мүмкін)
  • Ілмек: тазалаңыз

• Тест жиынтығы екі параметрді қамтитын сипаттау функциясымен басталады:

  • Жол - тест -люкс сипаттамасы

    • «Бетті дұрыс сөйлеу үшін тексеріңіз»
    • «Радио түймелерінің жұмысын тексеріңіз»

  • функция - орындалатын код блогы

    сипаттау (‘Сынақ жинағының сипаттамасы ', function () {});

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

• Ерекшеліктер екі параметрді алатын функциядан басталады:

  • Жол - тест спецификациясының сипаттамасы

    • «Сілтеме мәтіні мен сілтеме URL дұрыс болуы керек»
    • «Дұрыс сөздік сөз болуы керек (көшірме палубасы)
  • функция - орындалатын код блогы
  • it ('Тест спецификациясының сипаттамасы', function () {});
• Ерекшелікте кодтың күйін тексеретін бір немесе бірнеше күту бар

• Бұлар бекіту деп аталады

  «Керек» кітапханасы бекітулерді ұсынады

• Іс жүзінде барлық жағдайда сізге селектордың көмегімен бір немесе бірнеше элементті табу қажет болады, содан кейін элементтерде кейбір әрекеттерді орындау қажет болады.

  • Мысалдар:

    • Мәтінді беттен тауып, мәтінді тексеріңіз
    • Пішінді толтырыңыз және жіберіңіз
    • Элементтің CSS -ті растаңыз

Түсініктемелері бар мысалды мұқият қарастырайық

Қажетті кітапханаларды жүктеңіз: веб -драйвер IO және керек.

// қажетті кітапханалар

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

Тест жиынтығын анықтаңыз. Бұл пакет: «Веб -драйвердің IO -на арналған титулдық тест - оқулық тестілік беттің веб -сайты» деп аталады.

// тест сценарийі блогы немесе пакеті

сипаттау ('Веб -драйвер IO үшін титулдық тест - оқулық тестінің беті веб -сайты', function () {…});

Сценарий бетті жүктеу кезінде күтуге жол бермеу үшін күту уақытын 10 секундқа орнатыңыз.

// күту уақытын 10 секундқа орнатыңыз

this.timeout (10000);

«Техникалық сипаттамалар» сипаттамасын іске қоспас бұрын шолғыш драйверін жүктеу үшін ілмек. Бұл мысалда Firefox драйвері жүктелген.

// тесттер алдында іске қосылатын ілмек

бұрын (функция (жасалды) {// браузер драйверін жүктеу = webdriverio.remote ({хүссэнCapabilities: {browserName: 'firefox'}}); driver.init (жасалды);});

Сынақ сипаттамасын анықтаңыз.

// тест спецификасы - «спецификация»

it ('дұрыс бет пен тақырып жүктелуі керек', function () {…});

Веб -сайт бетін жүктеңіз

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

Тақырыпты алыңыз, содан кейін тақырыпты функцияға жіберіңіз ()

.getTitle (). содан кейін (функция (тақырып) {

… });

Must assertion кітапханасының көмегімен тақырыпты тексеріңіз.

(тақырып).should.be.equal («Web Driver IO - Оқулық тестілік беті»);

Аяқтағаннан кейін драйверді тоқтату және тазалау үшін ілмек.

// осы блоктағы барлық сынақтардан кейін іске қосылатын «ілмек»

кейін (функция (жасалды) {driver.end (жасалды);});

3 -қадам: тест сценарийін іске қосыңыз

Енді тест сценарийі іске қосылғанда не істейтінін көрейік.

Алдымен Selenium Stand Alone серверін іске қосыңыз:

• Windows үшін пәрмен жолын пайдаланыңыз (cmd):

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

• Mac немесе Linux үшін терминалды ашыңыз:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Жоғарыдағы скриншотты қараңыз

Содан кейін тест сценарийін іске қосыңыз:

• Windows үшін пәрмен жолын пайдаланыңыз (cmd):

  • моча
  • # mocha оқулығы1.js

• Mac немесе Linux үшін терминалды ашыңыз:

  • моча
  • $ mocha tutorial.js
• Жоғарыдағы скриншотты қараңыз

Сонымен не болды?

Моча «tutorial1.js» сценарийін шақырады. Драйвер браузерді (Firefox) іске қосты, бетті жүктеді және тақырыпты растады.

4 -қадам: Мысал веб -сайт

Барлық мысалдар осы сайтқа қарсы орындалады.

Мысал веб -сайт мына жерде орналасқан: Web Driver IO оқулық тестілік беті

Барлық тест сценарийлерін github сайтынан жүктеуге болады.

5 -қадам: нақты мысалдар

Барлық код github -да қол жетімді: github -дағы Web Driver IO оқулығы

• Сілтеме мен сілтеме мәтінін реттелмеген тізімде тексеріңіз - «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 мекенжайы ('Бізбен байланыс URL мекенжайы болуы керек'), function () {return driver.getAttribute («// ul [@id = 'mylist']/li [4]/a», «href»).сосын (функция (сілтеме) {(сілтеме).should.equal («https://tlkeith.com/contact.html»); console.log ('URL мекенжайы табылды:' + сілтеме);});});

• Авторлық құқық мәтінін тексеру - «Copyright1.js»

  • Бұл мысалда авторлық құқық мәтінін табудың 2 түрлі әдісі көрсетілген:

    • элемент селекторы ретінде
    • xpath элементін таңдау құралы ретінде

// Элемент селекторы ретінде id көмегімен авторлық құқық мәтінін тексеріңіз

it ('авторлық құқық мәтіні болуы керек'), function () {қайтарушы драйвер.getText («#авторлық құқық»). содан кейін (функция (сілтеме) {console.log ('авторлық құқық табылды:' + сілтеме); (сілтеме).болуы керек. тең («Тони Кейт - tlkeith.com @ 2015 - Барлық құқықтар қорғалған.»);});}); // Авторлық құқық мәтінін xpath көмегімен элементті таңдаушы ретінде тексеріңіз ('Авторлық құқық мәтіні болуы керек', function () {return driver.getText («// footer/center/p»). Содан кейін (функция (сілтеме) {console.log ('Авторлық құқық табылды:' + сілтеме]; (сілтеме).should.equal («Тони Кейт - tlkeith.com @ 2015 - Барлық құқықтар қорғалған.»);});});

• Пішін өрістерін толтыру және жіберу - «formFillSubmit1.js»

  • Аты -жөнін енгізіп, жіберіңіз, содан кейін нәтижені күтіңіз.

  • Бұл мысалда атау енгізу өрісін толтырудың 3 әдісі көрсетілген:

    • идентификатор бойынша
    • енгізуден xpath арқылы
    • xpath арқылы for-> кірістен
  • Сондай -ақ, енгізу өрісін тазарту әдісі көрсетіледі

// Идентификатор көмегімен атауды қойыңыз: Тони

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

• Көрсету/Жасыру түймесін басыңыз және мәтінді тексеріңіз - «showHideVerify1.js»

  • Мәтін көрсету/жасыру элементінде. Түйме күйді басқарады.

  • Бұл мысал көрсетеді:

    • Кеңейту үшін түймені басыңыз
    • Элементтің көрінуін күтіңіз (кеңейтілді)
    • Мәтінді тексеру (палубаны көшіру)

// «Қосымша ақпарат» түймесін басып, кеңейтілген элементтегі мәтінді тексеріңіз

it ('Қосымша ақпарат батырмасын шертіп, мәтінді тексеру керек'), function () {драйверді қайтарыңыз. («#қосымша ақпарат») басыңыз. содан кейін (function () {console.log ('Қосымша ақпарат түймесі басылды');}).waitForVisible («#collapseExample», 5000).getText («// div [@id = 'collExample']/div»). содан кейін (функция (e) {console.log ('Мәтін:' + e); (e).should.be.equal («Барлық жақсылық осында!»);});});

• Пішін өрісінің қателерін тексеру - «formFieldValidation.js»

  • Дұрыс қате туралы хабарламалар шығарылғанын тексеру үшін тест сценарийлерін қолданыңыз.

  • Бұл мысал көрсетеді:

    Қате туралы мәтіндік хабарларды тексеріңіз және орынды тексеріңіз (тізім реттелмеген)

it ('5 қатеден тұруы керек: бірінші/соңғы/мекенжай/қала/мемлекет', function () {

драйверді қайтару.getText («// ul [@class = 'alert alert-risk']/li [1]»). содан кейін (function (e) {console.log ('Қате табылды:' + e); (e).should.be.equal ('Атын енгізіңіз');}).getText («// ul [@class = 'ескерту ескерту-қауіп']/li [2]»). содан кейін (функция (е) {console.log ('Қате табылды:' + e); (e).should.be.equal ('Фамилияны енгізіңіз');}).getText («// ul [@class = 'ескерту ескерту-қауіп ']/li [3] «)). содан кейін (функция (e) {console.log (' Қате табылды: ' + e); (e).should.be.equal (' Мекенжайды енгізіңіз ');}). getText («// ul [@class = 'alert alert-risk']/li [4]»). содан кейін (function (e) {console.log ('Қате табылды:' + e); (e)..be.equal ('Қаланы енгізіңіз');}).getText («// ul [@class = 'alert alert-risk']/li [5]»). содан кейін (функция (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 «}, {» сілтеме «:» https://github.com/onewithhammer/WebDriverIOTutorial/ blob/master/callbackPromise.js «,» name «:» callbackPromise.js «}, {» сілтеме «:» https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js «,» аты «: «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 «}, {» сілтеме «:» https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js «,» name «:» dataLoopExample1.js «}]; … // әрбір linkArray linkArray.forEach (цикл (d) {it ('құрамында мәтін/сілтеме болуы керек, содан кейін goto беті -' + d.name, функция () {қайтарушы драйвері // бастапқы бетте екеніңізге көз жеткізіңіз..url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). содан кейін (функция (тақырып) {// тақырыпты (тақырыпты) тексеріңіз.should.be.equal («Веб -драйвер IO - Оқулық тесті беті «);}) //.getAttribute URL мекенжайын табыңыз ('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 бет табылды');});});));

• Пішін өрістерін толтыру үшін статикалық деректерді айналдыру - «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»). содан кейін (функция (e) {(e).should.be.equal (d.firstName); console.log («Бірінші) Name: « + 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 () {return driver.getCssProperty («// ul [@class = 'alert alert-risk']/li [1]», «color»). содан кейін (функция (нәтиже) {console.log ('Түс табылды:' + result.parsed.hex + «немесе» + нәтиже.мәні); (result.parsed.hex).sh керек. });});

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 ('толтыру-оң табылды:' + нәтиже.мән); «// table [@id = 'filelist']/thead/tr [1]/td [1]», «padding-left»). содан кейін (функция (нәтиже) {console.log ('padding-left found: ' + нәтиже.мән); (нәтиже.мән).болуы керек. });

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

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

6 -қадам: кеңестер мен амалдар

• Түзету:

  • Қосымша күйін келтіру және журнал жасау үшін драйвер деңгейінде тіркеуді қосыңыз.

    • LogLevel параметрін «егжей -тегжейлі» етіп орнатыңыз.
    • LogOutput параметрін каталог атауына орнатыңыз ('logs')

драйвер = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {istediğinizCapabilities: {browserName: 'firefox'}});

• Жөндеу үшін console.log (), debug (), getText () пайдаланыңыз.

  • console.log () - күйді анықтау үшін ақпаратты көрсету үшін пайдаланыңыз.
  • debug () - пәрмен жолында енгізу басылғанша шолуды/сценарийді кідіртуді қолданыңыз.

  • 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 (). Басыңыз («// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Сілтеме басылды');}) // google іздеу формасының пайда болуын күтіңіз.waitForVisible («#tsf», 20000).сосын (функция (e) {console.log ('Іздеу нәтижелері табылды');});});

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

  • Әрқашан тест сценарийін өзгертпей, басқа шолғышты шақыру үшін SELENIUM_BROWSER ортасының айнымалысын қолданыңыз.
  • Қолдау үшін кодтаудың аздап өзгеруін қажет етеді.

Кодты өзгерту:

// шолғышқа драйверді жүктеңіз

драйвер = webdriverio.remote ({wantCapabilities: {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 = хром моча

• Опера 12+

  SELENIUM_BROWSER = опера моча

• Сафари

  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 пиксель
    • КЕСТЕ - 992 пиксель
    • Ұялы телефон - 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; } if if (bp == «MOBILE») {obj.width = 768; obj.height = 400; obj.name = bp; }

// Сынақ сценарийі

бұрын (функция (жасалды) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (драйвер));} // терезенің өлшемін орнатыңыз ('терезе өлшемін орнату керек', функция (жасалды) {// ені ғана маңызды. driver.setWindowSize (winsize.width, winsize.height, function () {}). шақыру (жасалды);});

• Қайта қолданылатын пәрмендер (реттелетін пәрмендер):

  • Веб -драйвердің интерфейсін оңай кеңейтуге болады.
  • Мен барлық қайта қолданылатын командаларды кітапханаға енгізуді ұнатамын. (мүмкін бұл ескі мектеп, бірақ ол жұмыс істейді!)

common/commonLib.js

// verifyLastNameCheckError ()

// // Сипаттама: // Фамилияны тексеру қатесі туралы хабарды тексереді // // Енгізу: // сан - қате индексі (1-5) // Шығу: // жоқ // var verifyLastNameCheckError = функция () { var idx = аргументтер [0], кері байланыс = аргументтер [arguments.length - 1]; бұл.getText («// ul [@class = 'alert alert-risk']/li [» + idx + «]», функция (қате, e) {console.log ('Қате табылды:' + e); (e).should.be.equal ('Фамилияны енгізіңіз');}).қоңырау шалу (кері байланыс); }; // module.exports.verifyLastNameCheckError = verifyLastNameCheckError функциясын экспорттау;

Міне, қайта пайдалануға болатын функцияны шақыру үшін қажет нақты өзгерістер

Толық жұмыс мысалы үшін formFieldValidation.js қараңыз

// қайта қолданылатын пәрменді қажет етеді - CommonLib

common = қажет ('./ 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 - жаһандық функцияларға арналған 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 - бәрі жұмыс істейтінін тексеру үшін негізгі тест сценарийі
    • Статикалық элемент және мәтінді тексеру - барлық элементтер мен мәтінді тексеру
    • Пішін/бет қатесін тексеру - қатені тексеру
    • Іздеу нәтижелері - динамикалық мазмұнды тексеру

• Кері байланыс VS. Уәде:

  • Web Driver 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 («Тони»); console.log («Аты:» + e);}).setValue («#lname», «Keith»).getValue («#lname») онда (функция (e) {(e).should.be.equal («Keith»); console.log («Тегі:» + e);});});

7 -қадам: Қосымша ресурстар

Міне сілтеме үшін қосымша ресурстар:

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

  • Веб -драйвер IO талқылау тобы
  • Mocha талқылау тобы

• Басқа қызықты жобалар

  • Supertest - HTTP бекітулері
  • Шай - бекіту

8 -қадам: Қорытынды

Мен біраз уақытымды өз жобамда қолданылатын технологияларды зерттеуге арнадым. Мен бастапқыда Selenium веб -драйверінен бастадым, бірақ Web Driver IO қолдануға көштім. Веб -драйвер IO -ны қолдану оңай және кеңейту әлдеқайда жеңіл болып көрінді (кем дегенде кеңейтуге арналған құжаттама - қайта қолданылатын пәрмендер жақсы).

Мен технологияларды бірінші рет қарай бастаған кезде, мен жасауға тырысатын кез келген нәрсеге қатысты жақсы мысалдар табу қиын болды. Бұл ақпарат пен білімді сіздермен бөліскім келді.

Технологиялар мен күткеннен әлдеқайда жақсы жұмыс істеді, бірақ оқу қисығы болды. Барлық компоненттердің қалай жұмыс істейтінін түсінгеннен кейін мен қысқа мерзімде күрделі тест сценарийлерін жаза алдым. Ең қиын сценарийлер JavaScript -ке негізделген компоненттер болды, мысалы күнді таңдаушы және модальды селекторлар.

Мен өзімді ешқашан JavaScript әзірлеушісі деп атаған емеспін, мен де JavaScript маманы болғым келмеді, бірақ бұл технологияларды қолдану мені JS дағдыларымды шыңдауға итермеледі.

Бұл мақала пайдалы және мысалдар түсінікті және мазмұнды деп үміттенемін.

Егер сізде сұрақтар немесе түсініктемелер болса, маған хабарлаңыз.

Рақмет сізге, Тони Кейт