Վեբ վարորդի IO ձեռնարկը `օգտագործելով կենդանի վեբ կայք և աշխատանքային օրինակներ. 8 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:51

Վեբ վարորդի IO ձեռնարկը `օգտագործելով կենդանի վեբ կայք և աշխատանքային օրինակներ

Վերջին թարմացումը `2015-26-07

(Հաճախ ստուգեք, երբ ես թարմացնում եմ այս հրահանգները `ավելի մանրամասն և օրինակներով)

Նախապատմություն

Վերջերս ինձ ներկայացվեց մի հետաքրքիր մարտահրավեր: Ինձ անհրաժեշտ էր ներկայացնել ավտոմատացված թեստավորում Q/A բաժնում `շատ քիչ տեխնիկական փորձով և առանց ծրագրավորման նախապատմության:

Սա իսկապես երկու (2) առանձին մարտահրավեր էր: Առաջինը ՝ ավտոմատացված փորձարկումներ կատարելու տեխնոլոգիաների բացահայտումն էր: Երկրորդը պետք է վերապատրաստեր Q/A բաժինը:

Հոդվածը կանդրադառնա միայն օգտագործվող տեխնոլոգիաներին և այն, ինչ ես սովորեցի այդ ընթացքում:

Տեխնոլոգիաները լավ աշխատեցին, բայց ես իսկապես ստիպված էի տեղեկատվություն փնտրել և շատ ժամեր ծախսեցի խնդիրներ պարզելու համար:

Ես դժվարությամբ գտա ինտերնետում տեղեկատվություն այս տեխնոլոգիաների մասին, որոնք բոլորը միասին աշխատում են:

Ես ուզում էի կիսվել այս տեղեկատվությամբ, ուստի ես այս հոդվածը գրեցի աշխատանքային փորձնական սցենարների և փորձնական վեբ կայքի հետ աշխատելու համար, որպեսզի սցենարները դեմ լինեն:

Բոլոր փորձարկման սցենարները կարելի է գտնել github- ում, իսկ աշխատանքային թեստավորման կայքը գտնվում է Web Driver IO ձեռնարկի թեստավորման կայքում

Հուսով եմ, որ այն օգտակար կգտնեք: Եթե դա անում եք, խնդրում եմ ինձ տեղյակ պահեք:

Նպատակը Օգտագործեք տեխնոլոգիաներ ՝

• Փորձեք վեբ կայքի ֆունկցիոնալությունը
• Փորձարկեք JavaScript- ի ֆունկցիոնալությունը
• Կարող է ձեռքով գործարկվել
• Կարող է գործարկվել ինքնաբերաբար

• Հեշտ է սովորել լեզու ոչ ծրագրավորողների համար

  Հարց/անձնակազմ ՝ HTML և JavaScript տարրական գիտելիքներով

• Օգտագործեք միայն բաց կոդով ծրագրակազմ

Տեխնոլոգիաներ

Իմ ընտրած տեխնոլոգիաների ցանկը.

• mocha - test runner - կատարում է թեստային սցենարները
• mustjs - պնդման գրադարան
• webdriverio - դիտարկիչի կառավարման կապեր (լեզվական կապեր)
• սելեն - բրաուզերի աբստրակցիայի և գործարկման գործարան

• Բրաուզեր/Բջջային վարորդներ + բրաուզերներ

  • Firefox (միայն դիտարկիչ)
  • Chrome (դիտարկիչ և վարորդ)
  • IE (զննարկիչ և վարորդ)
  • Safari (զննարկչի և վարորդի միացում)

Քայլ 1: Softwareրագրաշարի տեղադրում

Սկսելու համար հարկավոր է տեղադրել Node JS, Web Driver IO, Mocha, Should և Selenium առանձին սերվեր:

Ահա Windows 7 -ի տեղադրման հրահանգները:

(Ես Mac/Linux օգտվող եմ, բայց ես պետք է ամեն ինչ տեղադրեի Windows 7 մեքենաների վրա, ահա թե ինչու ես այն ներառել եմ ձեր տեղեկանքի համար: Mac/Linux- ում տեղադրման կարգը նման է: Մանրամասների համար խնդրում ենք խորհրդակցել առցանց հղումների հետ): տեղեկատվություն)

Aննարկիչից.

• Տեղադրեք Node, որը ներառում է NPM (Node Package Manager)

• գնացեք

  • Կտտացրեք տեղադրել
  • Պահել և գործարկել ֆայլը
  • Սահմանել ուղին և փոփոխականը (NODE_PATH)

  • Գնացեք կառավարման վահանակ-> համակարգ և անվտանգություն-> համակարգ

    • Ընդլայնված համակարգի կարգավորումներ

    • Շրջակա միջավայրի կարգավորում (օգտագործողի փոփոխականներ)

      • Ավելացնել PATH- ին

        C: / Users {USERNAME} AppData / Ռոումինգ / npm;

      • Ավելացնել NODE_PATH (համակարգի փոփոխականներ)

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

Նշում. Ես ստորև տեղադրեցի բոլոր ծրագրակազմը ՝ օգտագործելով npm գլոբալ տարբերակը (-g): Սովորաբար դա խորհուրդ չի տրվում, բայց այս տեղադրման համար անհրաժեշտ էր գլոբալ տեղադրել, քանի որ այն կօգտագործվեր բազմաթիվ նախագծերի համար:

Բացեք հրամանի տողը (cmd):

(տեղական օգտագործողի ադմինիստրատոր)

• Տեղադրեք սելեն «վեբ վարորդ IO»

  • npm տեղադրել webdriverio -g

    Սա ձեր համակարգչի վրա գլոբալ կերպով տեղադրելու է վեբ վարորդի IO

• Տեղադրեք «mocha» test runner ծրագրակազմ

  • npm տեղադրել mocha -g

    Սա գլոբալ կերպով կտեղադրի մոխա ձեր մեքենայի վրա

• Տեղադրեք «պետք է» պնդումների գրադարանը

  • npm տեղադրումը պետք է լինի -g

    Սա ձեր համակարգչի վրա գլոբալ կերպով պետք է տեղադրի «պետք» -ը

• Տեղադրեք Selenium Stand Alone Server- ը

  • Գնացեք
  • Ներբեռնեք բանկա ֆայլը և տեղափոխեք «սելեն» գրացուցակ:

• Տեղադրեք դիտարկիչներ և զննարկիչների վարորդներ, որոնց հետ փորձելու եք

  • Cmd հուշումից.

    • Ստեղծեք «սելեն» գրացուցակ
    • C: / Users {USERNAME} selenium

    • Հրամաններ.

      • cd C: / Users {USERNAME}
      • mkdir սելեն

    • Firefox

      • Տեղադրեք firefox բրաուզերը, եթե այն արդեն տեղադրված չէ:
      • Theանապարհը պետք է սահմանվի ՝ Firefox- ը հրամանի տողից (cmd) սկսելու համար:

      • Կառավարման վահանակ-> Համակարգ և անվտանգություն-> Համակարգ

        • Ընդլայնված համակարգի կարգավորումներ
        • Շրջակա միջավայրի կարգավորումներ
        • Ավելացրեք (կցեք կիսաթաղանթ օգտագործումը) Path Variable- ին
        • C: / Program Files (x86) Mozilla Firefox
      • Firefox- ի համար հատուկ վեբ վարորդ չի պահանջվում:

    • Chrome

      • Տեղադրեք chrome զննարկիչը, եթե այն արդեն տեղադրված չէ:
      • AYանապարհը կարող է սահմանվել Chrome- ը հրամանի տողից (cmd) գործարկելու համար:
      • Առաջին փորձարկում. Chrome.exe հրամանի տողից (cmd)
      • Եթե քրոմը չի սկսվում, ապա.

      • Կառավարման վահանակ-> Համակարգ և անվտանգություն-> Համակարգ

        • Ընդլայնված համակարգի կարգավորումներ
        • Շրջակա միջավայրի կարգավորումներ
        • Ավելացրեք (կցեք կիսաթաղանթ օգտագործումը) Path Variable- ին
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome- ի համար անհրաժեշտ է հատուկ վեբ վարորդ:

        Գնացեք chromium.org և բացեք 32 բիթանոց վարորդը «սելեն» գրացուցակում:

    • Internet Explorer (միայն Windows- ի համար - չի աշխատի այլ հարթակներում)

      • IE- ի համար անհրաժեշտ է հատուկ վեբ վարորդ:

        • Գնացեք
        • Ներբեռնեք և բացեք 64 բիթանոց վարորդը «սելեն» գրացուցակում:

Քայլ 2: Հիմնական թեստային սցենար

Սկսենք որոշ հիմունքներից:

Ահա մի պարզ mocha սցենար, որը կբացի վեբ կայքը և կհաստատի վերնագիրը:

// tutorial1.js

// // Սա պարզ թեստային վեբ կայք բացելու և // վերնագիրը վավերացնելու համար: // պահանջվող գրադարաններ var webdriverio = պահանջում («webdriverio»), պետք է = պահանջում («պետք է»); // թեստային սցենարի բլոկ կամ հավաքակազմ նկարագրել («Վերնագրի փորձարկում վեբ վարորդի համար IO - ձեռնարկի փորձնական էջի կայք», գործառույթ () {// սահմանել timeout- ը 10 վայրկյան this.timeout (10000); var վարորդ = {}; // մանգաղ ՝ փորձարկումներից առաջ աշխատելու համար (գործառույթ (ավարտված է) {// բեռնել վարորդը զննարկչի վարորդի համար = webdriverio.remote ({wishCapability: {browserName: 'firefox'}}); driver.init (done);}); // թեստային բնութագիր - «ճշգրտում» այն («պետք է բեռնվի ճիշտ էջը և վերնագիրը», գործառույթը () {// բեռնել էջը, այնուհետև կանչել գործառույթը () վերադարձ վարորդը.url («https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // ստացեք վերնագիր, այնուհետև փոխանցեք գործառույթը գործառույթին ().getTitle () ); // չմեկնաբանել վահանակի վրիպազերծման համար // console.log ('Ընթացիկ էջի վերնագիրը`' + վերնագիր);});}); // «որսալ» `այս բլոկի բոլոր փորձարկումներից հետո (գործառույթ (ավարտված է)) {վարորդ. վերջ (ավարտված է);});});

