Tutorial IO Pemandu Web Menggunakan Laman Web Langsung dan Contoh Kerja: 8 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Tutorial IO Pemandu Web Menggunakan Laman Web Langsung Dan Contoh Kerja

Kemas kini Terakhir: 2015-26-07

(Periksa semula dengan kerap kerana saya mengemas kini arahan ini dengan lebih terperinci dan contoh)

Latar belakang

Baru-baru ini saya mempunyai cabaran menarik yang dikemukakan kepada saya. Saya perlu memperkenalkan ujian automatik ke jabatan Q / A dengan pengalaman teknikal yang sangat sedikit dan tidak mempunyai latar belakang pengaturcaraan.

Ini benar-benar dua (2) cabaran yang terpisah. Yang pertama adalah mengenal pasti teknologi untuk melakukan ujian automatik. Yang kedua adalah melatih bahagian Q / A.

Artikel ini hanya akan membahas teknologi yang digunakan dan apa yang saya pelajari dalam prosesnya.

Teknologi berfungsi dengan baik tetapi saya benar-benar terpaksa mencari maklumat dan menghabiskan berjam-jam untuk mencari masalah.

Saya sukar mencari maklumat di Internet mengenai teknologi ini semua berfungsi bersama.

Saya ingin berkongsi maklumat ini, jadi saya menulis artikel ini bersama skrip ujian contoh yang berfungsi dan laman web ujian untuk menjalankan skrip tersebut.

Semua skrip ujian boleh didapati di github dan laman web ujian berfungsi terletak di Laman Ujian Tutorial Pemandu Web

Saya harap anda menganggapnya berguna. Sekiranya ada, sila beritahu saya.

Objektif Gunakan teknologi untuk:

• Uji kefungsian laman web
• Uji kefungsian JavaScript
• Boleh dijalankan secara manual
• Boleh dijalankan secara automatik
• Bahasa yang mudah dipelajari untuk bukan pengaturcara

  Pegawai yang mempunyai pengetahuan asas mengenai HTML dan JavaScript

• Gunakan perisian sumber terbuka sahaja

Teknologi

Senarai teknologi yang saya pilih:

• mocha - pelari ujian - melaksanakan skrip ujian
• mustjs - perpustakaan penegasan
• webdriverio - pengikat kawalan penyemak imbas (pengikat bahasa)
• selenium - kilang abstraksi dan operasi penyemak imbas

• Penyemak imbas / Pemacu mudah alih + penyemak imbas

  • Firefox (Penyemak Imbas sahaja)
  • Chrome (Penyemak Imbas dan pemacu)
  • IE (Penyemak Imbas dan pemandu)
  • Safari (Pemalam penyemak imbas dan pemacu)

Langkah 1: Pemasangan Perisian

Untuk memulakan, anda perlu memasang pelayan berdiri sendiri Node JS, Web Driver IO, Mocha, Should dan Selenium.

Berikut adalah arahan pemasangan untuk Windows 7.

(Saya pengguna Mac / Linux tetapi saya harus memasang semuanya pada mesin Windows 7, ini sebabnya saya memasukkannya untuk rujukan anda. Prosedur pemasangan pada Mac / Linux adalah serupa. Sila rujuk dengan rujukan dalam talian untuk lebih banyak lagi maklumat.)

Dari penyemak imbas:

• Pasang Node yang merangkumi NPM (Node Package Manager)

• pergi ke

  • Klik pasang
  • Simpan dan jalankan fail
  • Tetapkan jalan dan pemboleh ubah (NODE_PATH)

  • Pergi ke Panel Kawalan-> Sistem dan Keselamatan-> Sistem

    • Tetapan sistem maju

    • Tetapan Persekitaran (Pemboleh ubah pengguna)

      • Tambah ke PATH

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

      • Tambahkan NODE_PATH (Pemboleh ubah sistem)

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

Catatan: Saya memasang semua perisian di bawah menggunakan pilihan global npm (-g). Ini biasanya tidak digalakkan tetapi untuk pemasangan ini saya perlu memasang secara global kerana ia akan digunakan di pelbagai projek.

Buka arahan arahan (cmd):

(pentadbir pengguna tempatan)

• Pasang selenium "pemacu web IO"

  • npm pasang webdriverio -g

    Ini akan memasang pemacu web IO secara global pada mesin anda

• Pasang perisian pelari ujian "mocha"

  • npm pasang mocha -g

    Ini akan memasang mocha secara global pada mesin anda

• Pasang pustaka penegasan "sepatutnya"

  • pemasangan npm harus -g

    Ini akan dipasang “seharusnya” secara global pada mesin anda

