Canlı Sürücü Veb Saytı və İş Nümunələrindən İstifadə Veb Sürücüsü IO Təlimatı: 8 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:47

Canlı Sürücü Veb Saytı və İş Nümunələrindən istifadə edərək Veb Sürücüsü IO Dərsliyi

Son Yeniləmə: 26.07.2015

(Bu təlimatları daha ətraflı və nümunələrlə yeniləyərkən tez -tez yoxlayın)

Fon

Bu yaxınlarda mənə maraqlı bir problem gəldi. Çox az texniki təcrübəsi olan və proqramlaşdırma təcrübəsi olmayan Q/A şöbəsinə avtomatlaşdırılmış test tətbiq etməliydim.

Bu, həqiqətən də iki ayrı problem idi. Birincisi, avtomatlaşdırılmış sınağı həyata keçirəcək texnologiyaları müəyyən etmək idi. İkincisi, Q/A şöbəsini hazırlamaq idi.

Məqalədə yalnız istifadə olunan texnologiyalara və prosesdə öyrəndiklərimə toxunulacaq.

Texnologiyalar yaxşı işləyirdi, amma həqiqətən məlumat axtarmalı oldum və problemləri həll etmək üçün çox saat sərf etdim.

Hamısı birlikdə işləyən bu texnologiyalar haqqında İnternetdə məlumat tapmaqda çətinlik çəkdim.

Bu məlumatı bölüşmək istədim, buna görə də bu məqaləni işləyən nümunə test skriptləri və skriptləri işə salmaq üçün bir test veb saytı ilə birlikdə yazdım.

Bütün test skriptləri github -da tapıla bilər və işləyən test saytı Web Driver IO Tutorial Test Saytında yerləşir

Ümid edirəm faydalı hesab edirsiniz. Əgər edirsinizsə, mənə bildirin.

Məqsədlər Texnologiyalardan istifadə etmək üçün:

• Veb saytın funksionallığını yoxlayın
• JavaScript funksionallığını sınayın
• Əl ilə idarə oluna bilər
• Avtomatik olaraq işləyə bilər

• Proqramçı olmayanlar üçün dil öyrənmək asandır

  HTML və JavaScript haqqında əsas biliklərə sahib olan S/A işçiləri

• Yalnız açıq mənbə proqramlarından istifadə edin

Texnologiyalar

Seçdiyim texnologiyaların siyahısı:

• mocha - test runner - test skriptlərini icra edir
• mustjs - təsdiq kitabxanası
• webdriverio - brauzerə nəzarət bağlamaları (dil cildləri)
• selenium - brauzer abstraksiyası və işləyən fabrik

• Brauzer/Mobil sürücülər + brauzerlər

  • Firefox (yalnız brauzer)
  • Chrome (Brauzer və sürücü)
  • IE (Brauzer və sürücü)
  • Safari (Brauzer və sürücü plagini)

Addım 1: Proqramın Quraşdırılması

Başlamaq üçün Node JS, Web Driver IO, Mocha, Should və Selenium tək başına bir server quraşdırmalısınız.

Burada Windows 7 üçün quraşdırma təlimatları verilmişdir.

(Mən Mac/Linux istifadəçisiyəm amma hər şeyi Windows 7 maşınlarına yükləməli oldum, buna görə də onu istinad üçün əlavə etdim. Mac/Linux -da quraşdırma proseduru oxşardır. Daha çox məlumat üçün onlayn arayışlarla məsləhətləşin. məlumat.)

Brauzerdən:

• NPM (Node Package Manager) daxil olan Node qurun

• https://nodejs.org/ saytına daxil olun

  • Quraşdırma düyməsini basın
  • Fayl saxla və işləd
  • Yolu və dəyişəni təyin edin (NODE_PATH)

  • İdarəetmə Paneli-Sistem və Təhlükəsizlik-Sistemə gedin

    • Ətraflı Sistem Ayarları

    • Ətraf Mühit Ayarı (İstifadəçi dəyişənləri)

      • PATH -a əlavə edin

        C: / İstifadəçilər {USERNAME} AppData / Rominq / npm;

      • NODE_PATH (Sistem dəyişənləri) əlavə edin

        C: / İstifadəçilər {USERNAME} AppData / Rouminq / npm / node_modules

Qeyd: Aşağıdakı bütün proqramları npm qlobal seçimini (-g) istifadə edərək qurdum. Bu ümumiyyətlə tövsiyə edilmir, amma bir çox layihədə istifadə ediləcəyi üçün bu quruluşu qlobal səviyyədə qurmalıydım.

Əmr əmrini açın (cmd):

(yerli istifadəçi idarəçisi)

• Selenium "web driver IO" qurun

  • npm webdriverio -g quraşdırın

    Bu, veb sürücüsü IO -nu bütün dünyada maşınınıza quraşdıracaq