Դիտարկումներ

• Նախ պետք է նկատեք, որ թեստի սցենարը գրված է JAVASCRIPT- ով (ավարտվում է.js ընդլայնմամբ):

• Հիմնական կառուցվածքը գրեթե նույնական է բոլոր թեստային սցենարների համար:

  • Վերնագրի մեկնաբանություններ (//)
  • Պահանջվող գրադարաններ
  • Սահմանել ընտրանքներ (ըստ ցանկության)
  • Կեռիկ. Տեղադրեք դիտարկիչի վարորդ
  • Test Suite (նկարագրել)
  • Թեստի բնութագրեր (կարող է լինել բազմաթիվ բնութագրեր սյուիտում)
  • Կեռիկ: Մաքրեք

• Թեստային փաթեթը սկսվում է նկարագրման գործառույթով, որը վերցնում է երկու պարամետր.

  • Լար - փորձարկման հավաքակազմի նկարագրություն

    • «Ստուգեք էջը պատշաճ խոսակցությունների համար»
    • «Ստուգեք ռադիո կոճակի գործողությունները»

  • գործառույթ - գործարկելու կոդի բլոկ

    նկարագրել («Թեստային հավաքածուի նկարագրություն», գործառույթ () {});

• Թեստային փաթեթը պարունակում է 1 կամ ավելի փորձարկման բնութագիր (ճշգրտում)

• Տեխնիկական պայմանները սկսվում են դրա գործառույթով, որը վերցնում է երկու պարամետր.

  • Լար - փորձարկման բնութագրի նկարագրություն

    • «Պետք է լինի ճիշտ հղման տեքստ և հղման URL»
    • «Պետք է պարունակի ճիշտ բառապաշար (պատճենահանող տախտակամած)
  • գործառույթ - գործարկելու կոդի բլոկ
  • it («Թեստի բնութագրի նկարագրություն», գործառույթ () {});
• Տիպը պարունակում է մեկ կամ ավելի ակնկալիքներ, որոնք ստուգում են ծածկագրի վիճակը

• Դրանք կոչվում են պնդումներ

  «Պետք է» գրադարանը տալիս է պնդումները

• Գրեթե բոլոր դեպքերում դուք պետք է տեղորոշեք մեկ կամ մի քանի տարրեր ընտրիչի միջոցով, այնուհետև որոշակի գործողություն կատարեք տարրի (տարրերի) վրա

  • Օրինակներ.

    • Գտնել տեքստը էջում և հաստատել տեքստը
    • Լրացրեք ձևը և ներկայացրեք
    • Ստուգեք տարրի CSS- ը

Եկեք ավելի սերտ նայենք օրինակին մեկնաբանություններով:

Բեռնել անհրաժեշտ գրադարանները. Վեբ վարորդի IO և պետք է:

// պահանջվող գրադարաններ

var webdriverio = պահանջել («webdriverio»), պետք է = պահանջել («պետք է»);

Սահմանեք թեստային փաթեթը: Այս հավաքածուն կոչվում է.

// փորձարկման սցենարի բլոկ կամ փաթեթ

նկարագրել («Վեբ վարորդի համար վերնագրի թեստ IO - ձեռնարկի փորձնական էջի կայք», գործառույթ () {…});

Setամկետը սահմանեք 10 վայրկյանից, որպեսզի էջը բեռնելիս սցենարը չկատարվի:

// սահմանել ժամանակը 10 վայրկյան

this.timeout (10000);

Hook ՝ բրաուզերի վարորդը բեռնելու համար, նախքան «բնութագրերը» բնութագրերը գործարկելը: Այս օրինակում բեռնված է Firefox- ի վարորդը:

// որս ՝ փորձարկումներից առաջ աշխատելու համար

առաջ (գործառույթը (կատարված է) {// բեռնել վարորդը զննարկչի վարորդի համար = webdriverio.remote ({ցանկալի հնարավորություններ. {browserName: 'firefox'}}}); driver.init (ավարտված է);});

Սահմանեք թեստի բնութագիրը:

// փորձարկման բնութագիր `« ճշգրտում »

այն («պետք է բեռնել ճիշտ էջը և վերնագիրը», գործառույթը () {…});

Բեռնել կայքի էջը

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

Ստացեք վերնագիր, այնուհետև փոխանցեք գործառույթը գործառույթին ()

.getTitle (). ապա (գործառույթ (վերնագիր) {

… });

Հաստատեք վերնագիրը ՝ օգտագործելով անհրաժեշտ պնդման գրադարանը:

(վերնագիր).should.be.equal («Վեբ վարորդի IO - ձեռնարկի փորձնական էջ»);

Կեռիկ ավարտելուց հետո թողեք և մաքրեք վարորդին:

// «բլոկ» ՝ այս բլոկի բոլոր փորձարկումներից հետո գործարկելու համար

հետո (գործառույթը (կատարված է) {վարորդը.վերջ (ավարտված է);});

Քայլ 3: Գործարկեք Test Script- ը

Հիմա եկեք տեսնենք, թե ինչ է անում թեստային սցենարը գործարկելիս:

Նախ գործարկեք Selenium Stand Alone Server- ը ՝

• Windows- ի համար օգտագործեք հրամանի տող (cmd).

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

• Mac- ի կամ Linux- ի համար բացեք տերմինալը.

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Տես վերևի սքրինշոթը

Հաջորդը գործարկեք թեստային սցենարը.

• Windows- ի համար օգտագործեք հրամանի տող (cmd).

  • մոկա
  • # mocha tutorial1.js

• Mac- ի կամ Linux- ի համար բացեք տերմինալը.

  • մոկա
  • $ mocha tutorial.js
• Տես վերևի սքրինշոթը

Եւ ինչ պատահեց?

Մոչան վկայակոչում է «tutorial1.js» սցենարը: Վարորդը գործարկեց զննարկիչը (Firefox), բեռնեց էջը և հաստատեց վերնագիրը:

Քայլ 4: Վեբ կայքի օրինակ

Բոլոր օրինակները հակասում են այս կայքին:

Օրինակ վեբ կայքը գտնվում է ՝ Web Driver IO Tutorial Test Page

Բոլոր փորձարկման սցենարները կարելի է ներբեռնել github- ից:

Քայլ 5: Հատուկ օրինակներ

Ամբողջ ծածկագիրը հասանելի է github- ում. Web Driver IO ձեռնարկը github- ում

• Հաստատեք հղումը և հղման տեքստը անկանոն ցուցակում `" linkTextURL1.js"

  • Չհամակարգված ցուցակն ունի an, իսկ հղումը ցուցակի 4 -րդ կետն է:
  • URL- ը պետք է լինի «https://tlkeith.com/contact.html»

// Հաստատեք մեզ հետ կապի հղման տեքստը

այն («պետք է պարունակի Կապ մեզ հետ կապի տեքստ», գործառույթ () {վերադարձ վարորդ.getText ("// ul [@id = 'mylist']/li [4]/a"). այնուհետև (գործառույթ (հղում) {մխիթարել.log ('Հղումը գտնված է' ' + հղում); (հղում).should.equal («Կապ մեզ հետ»);});}); // Հաստատեք մեզ հետ կապի URL այն («պետք է պարունակի մեզ հետ կապի URL», գործառույթ () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").then (գործառույթը (հղումը) {(հղումը).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL- ը գտնված է' ' + հղում);});})});

• Հաստատեք հեղինակային իրավունքի տեքստը `" Copyright1.js"

  • Հեղինակային իրավունքը տողատակում է: Այս օրինակը ցույց է տալիս հեղինակային իրավունքի տեքստը գտնելու 2 տարբեր եղանակներ.

    • որպես տարրերի ընտրիչ
    • օգտագործելով տարրերի ընտրիչ xpath- ը

// Հաստատեք հեղինակային իրավունքի տեքստը ՝ օգտագործելով որպես տարր ընտրող

այն («պետք է պարունակի հեղինակային տեքստ», գործառույթ () {վերադարձ վարորդին.getText («#հեղինակային իրավունք»): այնուհետև (գործառույթ (հղում) {console.log («Հեղինակային իրավունքները գտնված են.» + հղում); (հղում).պիտի: հավասար («Թոնի Քիթ - tlkeith.com @ 2015 - Բոլոր իրավունքները պաշտպանված են»);});}); // Հաստատեք հեղինակային իրավունքի տեքստը xpath- ի միջոցով ՝ որպես տարրի ընտրիչ («պետք է պարունակի հեղինակային տեքստ», գործառույթ () {return driver.getText ("// footer/center/p"). Այնուհետև (գործառույթ (հղում) {console.log («Հեղինակային իրավունքները գտնվել են ՝ ' + հղում); (հղում).should.equal (« Թոնի Քիթ - tlkeith.com @ 2015 - Բոլոր իրավունքները պաշտպանված են »);});});

• Լրացրեք ձևի դաշտերը և ներկայացրեք - "formFillSubmit1.js"

  • Լրացրեք անունը, ազգանունը և ներկայացրեք, ապա սպասեք արդյունքների:

  • Այս օրինակը ցույց է տալիս առաջին անվան մուտքի դաշտը լրացնելու 3 եղանակ.

    • ըստ id- ի
    • մուտքից xpath- ով
    • ըստ xpath ձևից> մուտքագրում
  • Նաև ցույց է տալիս, թե ինչպես մաքրել մուտքային դաշտը

// Նշեք առաջին անունը id- ի միջոցով ՝ Tony

այն («պետք է անունը սահմանի Տոնի», գործառույթը () {return driver.setValue («#անուն», «Թոնի»).getValue («#անուն»). այնուհետև (գործառույթ (ե) {(ե).պիտի.be.equal («Թոնի»); console.log («Անուն ՝« + ե);});}); // Մաքրել առաջին անունը `օգտագործելով այն id (« պետք է մաքրել անունը », գործառույթը () {return driver.clearElement ("#անուն ").getValue ("#անուն "). Այնուհետև (գործառույթը (ե) {(ե).should.be.equal (""); console.log ("Անուն ՝" + ե);});}); // Տեղադրեք առաջին անունը ՝ օգտագործելով xpath մուտքագրումից հետևյալը.).getValue ("// մուտքագրում [@name = 'fname']"): ապա (գործառույթ (ե) {(ե).should.be.equal ("Տոնի"); console.log ("Անուն:" + ե);});}); // Մաքրել առաջին անունը xpath- ի միջոցով մուտքագրելուց («պետք է մաքրել անունը», գործառույթը () {return driver.clearElement ("// input [@name = 'fname']").getValue ("// input [@name = 'fname'] ")): ապա (գործառույթը (ե) {(ե).should.be.equal (" "); console.log (" Անուն. " + ե);});}); // Սահմանեք առաջին անունը ՝ օգտագործելով xpath ձևը հետևյալի. 1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Ապա (գործառույթը (ե) {(ե). Պետք. Be.equal («Թոնի»); console.log («Անուն ՝« + ե);});}); // id- ի միջոցով ազգանունը սահմանել ՝ (գործառույթ (ե) {(ե).should.be.equal ("Keith"); console.log ("Ազգանուն." + ե);});}); // Ներկայացրեք ձևը և սպասեք որոնման արդյունքներին («պետք է ներկայացնել ձևը և սպասել արդյունքների», գործառույթ () {return driver.submitForm ("#search-form"). Այնուհետև (գործառույթ (ե) {console.log (' Ներկայացրեք որոնման ձև ');}).waitForVisible ("#search-results", 10000).then (function (e) {console.log (' Search results found ');});});

• Կտտացրեք Showույց տալ/թաքցնել կոճակը և հաստատել տեքստը `" showHideVerify1.js"

  • Տեքստը ցուցադրման/թաքցնելու տարրի մեջ է: Կոճակը վերահսկում է վիճակը:

  • Այս օրինակը ցույց է տալիս.

    • Կտտացրեք կոճակին ՝ ընդլայնելու համար
    • Սպասեք, մինչև տարրը տեսանելի լինի (ընդլայնված)
    • Հաստատեք տեքստը (պատճենահանող տախտակամած)

// կտտացրեք «Լրացուցիչ տեղեկություններ» կոճակին և ստուգեք ընդլայնված տարրի տեքստը

այն («պետք է սեղմել լրացուցիչ տեղեկատվության կոճակը և հաստատել տեքստը», գործառույթը () {վերադարձ վարորդը. կտտացրեք ("#moreinfo"): այնուհետև (գործառույթը () {console.log («Սեղմված այլ տեղեկատվության կոճակը»);}).waitForVisible ("#collapseExample", 5000).getText ("// div [@id = 'CollaExample']/div"). ապա (գործառույթը (ե) {console.log ('Տեքստը' ' + ե); (ե).should.be.equal («Բոլոր լավ բաները գնացեք այստեղ»);});});

• Վավերացրեք ձևի դաշտի սխալները - "formFieldValidation.js"

  • Օգտագործեք թեստային սցենարներ `ստուգելու համար, որ սխալ հաղորդագրությունները արտադրվում են:

  • Այս օրինակը ցույց է տալիս.

    Հաստատեք սխալի տեքստային հաղորդագրությունները և ստուգեք գտնվելու վայրը (ցուցակի չդասավորված դիրք):

այն («պետք է պարունակի 5 սխալ ՝ առաջին/վերջին/հասցե/քաղաք/նահանգ», գործառույթ () {

վերադարձ վարորդ.getText ("// ul [@class = 'alert alert-վտանգ']/li [1]"). այնուհետև (գործառույթը (ե) {console.log ('Սխալ է հայտնաբերվել.' + e); (ե).should.be.equal («Խնդրում ենք մուտքագրել անունը»);}).getText ("// ul [@class = 'alert alert-վտանգ']/li [2]"): ապա (գործառույթ (ե) {console.log ('Սխալը գտնվեց.' + e); (ե).should.be.equal ('Խնդրում ենք մուտքագրել ազգանունը');}).getText ("// ul [@class = 'alert alert-վտանգ ']/li [3] ")): ապա (գործառույթը (ե) {console.log (' Սխալ է հայտնաբերվել ՝ ' + e); (ե).should.be.equal (' Խնդրում ենք մուտքագրել հասցեն ');}): getText ("// ul [@class = 'alert alert-վտանգ']/li [4]"). այնուհետև (գործառույթը (ե) {console.log ('Սխալ է հայտնաբերվել ՝' + e); (ե). պետք է.be.equal ('Խնդրում ենք մուտքագրել քաղաք');}).getText ("// ul [@class = 'alert alert-վտանգ']/li [5]"): ապա (գործառույթը (ե) {console.log ('Սխալ է հայտնաբերվել.' + Ե); (ե).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 ":" dynamBrowser.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 ": «դեբու gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // շրջանցեք յուրաքանչյուր linkArray linkArray.forEach (գործառույթը (d) {it ('պետք է պարունակի տեքստ/հղում այնուհետև գնա էջ -' + d.name, function () {return driver // համոզվեք, որ գտնվում եք մեկնարկային էջում.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). ապա (գործառույթը (վերնագիրը) {// ստուգել վերնագիրը (վերնագիրը).should.be.equal ("Վեբ վարորդի IO - Ուսումնական ձեռնարկ console.log ('URL- ը գտնվեց.' + d.link);}) // գնացեք URL էջ և ստուգեք, որ այն գոյություն ունի: սեղմեք ('a =' + d.name).waitForVisible ("#js-repo-pjax- բեռնարկղ », 10000).հետո (գործառույթը () {console.log ('Github Էջը գտնվեց');});});});

• Ստատիկ տվյալների փաթաթում ՝ ձևերի դաշտեր լրացնելու համար - "loopDataExample2.js"

  • Այս օրինակը ցույց է տալիս. Օգտագործեք JSON տվյալների զանգված ՝ անուն/ազգանուն պահելու համար

    • Անցեք տվյալների միջոցով ՝ ձևերի դաշտեր լրացնելու համար, այնուհետև ներկայացրեք ձևը
    • Սպասեք արդյունքների էջին
    • Արդյունքների էջում հաստատեք անունը / ազգանունը

// տվյալների զանգված - firstName և lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // շրջանցեք յուրաքանչյուր dataArray dataArray.forEach (գործառույթը (դ) {it («պետք է լրացնել դաշտեր, sumbit էջ», գործառույթը () {վերադարձ վարորդ // համոզվեք, որ գտնվում եք սկզբնական էջում.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). ապա (գործառույթը (վերնագիրը) {// ստուգել վերնագիրը (վերնագիրը).should.be.equal ("Web Driver IO - Tutorial Test Page");}).setValue ("#fname", d.firstName).getValue ("#անուն"). այնուհետև (գործառույթը (ե) {(ե). պետք է լինի Անուն ՝ " + ե);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Այնուհետև (գործառույթ (ե) {(ե). Պետք. Be.equal (d.lastName); console.log ("Ազգանուն ՝" + ե);}).submitForm ("#որոնման ձև"). այնուհետև (function () {console.log ('Ներկայացնել որոնման ձևը));}).waitForVisible ("#search-results", 10000).then (function () {console.log ('Result Page Found');}).getText ("// h1"). ապա (գործառույթ (հղում) {console.log ('Տեքստը գտնված է `' + հղում); (հղում): should.equal (« Բարի գալուստ » + d.firstName +" " + d.lastName +". ");});});});

• Վավերացրեք CSS հատկությունները - "cssValidation1.js"

  • Այս օրինակը ցույց է տալիս, թե ինչպես անել.

    • Վավերացրեք հետևյալ CSS հատկությունները.

      • գույնը
      • լիցք (վերև, ներքև, աջ, ձախ)
      • Ֆոնի գույնը

այն («պետք է պարունակի սխալի տեքստի ճիշտ գույնը», գործառույթը () {վերադարձ վարորդին.getCssProperty ("// ul [@class = 'alert alert-վտանգ']/li [1]", "գույն"). ապա (ֆունկցիա (արդյունք) {console.log ('Գույնը գտնված է' ' + result.parsed.hex + "կամ" + result.value); (result.parsed.hex).should.be.equal ('#a94442 '); });});

այն («պետք է պարունակի սեղանի վանդակի ճիշտ լրացում», գործառույթ () {

վերադարձ վարորդ // լիցքավորում. վերև աջ ներքև ձախ.getCssProperty ("// սեղան [@id = 'ֆայլերի ցուցակ']/thead/tr [1]/td [1]", "լցոնման վերև"). այնուհետև (գործառույթ (արդյունք) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "): ապա (գործառույթը (արդյունք) {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).should.be.equal (' 5px ');}); });

այն («պետք է պարունակի ճիշտ ֆոնի գույնը աղյուսակի վերնագրում», գործառույթ () {

վերադարձ վարորդ.getCssProperty ("// սեղան [@id = 'filelist']/thead", "background-color"). այնուհետև (գործառույթ (արդյունք) {console.log ('ֆոնի գույնը գտնված է.' + result.parsed hex); (result.parsed.hex).should.be.equal ('#eeeeee');}); });

Քայլ 6: Խորհուրդներ և հնարքներ

• Վրիպազերծում.

  • Վարորդի մակարդակով միացրեք մուտքը ավելի վրիպազերծման և տեղեկամատյաններ ստեղծելու համար:

    • Տեղադրեք logLevel- ը «լայնածավալ»
    • Տեղադրեք logOutput գրացուցակի անվան վրա ('տեղեկամատյաններ')

վարորդ = webdriverio.remote (loglevel ՝ «verbose», logOutput ՝ «տեղեկամատյաններ», {wishCapability: {browserName: 'firefox'}});

• Վրիպազերծման համար օգտագործեք console.log (), debug (), getText ():

  • console.log () - Օգտագործեք ՝ վիճակը որոշելու համար տեղեկատվություն ցուցադրելու համար:
  • debug () - Օգտագործեք դադար զննարկիչը/սցենարը, մինչև մուտքագրումը սեղմված լինի հրամանի տողում:

  • getText () - Օգտագործեք ՝ ստուգելու համար, որ դուք փոխազդում եք ճիշտ տարրի հետ:

    Հատկապես օգտակար է xpath արտահայտությունների հետ:

// Կտտացրեք ցանկից 3 -րդ կետին

այն («ցանկից պետք է կտտացնել 3 -րդ կետի վրա», գործառույթ () {// օգտագործել getText () ՝ xpath- ը ճշտելու համար, որ տարրի վերադարձի վարորդը.getText ("// ul [@id = 'mylist']/li [3]/div/div/ա ") («3 -րդ կետ»);}) // օգտագործել debug () գործողությունը դադարեցնելու համար ՝ տեսնելու, թե ինչ է կատարվում դիտարկիչում: debug (). Կտտացրեք ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link linked');}) // սպասեք Google- ի որոնման ձևի հայտնվելուն: waitForVisible ("#tsf", 20000).հետո (գործառույթ (ե) {console.log ('Որոնման արդյունքները գտնվեցին');});});

• Օգտագործեք Environment Variable ՝ դիտարկիչը դինամիկ կերպով փոխելու համար.

  • Օգտագործեք միջավայրի փոփոխական SELENIUM_BROWSER ՝ տարբեր դիտարկիչ կանչելու համար ՝ առանց ամեն անգամ փորձարկման սցենարը փոփոխելու:
  • Պահանջում է կոդավորման մի փոքր փոփոխություն `աջակցելու համար:

Կոդի փոփոխություններ.

// բեռնեք վարորդը դիտարկիչի համար

վարորդ = webdriverio.remote ({ցանկալի Հնարավորություններ. {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Աջակցվող դիտարկիչներ.

• Internet Explorer - IE 8+ (միայն Windows)

  SELENIUM_BROWSER = այսինքն `մոկկա

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox մոկկա

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = քրոմ մոխա

• Օպերա 12+

  SELENIUM_BROWSER = օպերայի մոխա

• Սաֆարի

  SELENIUM_BROWSER = սաֆարի մոչա

Փորձարկում.

• Windows- ի համար օգտագործեք git bash shell- ը.

  • SELENIUM_BROWSER = քրոմ մոխա
  • $ SELENIUM_BROWSER = քրոմ մոկա DynamicBrowser.js

• Mac- ի կամ Linux- ի համար բացեք տերմինալը.

  • SELENIUM_BROWSER = քրոմ մոխա
  • $ SELENIUM_BROWSER = քրոմ մոկա DynamicBrowser.js

• Արձագանքող թեստավորում.

  • Որոշեք ճեղքման կետերը `հիմնվելով ծրագրի կամ շրջանակի վրա (այսինքն` bootstrap):

  • Սահմանեք միջավայրի փոփոխականներ յուրաքանչյուր ճեղքման կետի համար.

    • Սեղան - 1200 պիքսել
    • ԱABՅՈՍԱԿ - 992 px
    • Շարժական - 768 պիքսել

  • Մշակել բազմակի օգտագործման հրաման ՝ շրջակա միջավայրի փոփոխականը կարդալու և դիտարկիչի չափը սահմանելու համար:

    Տես ստորև բերված օրինակը:

  • Callանգահարեք ձեր փորձարկման սցենարի բազմակի օգտագործման հրամանը:

// բազմակի օգտագործման կոդ - գրադարան // կոդի հատված if (bp == "DESKTOP") {obj.width = 1200; obj. բարձրություն = 600; obj.name = bp; } else if (bp == "Աղյուսակ") {obj.width = 992; obj. բարձրություն = 600; obj.name = bp; } else if (bp == "Շարժական") {obj.width = 768; obj. բարձրություն = 400; obj.name = bp; }

// Փորձարկման սցենար

առաջ (գործառույթը (կատարված է) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (վարորդ));} // պատուհանի չափը սահմանել այն ('պետք է սահմանել պատուհանի չափը', գործառույթը (կատարված է) {// միայն լայնությունը կարևոր է driver.setWindowSize (winsize.width, winsize.height, function () {}). զանգ (ավարտված է);});

• Բազմակի օգտագործման հրամաններ (սովորական հրամաններ).

  • Web Driver IO- ն հեշտությամբ երկարաձգելի է:
  • Ես սիրում եմ գրադարանի մեջ դնել բազմակի օգտագործման հրամանները: (գուցե սա հին դպրոց է, բայց աշխատում է)

common/commonLib.js

// verifyLastNameCheckError ()

// // Նկարագրություն. // Հաստատում է ազգանվան ձևի վավերացման սխալի հաղորդագրություն // // Մուտք ՝ // համար - սխալի ինդեքս (1-5) // Ելք ՝ // ոչ մի var idx = փաստարկներ [0], հետադարձ = փաստարկներ [arguments.length - 1]; սա.getText ("// ul [@class = 'alert alert-վտանգ']/li [" + idx + "]", գործառույթը (սխալ, ե) {console.log ("Սխալ է հայտնաբերվել. ' + 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 (վարորդ)); այն («պետք է պարունակի 2 սխալ ՝ անուն/ազգանուն», գործառույթ () {// կանչեք բազմակի օգտագործման գործառույթի վարորդ.verifyFirstNameError (1);.verifyLastNameError (2);});

• Նախագծի ֆայլ/տեղեկատուի կառուցվածք.

  • Ահա նախագծի բնորոշ կառուցվածքը.

    • «Նախագիծ» - ծրագրի հիմնական տեղեկատու

      • README.md - գլոբալ նախագծի ընթերցում

      • «Common» - գլոբալ գործառույթների գրացուցակ, որը տարածված է բոլոր նախագծերի համար

        • common -lib.js - գլոբալ գործառական գրադարան
        • README.md - ընթերցում գլոբալ գործառույթների համար

      • «Product1» - ապրանք 1 -ի տեղեկատու

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

        • «Ընդհանուր» - Տեղական գործառույթների ցուցակ 1 -ին նախագծի համար

          • prod1 -lib.js - ծրագրի գործառույթի տեղական գործառնական գրադարան
          • README.md - readme տեղական գործառույթների նախագծի 1 -ի համար

      • «Product2»-ապրանք 2test-script1.jstest-script2.js արտադրանքի համար

        • «Ընդհանուր» - տեղական գործառույթների ցուցակ 2 նախագծի համար

          • prod2 -lib.js - ծրագրի գործառույթի տեղական գրադարան 2
          • README.md - readme տեղական գործառույթների նախագծի համար 2

• Փորձարկման սցենարները բաժանել բազմաթիվ ֆայլերի.

  • Ահա մի քանի ֆայլերի օգտագործման օրինակ.

    • Խելամտության ստուգում - հիմնական թեստային սցենար `ամեն ինչ աշխատելու համար
    • Ստատիկ տարր և տեքստի վավերացում - ստուգեք բոլոր տարրերն ու տեքստը
    • Ձևի/էջի սխալի վավերացում - սխալի վավերացում
    • Որոնման արդյունքներ - ստուգեք դինամիկ բովանդակությունը

• Հետադարձ կապ VS. Խոստումներ.

  • Web Driver IO- ի 3 -րդ տարբերակը աջակցում է ինչպես հետ կանչերին, այնպես էլ խոստումներին:

    Խոստումները նախընտրելի մեթոդ են, քանի որ այն նվազեցնում է սխալի մշակման ծածկագիրը: Խնդրում ենք ստորև տեսնել նույն օրինակը, որը գրված է հետադարձ կապերի և խոստումների միջոցով:

Հետադարձ կապեր

// Սահմանել/հաստատել անունը/ազգանունը հետադարձ կապի միջոցով

այն ('պետք է սահմանի/հաստատի անունը/ազգանունը `օգտագործելով Callbacks'), գործառույթը (ավարտված է) {driver.setValue ("#fname "," Tony ", function (e) {driver.getValue ("#fname ", function (err, ե) {(ե).should.be.equal («Tony»); console.log («Անուն ՝« + e); driver.setValue («#lname», «Keith», գործառույթ (ե) { driver.getValue ("#lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Ազգանուն ՝" + e); արված ();});});});});});

Խոստումներ

// Սահմանել/հաստատել անունը/ազգանունը `օգտագործելով Խոստումներ

այն ('պետք է սահմանել/հաստատել անունը/ազգանունը `օգտագործելով Խոստումները'), գործառույթը () {return driver.setValue ("#fname "," Tony ").getValue ("#fname "). այնուհետև (գործառույթը (ե) {(ե).should.be.equal («Թոնի»); console.log («Անուն ՝" + ե);}).setValue ("#lname", "Keith").getValue ("#lname"): ապա (գործառույթ (ե) {(ե).should.be.equal ("Keith"); console.log ("Ազգանուն ՝" + ե);});});

Քայլ 7: Լրացուցիչ ռեսուրսներ

Ահա որոշ լրացուցիչ ռեսուրսներ ձեր տեղեկանքի համար.

• Քննարկման խմբեր (Gitter)

  • Web Driver IO քննարկման խումբ
  • Mocha քննարկման խումբ

• Այլ հետաքրքիր նախագծեր

  • Supertest - HTTP պնդումներ
  • Չայ - պնդումներ

Քայլ 8: Եզրակացություն

Ես որոշ ժամանակ ուսումնասիրեցի տեխնոլոգիաները, որոնք պետք է օգտագործվեին իմ նախագծի համար: Սկզբում ես սկսեցի Selenium Web Driver- ով, բայց անցա Web Driver IO- ի օգտագործմանը: Թվում էր, թե Web Driver IO- ն ավելի հեշտ է օգտագործել և շատ ավելի հեշտ է ընդլայնել (համենայն դեպս, երկարաձգման վերաբերյալ փաստաթղթերն ավելի լավն էին):

Երբ ես առաջին անգամ սկսեցի նայել տեխնոլոգիաներին, դժվար էր գտնել լավ օրինակներ, որոնք հարաբերական էին այն ամենին, ինչ ես փորձում էի անել: Սա է պատճառը, որ ես ուզում էի կիսվել այս տեղեկատվությամբ և գիտելիքներով ձեզ հետ:

Տեխնոլոգիաները շատ ավելի լավ աշխատեցին, քան ես սպասում էի, սակայն դրանում ներգրավված էր ուսուցման կորը: Երբ ես հասկացա, թե ինչպես են բոլոր բաղադրիչները աշխատում միասին, ես կարողացա շատ կարճ ժամանակում գրել բարդ թեստային սցենարներ: Ամենադժվար սցենարները JavaScript- ի վրա հիմնված բաղադրիչներն էին, ինչպիսիք են ամսաթիվը ընտրողը և մոդալ ընտրողները:

Ես երբեք ինձ չեմ պիտակավորել որպես JavaScript- ի մշակող, ոչ էլ ցանկացել եմ լինել JavaScript- ի փորձագետ, բայց այս տեխնոլոգիաների օգտագործումը միանշանակ դրդել է ինձ կատարելագործել իմ JS հմտությունները:

Հուսով եմ, որ այս հոդվածը օգտակար է, և օրինակները պարզ և տեղեկատվական են:

Խնդրում եմ ինձ տեղյակ պահել, եթե ունեք որևէ հարց կամ մեկնաբանություն:

Շնորհակալություն, Թոնի Քիթ