• Pasang Pelayan Selenium Stand Alone

  • Pergi ke
  • Muat turun fail jar dan pindah ke direktori "selenium".

• Pasang penyemak imbas dan pemacu penyemak imbas untuk diuji

  • Dari arahan cmd:

    • Buat direktori "selenium"
    • C: / Pengguna {USERNAME} selenium

    • Perintah:

      • cd C: / Pengguna {USERNAME}
      • mkdir selenium

    • Firefox

      • Pasang penyemak imbas firefox, jika belum dipasang.
      • Laluan harus ditetapkan untuk memulakan Firefox dari command prompt (cmd).

      • Panel Kawalan-> Sistem dan Keselamatan-> Sistem

        • Tetapan sistem maju
        • Tetapan Persekitaran
        • Tambah (tambahkan penggunaan titik dua titik) ke Path Variable
        • C: / Program Files (x86) Mozilla Firefox
      • Tidak diperlukan pemacu web khas untuk Firefox.

    • Chrome

      • Pasang penyemak imbas krom, jika belum dipasang.
      • Jalan MUNGKIN ditetapkan untuk memulakan Chrome dari command prompt (cmd).
      • Uji terlebih dahulu: chrome.exe dari command prompt (cmd)
      • Sekiranya krom tidak bermula maka:

      • Panel Kawalan-> Sistem dan Keselamatan-> Sistem

        • Tetapan sistem maju
        • Tetapan Persekitaran
        • Tambah (tambahkan penggunaan titik dua titik) ke Path Variable
        • C: / Program Files (x86) Google / Chrome / Application / chrome.exe

      • Pemacu web khas diperlukan untuk Chrome.

        Pergi ke chromium.org dan unzip pemacu 32 bit ke dalam direktori "selenium"

    • Internet Explorer (untuk Windows sahaja - tidak akan berfungsi pada platform lain)

      • Pemacu web khas diperlukan untuk IE.

        • Pergi ke
        • Muat turun dan unzip pemacu 64 bit ke dalam direktori "selenium".

Langkah 2: Skrip Ujian Asas

Mari mulakan dengan beberapa asas.

Berikut adalah skrip mocha mudah yang akan membuka laman web dan mengesahkan tajuknya.

// tutorial1.js

// // Ini adalah skrip ujian mudah untuk membuka laman web dan // mengesahkan tajuk. // perpustakaan yang diperlukan var webdriverio = memerlukan ('webdriverio'), harus = memerlukan ('harus'); // blok skrip ujian atau suite menggambarkan ('Ujian Tajuk untuk Pemandu Web IO - Laman Web Ujian Tutorial', fungsi () {// tetapkan waktu tamat hingga 10 saat ini. waktu tunggu (10000); var driver = {}; // kait untuk dijalankan sebelum ujian sebelum (fungsi (selesai) {// muatkan pemacu untuk pemandu penyemak imbas = webdriverio.remote ({dikehendakiCapabilities: {browserName: 'firefox'}}); driver.init (selesai);}); // spesifikasi ujian - "spesifikasi" itu ('harus memuat halaman dan judul yang betul', fungsi () {// memuatkan halaman, kemudian fungsi panggilan () kembali pemacu.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html ') // dapatkan tajuk, kemudian lulus tajuk ke fungsi ().getTitle (). kemudian (fungsi (tajuk) {// verifikasi tajuk (tajuk).should.be.equal ("Web Driver IO - Halaman Ujian Tutorial "); // unment for console debug // console.log ('Judul Halaman Semasa:' + title);});}); // a" hook "untuk dijalankan setelah semua ujian di blok ini selepas (fungsi (selesai) {driver.end (selesai);});});

Pemerhatian:

• Anda harus terlebih dahulu memperhatikan skrip ujian ditulis dalam JAVASCRIPT (berakhir dengan pelanjutan.js).