• "Mocha" test runner proqramını quraşdırın

  • npm mocha -g quraşdırın

    Bu, mocha -nı qlobal miqyasda maşınınıza quraşdıracaq

• "Lazımdır" təsdiq kitabxanasını quraşdırın

  • npm -g yükləməlidir

    Bu, qlobal miqyasda maşınınıza "lazım" yükləyəcək

• Selenium Stand Alone Serverini quraşdırın

  • Http://www.seleniumhq.org/download/ ünvanına daxil olun
  • Jar faylını yükləyin və "selenium" qovluğuna keçin.

• Test etmək üçün brauzerləri və brauzer sürücülərini quraşdırın

  • Cmd əmrindən:

    • "Selenium" qovluğunu yaradın
    • C: / İstifadəçilər {USERNAME} selenium

    • Əmrlər:

      • cd C: / İstifadəçilər {USERNAME}
      • mkdir selenium

    • Firefox

      • Firefox brauzerini quraşdırın, hələ quraşdırılmamışdır.
      • Yol, Firefox -u əmr satırından (cmd) başlatmaq üçün qurulmalıdır.

      • İdarəetmə Paneli-> Sistem və Təhlükəsizlik-> Sistem

        • Ətraflı Sistem Ayarları
        • Ətraf mühit parametrləri
        • Yol Dəyişəninə (istifadə nöqtəli nöqtəni əlavə edin) əlavə edin
        • C: / Proqram Faylları (x86) Mozilla Firefox
      • Firefox üçün xüsusi bir veb sürücüsünə ehtiyac yoxdur.

    • Xrom

      • Hələ quraşdırılmamışsa, Chrome brauzerini quraşdırın.
      • Yol, Chrome -u əmr satırından (cmd) başlatmaq üçün qurula bilər.
      • Əvvəlcə sınayın: əmr satırından chrome.exe (cmd)
      • Xrom başlamazsa:

      • İdarəetmə Paneli-> Sistem və Təhlükəsizlik-> Sistem

        • Ətraflı Sistem Ayarları
        • Ətraf mühit parametrləri
        • Yol Dəyişəninə (istifadə nöqtəli nöqtəni əlavə edin) əlavə edin
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Chrome üçün xüsusi bir veb sürücüsü lazımdır.

        Chromium.org saytına daxil olun və 32 bit sürücüsünü "selenium" qovluğuna açın

    • Internet Explorer (yalnız Windows üçün - digər platformalarda işləməyəcək)

      • IE üçün xüsusi bir veb sürücüsü lazımdır.

        • Http://www.seleniumhq.org/download/ ünvanına daxil olun
        • 64 bitlik sürücünü "selenium" qovluğuna yükləyin və açın.

Addım 2: Əsas Test Script

Bəzi əsaslarla başlayaq.

Bir veb saytı açacaq və başlığını təsdiqləyəcək sadə bir mocha skriptidir.

// tutorial1.js

// // Bu veb saytı açmaq və // başlığı təsdiq etmək üçün sadə bir sınaq skriptidir. // tələb olunan kitabxanalar var webdriverio = tələb ('webdriverio'), lazım = tələb ('lazımdır'); // bir test skript bloku və ya paketi təsvir edir ('Veb Sürücüsü IO üçün Başlıq Testi - Dərslik Test Səhifəsi Veb saytı', function () {// zaman aşımını this.timeout (10000) 10 saniyə olaraq təyin edin; var driver = {}; // əvvəl testlərdən əvvəl çalışmaq üçün çəngəl (funksiya (tamamlandı) {// brauzerin sürücüsünü yükləyin = webdriverio.remote ({arzuolunan imkanlar: {browserName: 'firefox'}}); driver.init (bitdi);}); // bir test spesifikasiyası - "spesifikasiya" bu ('düzgün səhifə və başlıq yüklənməlidir', function () {// səhifəni yüklə, sonra funksiyanı () sürücüyə qaytar.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // başlıq alın, sonra başlığı funksiyaya keçirin ().getTitle (). sonra (funksiya (başlıq) {// başlığı yoxlayın (başlıq).should.be.equal ("Veb Sürücü IO - Dərslik Test Səhifəsi "); // konsol ayıklama üçün şərh verməmək // console.log ('Mövcud Səhifə Başlığı:' + başlıq);});}); // bu blokdakı bütün testlərdən sonra (" funksiyası) {driver.end (bitdi);});});

Müşahidələr:

• Əvvəlcə test skriptinin JAVASCRIPT (.js uzantısı ilə bitdiyi) ilə yazıldığını görməlisiniz.

• Əsas quruluş bütün test skriptləri üçün demək olar ki, eynidir.

  • Başlıq Şərhləri (//)
  • Lazımi kitabxanalar
  • Seçimləri təyin edin (isteğe bağlı)
  • Çəngəl: Brauzer Sürücüsünü Yükləyin
  • Test Paketi (təsvir edin)
  • Test Xüsusiyyətləri (bir Suite -də bir çox xüsusiyyət ola bilər)
  • Çəngəl: Təmizləyin

• Test paketi iki parametrdən ibarət olan təsvir funksiyası ilə başlayır:

  • String - Test paketinin təsviri

    • "Səhifəni düzgün tərtib etmək üçün yoxlayın"
    • "Radio düymələrinin işini yoxlayın"

  • funksiya - icra etmək üçün kod bloku

    təsvir edin ('Test paketinin təsviri', function () {});

• Test paketində 1 və ya daha çox test spesifikasiyası (spesifikasiya) olacaq

• Xüsusiyyətlər, iki parametr götürən funksiyası ilə başlayır:

  • String - Test spesifikasiyasının təsviri

    • "Bağlantı mətni və bağlantı URL -si düzgün olmalıdır"
    • "Doğru sözlər olmalıdır (kopya göyərtəsi)
  • funksiya - icra etmək üçün kod bloku
  • it ('Test spesifikasiyasının təsviri', function () {});
• Xüsusi kodun vəziyyətini sınayan bir və ya daha çox gözləntini ehtiva edir

• Bunlara iddialar deyilir

  "Lazımdır" kitabxanası iddiaları təmin edir

• Demək olar ki, bütün hallarda, bir seçicidən istifadə edərək bir və ya daha çox elementi tapmalısınız, sonra elementlər üzərində bəzi əməliyyatlar aparmalısınız.

  • Nümunələr:

    • Səhifədə mətn tapın və mətni yoxlayın
    • Bir forma doldurun və göndərin
    • Bir elementin CSS -ni yoxlayın

Şərhli nümunəyə daha yaxından baxaq

Lazım olan kitabxanaları yükləyin: veb sürücüsü IO və olmalıdır.

// tələb olunan kitabxanalar

var webdriverio = tələb ('webdriverio'), lazım = tələb ('lazımdır');

Test paketini təyin edin. Bu paketin adı belədir: "Web Driver IO üçün Title Test - Tutorial Test Page Website"

// test skript bloku və ya dəsti

təsvir edin ('Veb Sürücüsü IO üçün Başlıq Testi - Tutorial Test Səhifəsi Veb Saytı', function () {…});

Səhifəni yükləyərkən skriptin vaxtı bitməməsi üçün zaman aşımını 10 saniyəyə təyin edin.

// zaman aşımını 10 saniyəyə təyin edin

this.timeout (10000);

"Xüsusiyyətlər" xüsusiyyətlərini işə salmadan əvvəl brauzer sürücüsünü yükləyin. Bu nümunədə Firefox sürücüsü yüklənir.

// testlərdən əvvəl işə salın

əvvəl (funksiya (tamamlandı) {// brauzerin sürücüsünü yükləyin = webdriverio.remote ({arzuolunan imkanlar: {browserName: 'firefox'}}); driver.init (bitdi);});

Test spesifikasiyasını müəyyənləşdirin.

// bir test spesifikasiyası - "spesifikasiya"

it ('düzgün səhifə və başlıq yüklənməlidir', function () {…});

Veb sayt səhifəsini yükləyin

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

Başlıq alın, sonra başlığı funksiyaya keçirin ()

.getTitle (). sonra (funksiya (başlıq) {

… });

Must təsdiq kitabxanasından istifadə edərək başlığı yoxlayın.

(başlıq).should.be.equal ("Veb Sürücü IO - Dərslik Test Səhifəsi");

Sürücünü işdən çıxarmaq və təmizləmək üçün çəngəl.

// bu blokdakı bütün testlərdən sonra işə salınacaq "çəngəl"

sonra (funksiya (tamamlandı) {driver.end (tamamlandı);});

Addım 3: Test Skriptini işə salın

İndi test skriptinin işə salındıqda nə etdiyini görək.

Əvvəlcə Selenium Stand Alone Serverini işə salın:

• Windows üçün əmr satırını (cmd) istifadə edin:

  • java -jar
  • # java -jar selenium-server-bağımsız-2.46.0.jar

• Mac və ya Linux üçün terminal açın:

  • java -jar
  • $ java -jar selenium-server-bağımsız-2.46.0.jar
• Yuxarıdakı ekran görüntüsünə baxın

Sonra test skriptini işə salın:

• Windows üçün əmr satırını (cmd) istifadə edin:

  • mocha
  • # mocha tutorial1.js

• Mac və ya Linux üçün terminalı açın:

  • mocha
  • $ mocha tutorial.js
• Yuxarıdakı ekran görüntüsünə baxın

Bəs nə oldu?

Mocha "tutorial1.js" skriptini çağırır. Sürücü brauzeri (Firefox) işə saldı, səhifəni yüklədi və adı təsdiqlədi.

Addım 4: Nümunə Veb Sayt

Bütün nümunələr bu saytın əleyhinə aparılır.

Nümunə veb sayt: Web Driver IO Tutorial Test Səhifəsində yerləşir

Bütün test skriptləri github -dan yüklənə bilər.

Addım 5: Xüsusi Nümunələr

Bütün kodlar github -da mövcuddur: github -da Web Driver IO Tutorial

• Sınaqsız bir siyahıda Link və Link Mətnini yoxlayın - "linkTextURL1.js"

  • Sıralanmamış siyahıda bir var və bağlantı 4 -cü siyahı maddəsidir.
  • URL "https://tlkeith.com/contact.html" olmalıdır

// Bizimlə Əlaqə linkinin mətnini yoxlayın

it ('Bizimlə Əlaqə linki mətni olmalıdır'), function () {qayıt sürücü.getText ("// ul [@id = 'siyahım']/li [4]/a"). sonra (funksiya (link) {konsol.log ('Bağlantı tapıldı:' + keçid); (link).should.equal ("Bizimlə Əlaqə");});}); // Bizimlə Əlaqə URL'sini Doğrula ('Əlaqə URL'sini ehtiva etməlidir', function () {return driver.getAttribute ("// ul [@id = 'mylist']/li [4]/a", "href").sonra (funksiya (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL tapıldı:' + link);});});

• Müəllif Hüquqları Mətnini Doğrulayın - "Copyright1.js"

  • Müəlliflik hüququ altbilgidədir Bu nümunə, müəllif hüquqları mətnini tapmağın 2 fərqli yolunu göstərir:

    • element seçici olaraq
    • element seçici olaraq xpath istifadə edərək

// Element seçici olaraq id istifadə edərək Müəllif Hüquqları mətnini yoxlayın

it ('Müəlliflik hüququ mətni olmalıdır'), function () {qayıt sürücüsü.getText ("#müəllif hüquqları"). sonra (funksiya (link) {konsol.log ('Müəlliflik hüququ tapıldı:' + link); (keçid). bərabər ("Tony Keith - tlkeith.com @ 2015 - Bütün hüquqlar qorunur.");});}); // Element seçici olaraq xpath istifadə edərək Müəllif Hüquqları mətnini yoxlayın ('Müəllif Hüquqları mətni olmalıdır'), function () {return driver.getText ("// footer/center/p"). Sonra (funksiya (link) {console.log ('Müəlliflik hüququ tapıldı:' + link); (link).should.equal ("Tony Keith - tlkeith.com @ 2015 - Bütün hüquqlar qorunur.");});});

• Forma sahələrini doldurun və göndərin - "formFillSubmit1.js"

  • Adı, soyadı doldurun və göndərin, sonra nəticəni gözləyin.

  • Bu nümunə, ad giriş sahəsini doldurmağın 3 üsulunu göstərir:

    • id ilə
    • girişdən xpath ilə
    • forma-> girişdən xpath ilə
  • Bir giriş sahəsinin necə təmizlənəcəyini də göstərir

// id istifadə edərək ilk adı təyin edin: Tony

it ('ilk adı Tony olaraq təyin etməlidir'), function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). sonra (function (e) {(e).should.be.equal ("Tony"); console.log ("Ad:" + e);});}); // Id it istifadə edərək adı silin ('adı silməli', function () {return driver.clearElement ("#fname").getValue ("#fname"). Sonra (funksiya (e) {(e).should.be.equal (""); console.log ("Ad:" + e);});}); // Girişdən xpath istifadə edərək adı təyin edin: Tony it ('adı Tony olaraq təyin etməlidir'), function () {return driver.setValue ("// input [@name = 'fname']", "Tony")).getValue ("// giriş [@adı = 'fname']")). sonra (funksiya (e) {(e).should.be.equal ("Tony"); console.log ("Ad:" + e);});}); // Girişdən xpath istifadə edərək adı silin ('adı silməlidir', function () {return driver.clearElement ("// input [@name = 'fname']")).getValue ("// input [@adı = 'fname'] ")). sonra (funksiya (e) {(e).should.be.equal (" "); console.log (" Ad: " + e);});}); // Formadan xpath istifadə edərək adı təyin edin: Tony it ('adını Tony olaraq təyin etməlidir'), function () {return driver.setValue ("// form [@id = 'search-form']/input [1] "," Tony ").getValue (" // form [@id = 'search-form']/input [1] "). Sonra (funksiya (e) {(e).should.be.equal ("Tony"); console.log ("Ad:" + e);});}); // Id istifadə edərək soyadı təyin edin: Keith it ('soyadı Keith olaraq təyin etməlidir'), function () {return driver.setValue ("#lname", "Keith").getValue ("#lname") sonra (funksiya (e) {(e).should.be.equal ("Keith"); console.log ("Soyad:" + e);});}); // Formu göndərin və axtarış nəticələrini gözləyin ('forma təqdim etməli və nəticələr gözləməlidir', function () {return driver.submitForm ("#search-form"). Sonra (function (e) {console.log (') Axtarış Formu Göndər ');}).waitForVisible ("#search-results", 10000). Sonra (function (e) {console.log (' Search Results Found ');});});