• Struktur asasnya hampir sama untuk semua skrip ujian.

  • Komen Tajuk (//)
  • Perpustakaan yang diperlukan
  • Tetapkan Pilihan (pilihan)
  • Cangkuk: Muatkan Pemacu Penyemak Imbas
  • Test Suite (terangkan)
  • Spesifikasi Uji (boleh ada banyak Spesifikasi di Suite)
  • Cangkuk: Bersihkan

• Suite ujian bermula dengan fungsi huraian yang mengambil dua parameter:

  • String - Penerangan mengenai set ujian

    • "Periksa halaman untuk kata-kata yang betul"
    • "Sahkan operasi butang radio"

  • fungsi - blok kod untuk dilaksanakan

    huraikan (‘Penerangan tentang rangkaian ujian’, fungsi () {});

• Suite ujian akan mengandungi 1 atau lebih spesifikasi ujian (spesifikasi)

• Spesifikasi bermula dengan fungsi yang memerlukan dua parameter:

  • Rentetan - Penerangan mengenai spesifikasi ujian

    • "Sepatutnya teks pautan dan URL pautan yang betul"
    • "Harus mengandungi kata kerja yang betul (salinan dek)
  • fungsi - blok kod untuk dilaksanakan
  • it (‘Penerangan spesifikasi ujian’, fungsi () {});
• Spesifikasi mengandungi satu atau lebih jangkaan yang menguji keadaan kod

• Ini dipanggil penegasan

  Perpustakaan "harus" memberikan penegasan

• Dalam hampir semua kes, anda perlu mencari satu atau lebih elemen menggunakan pemilih dan kemudian melakukan beberapa operasi pada elemen

  • Contoh:

    • Cari teks di halaman dan sahkan teksnya
    • Isi borang dan hantar
    • Sahkan CSS elemen

Mari kita teliti contohnya dengan komen

Muatkan perpustakaan yang diperlukan: pemacu web IO dan semestinya.

// perpustakaan yang diperlukan

var webdriverio = memerlukan ('webdriverio'), harus = memerlukan ('seharusnya');

Tentukan suite ujian. Suite ini dinamakan: "Ujian Tajuk untuk Pemandu Web IO - Laman Web Ujian Tutorial"

// blok skrip ujian atau suite

jelaskan ('Ujian Tajuk untuk Pemandu Web IO - Laman Web Laman Ujian Tutorial', fungsi () {…});

Tetapkan batas waktu hingga 10 saat supaya skrip tidak habis semasa memuat halaman.

// tetapkan masa tamat hingga 10 saat

ini. waktu tamat (10000);

Cangkuk untuk memuatkan pemacu penyemak imbas sebelum menjalankan spesifikasi "spesifikasi". Pemacu Firefox dimuatkan dalam contoh ini.

// cangkuk untuk dijalankan sebelum ujian

sebelum (fungsi (selesai) {// muatkan pemacu untuk pemandu penyemak imbas = webdriverio.remote ({dikehendakiCapabilities: {browserName: 'firefox'}}); driver.init (selesai);});

Tentukan spesifikasi ujian.

// spesifikasi ujian - "spesifikasi"

it ('harus memuat halaman dan tajuk yang betul', fungsi () {…});

Muatkan halaman laman web

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

Dapatkan tajuk, kemudian lulus tajuk untuk berfungsi ()

.getTitle (). kemudian (fungsi (tajuk) {

… });

Sahkan tajuk menggunakan pustaka penegasan sepatutnya.

(tajuk).should.be.equal ("Pemandu Web IO - Halaman Ujian Tutorial");

Hook untuk berhenti dan membersihkan pemandu setelah selesai.

// "hook" untuk dijalankan setelah semua ujian di blok ini

selepas (fungsi (selesai) {driver.end (selesai);});

Langkah 3: Jalankan Skrip Ujian

Sekarang mari kita lihat apa yang dilakukan skrip ujian ketika dijalankan.

Mula-mula mulakan Selenium Stand Alone Server:

• Untuk Windows gunakan baris arahan (cmd):

  • java -jar
  • # java -jar selenium-pelayan-mandiri-2.46.0.jar

• Untuk Mac atau Linux, buka terminal:

  • java -jar
  • $ java -jar selenium-server-standalone-2.46.0.jar
• Lihat tangkapan skrin di atas

Seterusnya jalankan skrip ujian:

• Untuk Windows gunakan baris arahan (cmd):

  • mocha
  • # mocha tutorial1.js

• Untuk Mac atau Linux, buka terminal:

  • mocha
  • $ mocha tutorial.js
• Lihat tangkapan skrin di atas

Jadi apa yang berlaku?

Mocha memanggil skrip "tutorial1.js". Pemandu memulakan penyemak imbas (Firefox), memuat halaman dan mengesahkan tajuknya.

Langkah 4: Contoh Laman Web

Semua contoh dijalankan di laman web ini.

Contoh laman web terdapat di: Halaman Ujian Tutorial Pemandu Web IO

Semua skrip ujian boleh dimuat turun dari github.

Langkah 5: Contoh Khusus

Semua kod boleh didapati di github: Tutorial Web Driver IO mengenai github

• Sahkan Tautan dan Tautan Pautan dalam senarai yang tidak tersusun - "linkTextURL1.js"

  • Senarai yang tidak disusun mempunyai dan pautan adalah item senarai ke-4.
  • URL mestilah "https://tlkeith.com/contact.html"

// Sahkan teks pautan Hubungi Kami

itu ('harus mengandungi teks pautan Hubungi Kami', fungsi () {return driver.getText ("// ul [@ id = 'mylist'] / li [4] / a"). kemudian (fungsi (pautan) {konsol.log ('Pautan dijumpai:' + pautan); (pautan).should.equal ("Hubungi Kami");});}); // Sahkan URL Hubungi Kami itu ('harus mengandungi URL Hubungi Kami', fungsi () {return driver.getAttribute ("// ul [@ id = 'mylist'] / li [4] / a", "href").then (function (link) {(link).should.equal ("https://tlkeith.com/contact.html"); console.log ('URL dijumpai:' + link);});});

• Sahkan Teks Hak Cipta - "Hak Cipta1.js"

  • Hak cipta ada di footer Contoh ini menunjukkan 2 cara berbeza untuk mencari teks hak cipta:

    • oleh sebagai pemilih elemen
    • dengan menggunakan xpath sebagai pemilih elemen

// Sahkan teks Hak Cipta menggunakan id sebagai pemilih elemen

itu ('harus mengandungi teks Hak Cipta', fungsi () {return driver.getText ("# copyright"). kemudian (function (link) {console.log ('Copyright found:' + link); (link).should. sama ("Tony Keith - tlkeith.com @ 2015 - Hak cipta terpelihara.");});}); // Sahkan teks Hak Cipta menggunakan xpath sebagai pemilih elemen itu ('harus mengandungi teks Hak Cipta', fungsi () {return driver.getText ("// footer / center / p"). Kemudian (fungsi (pautan) {console.log ('Hak cipta dijumpai:' + pautan); (pautan).should.equal ("Tony Keith - tlkeith.com @ 2015 - Hak cipta terpelihara.");});});

• Isi Medan Borang dan Hantar - "formFillSubmit1.js"

  • Isi nama depan, nama belakang dan hantar, kemudian tunggu hasilnya.

  • Contoh ini menunjukkan 3 kaedah mengisi medan input nama pertama:

    • oleh id
    • oleh xpath dari input
    • oleh xpath dari form-> input
  • Juga menunjukkan cara mengosongkan medan input

// Tetapkan nama pertama menggunakan id ke: Tony

itu ('harus menetapkan nama pertama ke Tony', fungsi () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). kemudian (fungsi (e) {(e). harus.be.equal ("Tony"); console.log ("Nama Pertama:" + e);});}); // Kosongkan nama pertama menggunakan id itu ('harus membersihkan nama depan', function () {return driver.clearElement ("# fname").getValue ("# fname"). Kemudian (fungsi (e) {(e).should.be.equal (""); console.log ("Nama Pertama:" + e);});}); // Tetapkan nama pertama menggunakan xpath dari input ke: Tony it ('harus menetapkan nama pertama ke Tony', function () {return driver.setValue ("// input [@ name = 'fname']", "Tony").getValue ("// input [@ name = 'fname']"). kemudian (fungsi (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);});}); // Kosongkan nama pertama menggunakan xpath dari memasukkannya ('harus membersihkan nama depan', fungsi () {return driver.clearElement ("// input [@ name = 'fname']").getValue ("// input [@ name = 'fname'] "). kemudian (fungsi (e) {(e).should.be.equal (" "); console.log (" Nama Pertama: "+ e);});}); // Tetapkan nama pertama menggunakan xpath dari borang ke: Tony it ('harus menetapkan nama depan ke Tony', function () {return driver.setValue ("// form [@ id = 'search-form'] / input [1] "," Tony ").getValue (" // form [@ id = 'search-form'] / input [1] "). Kemudian (fungsi (e) {(e).should.be.equal ("Tony"); console.log ("Nama Pertama:" + e);});}); // Tetapkan nama belakang menggunakan id ke: Keith it ('harus menetapkan nama belakang ke Keith', function () {return driver.setValue ("# lname", "Keith").getValue ("# lname") kemudian. (fungsi (e) {(e).should.be.equal ("Keith"); console.log ("Nama Akhir:" + e);});}); // Kirim borang dan tunggu hasil cariannya ('harus menyerahkan borang dan menunggu hasil', fungsi () {return driver.submitForm ("# search-form"). Kemudian (fungsi (e) {console.log (' Hantar Borang Carian ');}).waitForVisible ("# hasil carian", 10000). Kemudian (fungsi (e) {console.log (' Hasil Carian Ditemui ');});});

• Klik Butang Tunjuk / Sembunyikan dan Sahkan Teks - "showHideVerify1.js"

  • Teksnya terdapat dalam elemen tunjuk / sembunyikan. Butang mengawal keadaan.

  • Contoh ini menunjukkan:

    • Klik butang untuk mengembangkan
    • Tunggu elemen kelihatan (dikembangkan)
    • Sahkan teks (salin dek)

// klik butang "Maklumat Lanjut" dan sahkan teks dalam elemen yang diperluas

it ('harus klik butang maklumat lebih lanjut dan mengesahkan teks', fungsi () {return driver.click ("# moreinfo"). kemudian (function () {console.log ('Butang Maklumat Lebih Diklik');}).waitForVisible ("#collapseExample", 5000).getText ("// div [@ id = 'collapseExample'] / div"). kemudian (fungsi (e) {console.log ('Teks:' + e); (e).should.be.equal ("Semua perkara baik di sini!");});});

• Mengesahkan Kesalahan Medan Borang - "formFieldValidation.js"

  • Gunakan skrip ujian untuk mengesahkan mesej ralat yang betul dihasilkan.

  • Contoh ini menunjukkan:

    Sahkan mesej teks ralat dan sahkan lokasi (kedudukan senarai yang tidak tersusun)

itu ('harus mengandungi 5 kesalahan: pertama / terakhir / alamat / bandar / negeri', fungsi () {

kembali pemacu.getText ("// ul [@ class = 'alert alert-bahaya'] / li [1]"). kemudian (fungsi (e) {console.log ('Ralat dijumpai:' + e); (e).should.be.equal ('Sila masukkan nama pertama');}).getText ("// ul [@ class = 'alert alert-bahaya'] / li [2]"). kemudian (fungsi (e) {console.log ('Ralat dijumpai:' + e); (e).should.be.equal ('Sila masukkan nama belakang');}).getText ("// ul [@ class = 'alert alert-bahaya '] / li [3] "). kemudian (fungsi (e) {console.log (' Ralat dijumpai: '+ e); (e).should.be.equal (' Sila masukkan alamat ');}). getText ("// ul [@ class = 'alert alert-bahaya'] / li [4]"). kemudian (fungsi (e) {console.log ('Error found:' + e); (e).should.be.equal ('Sila masukkan bandar');}).getText ("// ul [@ class = 'alert alert-bahaya'] / li [5]"). kemudian (fungsi (e) {console.log ('Ralat dijumpai:' + e); (e).should.be.equal ('Sila masukkan keadaan');}); });

• Mengulangi Data untuk Mengesahkan Pautan / Teks / Halaman URL - "LoopDataExample1.js"

  • Contoh ini menunjukkan: Gunakan array data JSON untuk menyimpan pautan dan nama, kemudian iterate

    • Sahkan setiap teks dan pautan URL
    • Klik pautan dan muatkan halaman

// Pautan data - pautan dan teks

var linkArray = [{"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/tutorial1.js", "name": "tutorial1.js"}, {"link": "https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/linkTextURL1.js "," name ":" linkTextURL1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/ master / copyright1.js "," name ":" copyright1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/formFillSubmit1.js "," name ":" formFillSubmit1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/showHideVerify1.js "," name ":" showHideVerify1.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/dynamicBrowser.js "," name ":" dynamicBrowser.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/ blob / master / callbackPromise.js "," name ":" callbackPromise.js "}, {" link ":" https://github.com/onewithhammer/WebDriverIOTutorial/blob/master/debugExample1.js "," name ": "debu gExample1.js "}, {" 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 "}]; … // gelung melalui setiap linkArray linkArray.forEach (fungsi (d) {it ('harus mengandungi teks / pautan kemudian goto halaman -' + d.name, function () {return driver // pastikan anda berada di halaman permulaan.url ('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle (). kemudian (fungsi (tajuk) {// verifikasi tajuk (tajuk).should.be.equal ("Pemandu Web IO - Halaman Ujian Tutorial ");}) // cari URL.getAttribute ('a =' + d.name," href "). Kemudian (function (link) {(link).should.equal (d.link); console.log ('URL found:' + d.link);}) // pergi ke halaman URL dan sahkan ada.click ('a =' + d.name).waitForVisible ("# js-repo-pjax- container ", 10000).then (function () {console.log ('Github Page Found');});});});

• Melancarkan Data Statik untuk Mengisi Medan Bentuk - "loopDataExample2.js"

  • Contoh ini menunjukkan: Gunakan pelbagai data JSON untuk menyimpan nama depan / belakang

    • Lihat data untuk mengisi medan borang, kemudian hantarkan borang
    • Tunggu halaman hasil
    • Sahkan nama depan / belakang pada halaman hasil

// array data - firstName dan lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"nama pertama ":" Jane "," lastName ":" Doe "}, {" firstName ":" Don "," lastName ":" Johnson "}]; … // gelung melalui setiap dataArray dataArray.forEach (fungsi (d) {it ('harus mengisi medan, sumbit page', function () {return driver // pastikan anda berada di halaman permulaan.url ('http: / /www.tlkeith.com/WebDriverIOTutorialTest.html ').getTitle (). then (function (title) {// verifikasi title (title).should.be.equal ("Web Driver IO - Tutorial Test Page");}.setValue ("# fname", d.firstName).getValue ("# fname"). kemudian (fungsi (e) {(e).should.be.equal (d.firstName); console.log ("First Nama: "+ e);}).setValue (" # lname ", d.lastName).getValue (" # lname "). Kemudian (fungsi (e) {(e).should.be.equal (d.lastName); console.log ("Last Name:" + e);}).submitForm ("# search-form"). kemudian (function () {console.log ('Submit Search Form');}).waitForVisible ("# search-results", 10000).then (function () {console.log ('Result Page Found');}).getText ("// h1"). kemudian (function (link) {console.log ('Text found:' + link); (link).should.equal ("Welcome" + d.firstName + "" + d.lastName + ".");});});});

• Sahkan Properti CSS - "cssValidation1.js"

  • Contoh ini menunjukkan cara:

    • Sahkan sifat CSS berikut:

      • warna
      • padding (atas, bawah, kanan, kiri)
      • warna latar belakang

itu ('harus mengandungi warna teks ralat yang betul', fungsi () {return driver.getCssProperty ("// ul [@ class = 'alert alert-bahaya'] / li [1]", "color"). kemudian (fungsi (hasil) {console.log ('Colour found:' + result.parsed.hex + "or" + result.value); (result.parsed.hex).should.be.equal ('# a94442'); });});

itu ('harus mengandungi padding yang betul di sel meja', fungsi () {

pemacu kembali // padding: kanan atas kiri bawah.getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-top"). kemudian (fungsi (hasil) {console.log ('padding-top found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// jadual [@ id = 'filelist'] / thead / tr [1] / td [1] "," padding-bottom "). kemudian (fungsi (hasil) {console.log ('padding-bottom found:' + result.value); (result.value).should.be.equal ('10px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding- betul "). kemudian (fungsi (hasil) {console.log ('padding-right found:' + result.value); (result.value).should.be.equal ('5px');}).getCssProperty ("// table [@ id = 'filelist'] / thead / tr [1] / td [1]", "padding-left"). kemudian (fungsi (hasil) {console.log ('padding-left found: '+ result.value); (result.value).should.be.equal (' 5px ');}); });

itu ('harus mengandungi warna latar belakang yang betul dalam tajuk tajuk', fungsi () {

kembali pemacu.getCssProperty ("// table [@ id = 'filelist'] / thead", "background-color"). kemudian (fungsi (hasil) {console.log ('warna latar dijumpai:' + result.parsed. hex); (result.parsed.hex).should.be.equal ('# eeeeee');}); });

Langkah 6: Petua dan Trik

• Menyahpepijat:

  • Hidupkan log pada tahap pemacu untuk debug lebih banyak dan buat log.

    • Tetapkan logLevel ke 'verbose'
    • Tetapkan logOutput ke nama direktori ('log')

driver = webdriverio.remote (loglevel: 'verbose', logOutput: 'logs, {dikehendakiCapabilities: {browserName:' firefox '}});

• Gunakan console.log (), debug (), getText () untuk debug.

  • console.log () - Gunakan untuk memaparkan maklumat untuk menentukan keadaan.
  • debug () - Gunakan pause browser / script sehingga enter ditekan pada baris perintah.

  • getText () - Gunakan untuk mengesahkan bahawa anda berinteraksi dengan elemen yang betul.

    Sangat membantu dengan ungkapan xpath

// Klik pada Item 3 dari senarai

itu ('harus klik pada Item 3 dari senarai', fungsi () {// gunakan getText () untuk mengesahkan xpath betul untuk pemacu elemen kembali.getText ("// ul [@ id = 'mylist'] / li [3] / div / div / a "). Kemudian (fungsi (pautan) {// gunakan konsol.log () untuk mengeluarkan maklumat konsol.log ('Pautan dijumpai:' + pautan); (pautan).should.equal ("Item 3");}) // gunakan debug () untuk menghentikan tindakan untuk melihat apa yang berlaku di penyemak imbas.debug ().klik ("// ul [@ id = 'mylist'] / li [3] /div/div/a").then (function () {console.log ('Link diklik');}) // tunggu sehingga borang carian google muncul.waitForVisible ("# tsf", 20000).then (fungsi (e) {console.log ('Hasil Carian Ditemui');});});

• Gunakan Pembolehubah Persekitaran untuk Menukar Penyemak Imbas secara Dinamik:

  • Gunakan pemboleh ubah persekitaran SELENIUM_BROWSER untuk menggunakan penyemak imbas yang berbeza tanpa mengubah skrip ujian setiap kali.
  • Memerlukan sedikit perubahan pengkodan untuk menyokong.

Perubahan Kod:

// muatkan pemacu untuk penyemak imbas

driver = webdriverio.remote ({dikehendakiKapabiliti: {browserName: process.env. SELENIUM_BROWSER || 'chrome'}});

Penyemak Imbas yang Disokong:

• Internet Explorer - IE 8+ (Hanya Windows)

  SELENIUM_BROWSER = iaitu mocha

• Firefox 10+ (Windows / Max / Linux)

  SELENIUM_BROWSER = mocha firefox

• Chrome 12+ (Windows / Max / Linux)

  SELENIUM_BROWSER = krom mocha

• Opera 12+

  SELENIUM_BROWSER = opera mocha

• Safari

  SELENIUM_BROWSER = safari mocha

Ujian:

• Untuk Windows gunakan shell git bash:

  • SELENIUM_BROWSER = krom mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Untuk Mac atau Linux, buka terminal:

  • SELENIUM_BROWSER = krom mocha
  • $ SELENIUM_BROWSER = chrome mocha DynamicBrowser.js

• Ujian Responsif:

  • Tentukan titik putus berdasarkan projek atau kerangka kerja (iaitu bootstrap).

  • Tentukan pemboleh ubah persekitaran untuk setiap titik putus:

    • DESKTOP - 1200 piksel
    • TABLET - 992 piksel
    • BERGERAK - 768 piksel

  • Kembangkan perintah yang boleh digunakan semula untuk membaca pemboleh ubah persekitaran dan menetapkan ukuran penyemak imbas.

    Lihat contoh di bawah

  • Panggil perintah yang boleh digunakan semula dalam skrip ujian anda.

// kod yang boleh digunakan semula - perpustakaan // coretan kod jika (bp == "DESKTOP") {obj.width = 1200; obj.height = 600; obj.name = bp; } lain jika (bp == "TABLET") {obj.width = 992; obj.height = 600; obj.name = bp; } lain jika (bp == "BERGERAK") {obj.width = 768; obj.height = 400; obj.name = bp; }

// Skrip ujian

sebelum (fungsi (selesai) {winsize = common.getWindowSizeParams ();… driver.addCommand ('setWindowSize', common.setWindowSize.bind (driver));} // tetapkan saiz tetingkapnya ('harus menetapkan ukuran tetingkap', fungsi (selesai) {// hanya lebar yang penting driver.setWindowSize (winsize.width, winsize.height, function () {}). call (selesai);});

• Perintah Boleh Digunakan Semula (Perintah Tersuai):

  • Pemandu Web IO mudah dilanjutkan.
  • Saya suka memasukkan semua perintah yang boleh digunakan semula ke dalam perpustakaan. (mungkin ini sekolah lama tetapi berfungsi!)

common / commonLib.js

// verifikasiLastNameCheckError ()

// // Keterangan: // Mengesahkan mesej ralat pengesahan borang nama terakhir // // Input: // number - index of error (1-5) // Output: // none // var verifikasiLastNameCheckError = function () { var idx = argumen [0], panggilan balik = argumen [argumen.length - 1]; ini.getText ("// ul [@ class = 'alert alert-bahaya'] / li [" + idx + "]", function (err, e) {console.log ('Ralat dijumpai:' + e); (e).should.be.equal ('Sila masukkan nama belakang');}).call (panggilan balik); }; // eksport modul fungsi.exports.verifyLastNameCheckError = verifikasiLastNameCheckError;

Berikut adalah perubahan khusus yang diperlukan untuk memanggil fungsi yang boleh digunakan semula

Lihat formFieldValidation.js untuk contoh kerja lengkap

// memerlukan perintah yang boleh digunakan semula - CommonLib

common = memerlukan ('./ Common / CommonLib'); … // mengikat arahan driver.addCommand ('verifikasiFirstNameError', common.verifyFirstNameCheckError.bind (driver)); driver.addCommand ('verifikasiLastNameError', common.verifyLastNameCheckError.bind (pemandu)); itu ('harus mengandungi 2 kesalahan: nama depan / belakang', function () {// panggil pemacu fungsi yang boleh digunakan semula.verifyFirstNameError (1);.verifyLastNameError (2);});

• Struktur Fail / Direktori Projek:

  • Berikut adalah struktur projek khas:

    • "Projek" - direktori projek utama
      • README.md - readme untuk projek global

      • "Common" - direktori untuk fungsi global yang umum untuk semua projek

        • common-lib.js - perpustakaan fungsi global
        • README.md - readme untuk fungsi global

      • "Product1" - direktori untuk produk 1

        • ujian-skrip1.js
        • test-script2.js

        • "Common" - direktori untuk fungsi tempatan untuk memproyeksikan 1

          • prod1-lib.js - perpustakaan fungsi tempatan untuk projek 1
          • README.md - readme untuk fungsi tempatan untuk memproyeksikan 1

      • "Product2" - direktori untuk produk 2test-script1.jstest-script2.js

        • "Common" - direktori untuk fungsi tempatan untuk memproyeksikan 2

          • prod2-lib.js - perpustakaan fungsi tempatan untuk projek 2
          • README.md - readme untuk fungsi tempatan untuk projek 2

• Pecahkan skrip ujian ke dalam beberapa fail:

  • Berikut adalah contoh penggunaan beberapa fail:

    • Sanity Check - skrip ujian asas untuk mengesahkan semuanya berfungsi
    • Elemen Statik dan Pengesahan Teks - mengesahkan semua elemen dan teks
    • Pengesahan Ralat Bentuk / Halaman - pengesahan ralat
    • Hasil Carian - uji kandungan dinamik

• Panggilan Balik VS. Janji:

  • Versi 3 Pemandu Web IO menyokong panggilan balik dan janji.

    Janji adalah kaedah pilihan kerana mengurangkan kod pengendalian ralat. Sila lihat di bawah contoh yang sama ditulis menggunakan panggilan balik dan janji.

Panggilan balik

// Tetapkan / sahkan nama depan / belakang menggunakan Panggilan Balik

it ('harus menetapkan / mengesahkan nama depan / belakang menggunakan Callbacks', function (selesai) {driver.setValue ("# fname", "Tony", function (e) {driver.getValue ("# fname", function (err, e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e); driver.setValue ("# lname", "Keith", fungsi (e) { driver.getValue ("# lname", function (err, e) {(e).should.be.equal ("Keith"); console.log ("Nama Akhir:" + e); selesai ();});});});});});

Janji

// Tetapkan / sahkan nama depan / belakang menggunakan Janji

itu ('harus menetapkan / mengesahkan nama depan / belakang menggunakan Janji', fungsi () {return driver.setValue ("# fname", "Tony").getValue ("# fname"). kemudian (fungsi (e) {(e).should.be.equal ("Tony"); console.log ("First Name:" + e);}).setValue ("# lname", "Keith").getValue ("# lname"). kemudian (fungsi (e) {(e).should.be.equal ("Keith"); console.log ("Nama Akhir:" + e);});});

Langkah 7: Lebih Banyak Sumber

Berikut adalah beberapa sumber tambahan untuk rujukan anda:

• Kumpulan Perbincangan (Gitter)

  • Kumpulan Perbincangan Pemandu Web IO
  • Kumpulan Perbincangan Mocha

• Projek menarik lain

  • Supertest - penegasan
  • Chai - penegasan

Langkah 8: Kesimpulannya

Saya meluangkan masa untuk meneliti teknologi yang akan digunakan untuk projek saya. Saya pada mulanya bermula dengan Pemandu Web Selenium tetapi beralih menggunakan Pemacu Web IO. Pemandu Web IO nampaknya lebih mudah digunakan dan lebih senang diperluas (sekurang-kurangnya dokumentasi untuk memanjangkan - perintah yang dapat digunakan semula lebih baik).

Ketika saya mula-mula melihat teknologi, sukar untuk mencari contoh yang baik berbanding dengan apa sahaja yang saya cuba lakukan. Inilah sebab saya ingin berkongsi maklumat dan pengetahuan ini dengan anda.

Teknologi bekerja jauh lebih baik daripada yang saya jangkakan namun ada keluk pembelajaran yang terlibat. Setelah saya memahami bagaimana semua komponen berfungsi bersama, saya dapat menulis skrip ujian yang rumit dalam masa yang sangat singkat. Skrip yang paling sukar adalah komponen berasaskan JavaScript seperti pemilih tarikh dan pemilih modal.

Saya tidak pernah melabelkan diri saya sebagai pengembang JavaScript dan saya juga tidak mahu menjadi pakar JavaScript, tetapi menggunakan teknologi ini pasti mendorong saya untuk meningkatkan kemahiran JS saya.

Saya harap artikel ini berguna dan contohnya jelas dan bermaklumat.

Beritahu saya jika anda mempunyai pertanyaan atau komen.

Terima kasih, Tony Keith