• Göstər/Gizlət Düyməsini basın və Mətni Doğrulayın - "showHideVerify1.js"

  • Mətn göstər/gizlət elementindədir. Düymə vəziyyəti idarə edir.

  • Bu nümunə göstərir:

    • Genişləndirmək üçün düyməni basın
    • Elementin görünməsini gözləyin (genişləndirilmiş)
    • Mətni yoxlayın (göyərtəni kopyalayın)

// "Daha çox məlumat" düyməsini basın və genişləndirilmiş elementdəki mətni yoxlayın

it ('daha çox məlumat düyməsini basmalı və mətni yoxlamalıdır'), function () {sürücüyə qayıt. tıkla ("#daha çox məlumat") ("#collapseExample", 5000).getText ("// div [@id = 'collExample']/div"). sonra (funksiya (e) {console.log ('Mətn:' + e); (e).should.be.equal ("Yaxşı olanların hamısı bura gedir!");});});

• Form Sahə Səhvlərini Doğrula - "formFieldValidation.js"

  • Düzgün səhv mesajlarının yaradıldığını yoxlamaq üçün test skriptlərindən istifadə edin.

  • Bu nümunə göstərir:

    Səhv mətn mesajlarını yoxlayın və yeri yoxlayın (sıralanmamış siyahı mövqeyi)

it ('5 səhvdən ibarət olmalıdır: birinci/son/ünvan/şəhər/əyalət', function () {

qayıt sürücü.getText ("// ul [@class = 'alert alert-təhlükə']/li [1]"). sonra (function (e) {console.log ('Hata tapıldı:' + e); (e).should.be.equal ('Zəhmət olmasa adınızı daxil edin');}).getText ("// ul [@class = 'alert alert-təhlükə']/li [2]"). sonra (funksiya (e) {console.log ('Xəta tapıldı:' + e); (e).should.be.equal ('Zəhmət olmasa soyad daxil edin');}).getText ("// ul [@class = 'alert alert-təhlükə ']/li [3] ")). sonra (funksiya (e) {console.log (' Xəta tapıldı: ' + e); (e).should.be.equal (' Zəhmət olmasa ünvanı daxil edin ');}). getText ("// ul [@class = 'alert alert-təhlükə']/li [4]"). sonra (function (e) {console.log ('Error found:' + e); (e).should.be.equal ('Zəhmət olmasa şəhər daxil edin');}).getText ("// ul [@class = 'alert alert-təhlükə']/li [5]"). sonra (funksiya (e) {console.log ('Xəta tapıldı:' + e); (e).should.be.equal ('Zəhmət olmasa vəziyyəti daxil edin');}); });

• URL Bağlantısını/Mətnini/Səhifəsini Doğrulamaq üçün Məlumatları Döngələmək - "LoopDataExample1.js"

  • Bu nümunə göstərir: Linki və adı saxlamaq üçün bir sıra JSON məlumatlarından istifadə edin, sonra təkrarlayın

    • Hər bir URL mətnini və bağlantısını yoxlayın
    • Linki vurun və səhifəni yükləyin

// Bağlantı məlumatları - keçid və mətn

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 "," ad ":" 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 "," ad ":" callbackPromise.js "}, {" bağlantı ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," ad ": "debu gExample1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFieldValidation.js "," name ":" formFieldValidation.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/common/commonLib.js "," name ":" commonLib.js "}, {" link ":" https://github.com/onewithhammer/ WebDriverIOTutorial/blob/master/dataLoopExample1.js "," name ":" dataLoopExample1.js "}]; … // hər linkdən keçinArray linkArray.forEach (funksiya (d) {it ('mətn/keçid olmalıdır, sonra goto səhifəsi -' + d.name, funksiya () {qayıdış sürücüsü // başlanğıc səhifədə olduğunuzdan əmin olun.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). sonra (funksiya (başlıq) {// başlığı (başlığı) yoxlayın.should.be.equal ("Veb Sürücü IO - Tutorial Test Səhifəsi ");}) // URL tapın.getAttribute ('a =' + d.name," href "). Sonra (funksiya (link) {(link).should.equal (d.link); console.log ('URL tapıldı:' + d.link);}) // URL səhifəsinə keçin və mövcud olduğunu yoxlayın. basın ('a =' + d.name).waitForVisible ("#js-repo-pjax- konteyner ", 10000). sonra (function () {console.log ('Github Səhifəsi Tapıldı');});});});

• Forma sahələrini doldurmaq üçün Statik Məlumatların Dönüşülməsi - "loopDataExample2.js"

  • Bu nümunə göstərir: Ad/soyadı saxlamaq üçün bir sıra JSON məlumatlarından istifadə edin

    • Forma sahələrini doldurmaq üçün məlumatları nəzərdən keçirin, sonra formanı göndərin
    • Nəticələr səhifəsini gözləyin
    • Nəticələr səhifəsində ad / soyadı təsdiq edin

// məlumat dizisi - firstName və lastNamevar dataArray = [{"ilk ad": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // hər dataArray dataArray.forEach (funksiya (d) {it ('sahələri doldurmalı, sumbit səhifəsi', funksiya () {geri dönən sürücü // başlanğıc səhifəsində olduğunuzdan əmin olun.url ('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). sonra (funksiya (başlıq) {// başlığı (başlığı) yoxlayın.should.be.equal ("Veb Sürücüsü IO - Dərslik Test Səhifəsi");}).setValue ("#fname", d.firstName).getValue ("#fname"). sonra (function (e) {(e).should.be.equal (d.firstName); console.log ("First) Ad: " + e);}).setValue ("#lname ", d.lastName).getValue ("#lname "). Sonra (function (e) {(e).should.be.equal (d.lastName)); console.log ("Soyad:" + e);}).submitForm ("#axtarış formu"). sonra (function () {console.log ('Axtarış Formu Göndər');}).waitForVisible ("#search-results", 10000). sonra (function () {console.log ('Nəticə Səhifəsi Tapıldı');}).getText ("// h1"). sonra (funksiya (link) {console.log ('Mətn tapıldı:' + link);

• CSS xüsusiyyətlərini yoxlayın - "cssValidation1.js"

  • Bu nümunə necə ediləcəyini göstərir:

    • Aşağıdakı CSS xüsusiyyətlərini təsdiq edin:

      • rəng
      • doldurma (yuxarı, aşağı, sağ, sol)
      • fon rəngi

it ('səhv mətninin düzgün rəngini ehtiva etməlidir'), function () {return driver.getCssProperty ("// ul [@class = 'alert alert-təhlükə']/li [1]", "color"). sonra (funksiya (nəticə) {console.log ('Rəng tapıldı:' + result.parsed.hex + "və ya" + result.value); (result.parsed.hex).should.be.equal ('#a94442'); });});

it ('cədvəl hücrəsində düzgün doldurma olmalıdır'), function () {

dönüş sürücüsü // doldurma: yuxarı sağ alt sol.getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding-top"). sonra (funksiya (nəticə) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1] "," padding-bottom "). sonra (funksiya (nəticə) {console.log ('padding-bottom found:' + nəticə.dəyəri); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@id = 'filelist']/thead/tr [1]/td [1]", "padding- sağ "). sonra (funksiya (nəticə) {console.log ('padding-right found:' + nəticə.dəyəri); (result.value).should.be.equal ('5px');}).getCssProperty ("// masa [@id = 'filelist']/thead/tr [1]/td [1]", "padding-left"). sonra (funksiya (nəticə) {console.log ('padding-left found: ' + nəticə.dəyəri); (nəticə.dəyəri). bərabər olmalıdır (' 5px ');}); });

it ('masa başlığında düzgün fon rəngi olmalıdır'), function () {

qayıt sürücü.getCssProperty ("// table [@id = 'filelist']/thead", "background-color"). sonra (funksiya (nəticə) {console.log ('fon rəngi tapıldı:' + nəticə.parsed. hex); (nəticə.parsed.hex). bərabər olmalıdır ('#eeeeee');}); });

Addım 6: göstərişlər və fəndlər

• Hata Ayıklama:

  • Daha çox ayıklama və qeydlər yaratmaq üçün sürücü səviyyəsində girişi aktiv edin.

    • LogLevel -i 'ətraflı' olaraq təyin edin
    • LogOutput'u qovluq adına təyin edin ('logs')

sürücü = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs', {arzuolunan imkanlar: {browserName: 'firefox'}});

• Ayıklamak üçün console.log (), debug (), getText () istifadə edin.

  • console.log () - Vəziyyəti təyin etmək üçün məlumatları göstərmək üçün istifadə edin.
  • debug () - əmr satırında enter düyməsinə basılana qədər pauza/brauzerdən istifadə edin.

  • getText () - Doğru elementlə qarşılıqlı əlaqədə olduğunuzu yoxlamaq üçün istifadə edin.

    Xüsusilə xpath ifadələrində faydalıdır

// Siyahıdan 3 -cü maddəyə vurun

it ('siyahıdan 3 -cü maddəyə klikləməlidir'), function () {// xPath -in element qaytarma sürücüsü üçün doğru olduğunu yoxlamaq üçün getText () istifadə edin.getText ("// ul [@id = 'mylist']/li [3]/div/div/a "). Sonra (funksiya (link) {// konsol.log məlumatlarını çıxarmaq üçün console.log () istifadə edin ('Bağlantı tapıldı:' + keçid); (bağlantı).should.equal ("Maddə 3");}) // brauzerdə baş verənləri görmək üçün hərəkəti dayandırmaq üçün debug () istifadə edin.debug (). Klikləyin ("// ul [@id = 'mylist']/li [3] /div/div/a").then (function () {console.log ('Link tıklandı');}) // google axtarış formasının görünməsini gözləyin.waitForVisible ("#tsf", 20000). sonra (funksiya (e) {console.log ('Axtarış Nəticələri Tapıldı');});});

• Brauzeri Dinamik Dəyişdirmək üçün Ətraf Mühit Dəyişənindən istifadə edin:

  • Hər dəfə test skriptini dəyişdirmədən fərqli bir brauzer çağırmaq üçün SELENIUM_BROWSER mühit dəyişənindən istifadə edin.
  • Dəstəkləmək üçün kiçik bir kodlaşdırma dəyişikliyi tələb olunur.

Kod Dəyişiklikləri:

// brauzer üçün sürücünü yükləyin

sürücü = webdriverio.remote ({arzuolunan imkanlar: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Dəstəklənən Tarayıcılar:

• Internet Explorer - IE 8+ (Yalnız Windows)

  SELENIUM_BROWSER = yəni mocha

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER = firefox mocha

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER = xrom mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Test:

• Windows üçün git bash shell istifadə edin:

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

• Mac və ya Linux üçün terminalı açın:

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

• Həssas Test:

  • Layihəyə və ya çərçivəyə (yəni önyükləmə zolağına) əsaslanaraq kəsmə nöqtələrini təyin edin.

  • Hər kəsmə nöqtəsi üçün mühit dəyişənlərini təyin edin:

    • MASAÜSTÜ - 1200 piksel
    • TABLET - 992 piksel
    • MOBİL - 768 piksel

  • Ətraf mühit dəyişənini oxumaq və brauzer ölçüsünü təyin etmək üçün təkrar istifadə edilə bilən bir əmr hazırlayın.

    Aşağıdakı nümunəyə baxın

  • Test skriptinizdə təkrar istifadə edilə bilən əmri çağırın.

// təkrar istifadə edilə bilən kod - kitabxana // kod parçası, əgər (bp == "MASAÜSTÜ") {obj.width = 1200; obj.height = 600; obj.name = bp; } başqa əgər (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } başqa əgər (bp == "MOBİL") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Test skript

əvvəl (funksiya (bitmiş) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (sürücü));} // pəncərə ölçüsünü təyin edin ('pəncərə ölçüsünü təyin etməlidir', funksiya (bitmiş) {// yalnız genişlik sürücü.setWindowSize (winsize.width, winsize.height, function () {}) vacibdir.

• Yenidən istifadə edilə bilən əmrlər (Xüsusi əmrlər):

  • Web Driver IO asanlıqla uzadılır.
  • Yenidən istifadə edilə bilən bütün əmrləri kitabxanaya yerləşdirməyi sevirəm. (bəlkə də bu köhnə məktəbdir, amma işləyir!)

ümumi/commonLib.js

// verifyLastNameCheckError ()

// // Təsvir: // Soyad forması doğrulama xətası mesajını yoxlayır // // Giriş: // sayı - səhv indeksi (1-5) // Çıxış: // yox // var verifyLastNameCheckError = funksiya () { var idx = arqumentlər [0], geri zəng = arqumentlər [argument.length - 1]; bu.getText ("// ul [@class = 'alert alert-təhlükə']/li [" + idx + "]", funksiyası (səhv, e) {console.log ('Hata tapıldı:' + e); (e).should.be.equal ('Zəhmət olmasa soyad daxil edin');}). zəng edin (geri zəng); }; // module.exports.verifyLastNameCheckError = verifyLastNameCheckError funksiyasını ixrac edin;

Yenidən istifadə edilə bilən bir funksiyanı çağırmaq üçün lazım olan xüsusi dəyişikliklər

Tam iş nümunəsi üçün formFieldValidation.js -ə baxın

// təkrar istifadə edilə bilən əmr tələb olunur - CommonLib

ümumi = tələb ('./ Common/CommonLib'); … // driver.addCommand ('verifyFirstNameError', common.verifyFirstNameCheckError.bind (sürücü)) əmrlərini bağlayın; driver.addCommand ('verifyLastNameError', common.verifyLastNameCheckError.bind (sürücü)); it ('2 səhv olmalıdır: ad/soyad', function () {// təkrar istifadə edilə bilən funksiya sürücüsünə zəng edin.verifyFirstNameError (1);.verifyLastNameError (2);});

• Layihə Fayl/Kataloq Quruluşu:

  • Burada tipik bir layihə quruluşu var:

    • "Layihə" - əsas layihə qovluğu

      • README.md - qlobal layihə üçün oxu

      • "Ümumi" - bütün layihələr üçün ümumi olan qlobal funksiyalar üçün kataloq

        • common -lib.js - qlobal funksiyalar kitabxanası
        • README.md - qlobal funksiyalar üçün readme

      • "Product1" - məhsul 1 üçün kataloq

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

        • "Ümumi" - layihə 1 üçün yerli funksiyalar üçün kataloq

          • prod1 -lib.js - layihə 1 üçün yerli funksiyalar kitabxanası
          • README.md - 1 layihəsinin yerli funksiyaları üçün readme

      • "Product2"-məhsul 2test-script1.jstest-script2.js üçün kataloq

        • "Ümumi" - 2 -ci layihə üçün yerli funksiyalar üçün kataloq

          • prod2 -lib.js - layihə 2 üçün yerli funksiyalar kitabxanası
          • README.md - 2 -ci layihə üçün yerli funksiyalar üçün readme

• Test skriptlərini birdən çox fayla bölün:

  • Budur birdən çox fayldan istifadə nümunəsi:

    • Sağlamlıq yoxlaması - hər şeyin işlədiyini yoxlamaq üçün əsas test skriptidir
    • Statik Element və Mətn Doğrulama - bütün elementləri və mətni yoxlayın
    • Forma/Səhifə Səhv Doğrulaması - xətanın yoxlanılması
    • Axtarış Nəticələri - dinamik məzmunu sınayın

• Zənglər VS. Vədlər:

  • Web Driver IO -nun 3 -cü versiyası həm zəngləri, həm də vədləri dəstəkləyir.

    Səhv işləmə kodunu azaltdığı üçün vədlər üstünlük verilən üsuldur. Zənglərin və vədlərin köməyi ilə yazılmış eyni nümunəyə aşağıda baxın.

Zənglər

// Geri çağırışdan istifadə edərək ad/soyadı təyin edin/yoxlayın

it ('Geri çağırışlardan istifadə edərək ad/soyadı təyin etməli/yoxlamalı', funksiyası (bitmiş) {driver.setValue ("#fname", "Tony", funksiya (e) {driver.getValue ("#fname", funksiya (səhv), e) {(e).should.be.equal ("Tony"); console.log ("Ad:" + e); driver.setValue ("#lname", "Keith", funksiya (e) { driver.getValue ("#lname", funksiya (səhv, e) {(e).should.be.equal ("Keith"); console.log ("Soyad:" + e); bitmiş ();});});});});});

Vədlər

// Promises istifadə edərək ad/soyad təyin edin/yoxlayın

it ('Promises istifadə edərək ad/soyadı təyin etməli/yoxlamalıdır'), function () {return driver.setValue ("#fname", "Tony").getValue ("#fname"). sonra (function (e) {(e).should.be.equal ("Tony"); console.log ("Ad:" + e);}).setValue ("#lname", "Keith").getValue ("#lname") sonra (funksiya (e) {(e).should.be.equal ("Keith"); console.log ("Soyad:" + e);});});

Addım 7: Daha çox qaynaq

İstinad üçün bəzi əlavə mənbələr:

• Müzakirə Qrupları (Gitter)

  • Veb Sürücü IO Müzakirə Qrupu
  • Mocha Müzakirə Qrupu

• Digər maraqlı layihələr

  • Supertest - HTTP təsdiqləri
  • Chai - iddialar

Addım 8: Nəticə

Layihəm üçün istifadə edəcəyim texnologiyaları araşdırmaq üçün bir az vaxt sərf etdim. Əvvəlcə Selenium Web Driver ilə başladım, ancaq Web Driver IO -ya keçdim. Veb Sürücüsü IO -nun istifadəsi daha asan və genişləndirilməsi daha asan görünürdü (ən azından uzadılması üçün sənədlər - təkrar istifadə edilə bilən əmrlər daha yaxşı idi).

Texnologiyalara ilk dəfə baxmağa başladığım zaman etməyə çalışdığım hər şeyə aid yaxşı nümunələr tapmaq çətin idi. Bu məlumatı və bilikləri sizinlə bölüşmək istəməyimin səbəbi budur.

Texnologiyalar gözlədiyimdən daha yaxşı işləyirdi, ancaq öyrənmə əyrisi də var idi. Bütün komponentlərin necə birlikdə işlədiyini anladıqdan sonra çox qısa müddətdə mürəkkəb test skriptləri yaza bildim. Ən çətin skriptlər tarix seçici və modal seçicilər kimi JavaScript əsaslı komponentlər idi.

Mən heç vaxt özümü JavaScript tərtibatçısı kimi qələmə verməmişəm və hər kəs JavaScript mütəxəssisi olmaq istəməmişəm, amma bu texnologiyalardan istifadə etmək məni JS bacarıqlarımı daha da inkişaf etdirməyə həvəsləndirdi.

Ümid edirəm ki, bu məqalə faydalıdır və nümunələr aydın və məlumatlıdır.

Hər hansı bir sualınız və ya şərhiniz varsa mənə bildirin.

Çox sağ ol, Tony Keith