Tutorial IO Driver Web Menggunakan Situs Web Langsung dan Contoh Kerja: 8 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Tutorial IO Driver Web Menggunakan Situs Web Langsung Dan Contoh Kerja

Pembaruan Terakhir: 2015-07-26

(Periksa kembali sesering saya memperbarui instruksi ini dengan lebih banyak detail dan contoh)

Latar belakang

Baru-baru ini saya mendapat tantangan menarik yang disajikan kepada saya. Saya perlu memperkenalkan pengujian otomatis ke departemen Tanya Jawab dengan sedikit pengalaman teknis dan tanpa latar belakang pemrograman.

Ini benar-benar dua (2) tantangan yang terpisah. Yang pertama adalah mengidentifikasi teknologi untuk melakukan pengujian otomatis. Yang kedua adalah melatih departemen Q/A.

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

Teknologi bekerja dengan baik tetapi saya benar-benar harus mencari informasi dan menghabiskan banyak waktu untuk mencari tahu masalah.

Saya mengalami kesulitan menemukan informasi di Internet tentang semua teknologi ini bekerja bersama.

Saya ingin membagikan informasi ini, jadi saya menulis artikel ini bersama dengan contoh skrip pengujian yang berfungsi dan situs web pengujian untuk menjalankan skrip tersebut.

Semua skrip pengujian dapat ditemukan di github dan situs pengujian yang berfungsi terletak di Situs Uji Tutorial IO Driver Web

Saya harap Anda merasa berguna. Jika Anda melakukannya, beri tahu saya.

TujuanMenggunakan teknologi untuk:

• Uji fungsionalitas situs web
• Uji fungsionalitas JavaScript
• Dapat dijalankan secara manual
• Dapat dijalankan secara otomatis

• Bahasa yang mudah dipelajari untuk non programmer

  Personil T/A dengan pengetahuan dasar tentang HTML dan JavaScript

• Gunakan perangkat lunak sumber terbuka saja

Teknologi

Daftar teknologi yang saya pilih:

• mocha – test runner – menjalankan skrip pengujian
• shouldjs – perpustakaan pernyataan
• webdriverio - pengikatan kontrol browser (binding bahasa)
• selenium – abstraksi browser dan menjalankan pabrik

• Browser/Driver seluler + browser

  • Firefox (khusus Peramban)
  • Chrome (Browser dan driver)
  • IE (Browser dan driver)
  • Safari (Plugin browser dan driver)

Langkah 1: Instalasi Perangkat Lunak

Untuk memulai, Anda harus menginstal Node JS, Web Driver IO, Mocha, Should dan Selenium stand alone server.

Berikut adalah petunjuk instalasi untuk Windows 7.

(Saya pengguna Mac/Linux tetapi saya harus menginstal semuanya pada mesin Windows 7, inilah mengapa saya menyertakannya untuk referensi Anda. Prosedur untuk menginstal pada Mac/Linux serupa. Silakan berkonsultasi dengan referensi online untuk informasi lebih lanjut informasi.)

Dari peramban:

• Instal Node yang menyertakan NPM (Node Package Manager)
• buka
  • Klik instal
  • Simpan dan jalankan file
  • Tetapkan jalur dan variabel (NODE_PATH)

  • Buka Control Panel->System and Security->System

    • Pengaturan Sistem Lanjut

    • Pengaturan Lingkungan (Variabel pengguna)

      • Tambahkan ke PATH

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

      • Tambahkan NODE_PATH (Variabel sistem)

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

Catatan: Saya menginstal semua perangkat lunak di bawah ini menggunakan opsi global npm (-g). Ini biasanya tidak disarankan tetapi untuk instalasi ini saya perlu menginstal secara global karena akan digunakan di beberapa proyek.

Buka prompt perintah (cmd):

(administrator pengguna lokal)

• Instal Selenium "driver web IO"

  • npm instal webdriverio -g

    Ini akan menginstal driver web IO secara global di mesin Anda

• Instal perangkat lunak uji coba "mocha"

  • npm instal moka -g

    Ini akan menginstal moka secara global di mesin Anda

• Instal pustaka pernyataan "harus"

  • npm install harus -g

    Ini akan menginstal "harus" secara global di mesin Anda

• Instal Server Selenium Stand Alone

  • Pergi ke
  • Unduh file jar dan pindah ke direktori "selenium".

• Instal browser dan driver browser untuk menguji dengan

  • Dari cmd Prompt:

    • Buat direktori "selenium"
    • C:\Users\{USERNAME}\selenium

    • Perintah:

      • cd C:\Users\{USERNAME}
      • mkdir selenium

    • Firefox

      • Instal browser firefox, jika belum diinstal.
      • Path harus diatur untuk memulai Firefox dari command prompt (cmd).

      • Panel Kontrol->Sistem dan Keamanan->Sistem

        • Pengaturan Sistem Lanjut
        • Pengaturan Lingkungan
        • Tambahkan (tambahkan gunakan titik koma) ke Variabel Jalur
        • C:\Program Files (x86)\Mozilla Firefox
      • Tidak diperlukan driver web khusus untuk Firefox.

    • Chrome

      • Instal browser chrome, jika belum diinstal.
      • Jalur MUNGKIN disetel untuk memulai Chrome dari command prompt (cmd).
      • Tes dulu: chrome.exe dari command prompt (cmd)
      • Jika chrome tidak memulai maka:

      • Panel Kontrol->Sistem dan Keamanan->Sistem

        • Pengaturan Sistem Lanjut
        • Pengaturan Lingkungan
        • Tambahkan (tambahkan gunakan titik koma) ke Variabel Jalur
        • C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

      • Diperlukan driver web khusus untuk Chrome.

        Buka chromium.org dan unzip driver 32 bit ke dalam direktori "selenium"

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

      • Sebuah web driver khusus diperlukan untuk IE.

        • Pergi ke
        • Unduh dan unzip driver 64 bit ke dalam direktori "selenium".

Langkah 2: Skrip Tes Dasar

Mari kita mulai dengan beberapa dasar.

Berikut adalah skrip moka sederhana yang akan membuka situs web dan memverifikasi judulnya.

// tutorial1.js

// // Ini adalah skrip pengujian sederhana untuk membuka situs web dan // memvalidasi judul. // perpustakaan yang dibutuhkan var webdriverio = membutuhkan('webdriverio'), harus = membutuhkan('harus'); // blok skrip pengujian atau rangkaian deskripsi('Pengujian Judul untuk IO Driver Web - Situs Web Halaman Pengujian Tutorial', function() { // setel batas waktu ke 10 detik this.timeout(10000); var driver = {}; // kait untuk dijalankan sebelum pengujian sebelum(fungsi (selesai) { // memuat driver untuk driver browser = webdriverio.remote({ keinginanCapabilities: {browserName: 'firefox'} }); driver.init(selesai); }); // spesifikasi pengujian - "spesifikasi" itu ('harus memuat halaman dan judul yang benar', function () { // memuat halaman, lalu panggil function() return driver.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html') // dapatkan judul, lalu berikan judul ke function().getTitle().then(function (title) { // verifikasi judul (title).should.be.equal("Web Driver IO - Tutorial Test Page "); // batalkan komentar untuk debug konsol // console.log('Judul Halaman Saat Ini: ' + judul); }); }); // "kait" untuk dijalankan setelah semua tes di blok ini setelah(fungsi(selesai) { driver.end(selesai); }); });

Pengamatan:

• Anda harus terlebih dahulu memperhatikan bahwa skrip pengujian ditulis dalam JAVASCRIPT (berakhir dengan ekstensi.js).

• Struktur dasar hampir identik untuk semua skrip pengujian.

  • Komentar Tajuk (//)
  • Perpustakaan yang Diperlukan
  • Atur Opsi (opsional)
  • Kait: Muat Pengandar Peramban
  • Test Suite (jelaskan)
  • Test Specs (bisa banyak Specs dalam satu Suite)
  • Kait: Bersihkan

• Rangkaian pengujian dimulai dengan fungsi deskripsi yang mengambil dua parameter:

  • String - Deskripsi rangkaian pengujian

    • “Periksa halaman untuk kata-kata yang tepat”
    • “Verifikasi operasi tombol radio”

  • fungsi - blok kode untuk dieksekusi

    deskripsikan('Deskripsi rangkaian pengujian', function() {});

• Paket pengujian akan berisi 1 atau lebih spesifikasi pengujian (spesifikasi)

• Spesifikasi dimulai dengan fungsi yang mengambil dua parameter:

  • String - Deskripsi spesifikasi pengujian

    • "Harus teks tautan dan URL tautan yang benar"
    • “Harus mengandung kata-kata yang benar (copy deck)
  • fungsi - blok kode untuk dieksekusi
  • it('Deskripsi spesifikasi pengujian', function() {});
• Spec berisi satu atau lebih ekspektasi yang menguji status kode

• Ini disebut asersi

  Pustaka "harus" memberikan pernyataan

• Di hampir semua kasus, Anda perlu mencari satu atau lebih elemen menggunakan pemilih kemudian melakukan beberapa operasi pada elemen

  • Contoh:

    • Temukan teks pada halaman dan verifikasi teks
    • Isi formulir dan kirim
    • Verifikasi CSS dari suatu elemen

Mari kita lihat lebih dekat contoh dengan komentar

Muat perpustakaan yang diperlukan: driver web IO dan seharusnya.

// perpustakaan yang diperlukan

var webdriverio = membutuhkan('webdriverio'), harus = membutuhkan('harus');

Tentukan rangkaian tes. Suite ini disebut: "Tes Judul untuk Web Driver IO - Situs Web Halaman Tes Tutorial"

// blok atau rangkaian skrip pengujian

description('Tes Judul untuk IO Driver Web - Situs Web Halaman Tes Tutorial', function() { … });

Atur batas waktu menjadi 10 detik agar skrip tidak kehabisan waktu saat memuat halaman.

// setel batas waktu menjadi 10 detik

this.timeout(10000);

Kaitkan untuk memuat driver browser sebelum menjalankan spesifikasi "spesifikasi". Driver Firefox dimuat dalam contoh ini.

// kait untuk dijalankan sebelum tes

sebelum(fungsi (selesai) { // memuat driver untuk driver browser = webdriverio.remote({ keinginan Kemampuan: {browserName: 'firefox'} }); driver.init(selesai); });

Tentukan spesifikasi pengujian.

// spesifikasi pengujian - "spesifikasi"

it('harus memuat halaman dan judul yang benar', function() { … });

Muat halaman situs web

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

Dapatkan judul, lalu berikan judul ke function()

.getTitle().then(fungsi (judul) {

… });

Verifikasi judul menggunakan pustaka pernyataan harus.

(title).should.be.equal("Web Driver IO - Halaman Tes Tutorial");

Kait untuk berhenti dan membersihkan driver setelah selesai.

// "pengait" untuk dijalankan setelah semua tes di blok ini

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

Langkah 3: Jalankan Skrip Tes

Sekarang mari kita lihat apa yang dilakukan skrip pengujian saat dijalankan.

Pertama mulai Server Selenium Stand Alone:

• Untuk Windows gunakan baris perintah (cmd):

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

• Untuk Mac atau Linux, buka terminal:

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

Selanjutnya jalankan skrip pengujian:

• Untuk Windows gunakan baris perintah (cmd):

  • moka
  • # tutorial moka1.js

• Untuk Mac atau Linux, buka terminal:

  • moka
  • $ moka tutorial.js
• Lihat tangkapan layar di atas

Jadi apa yang terjadi?

Mocha memanggil skrip "tutorial1.js". Pengemudi memulai browser (Firefox), memuat halaman dan memverifikasi judul.

Langkah 4: Contoh Situs Web

Semua contoh dijalankan terhadap situs ini.

Contoh situs web terletak di: Halaman Tes Tutorial IO Driver Web

Semua skrip pengujian dapat diunduh dari github.

Langkah 5: Contoh Spesifik

Semua kode tersedia di github: Tutorial IO Driver Web di github

• Verifikasi Tautan dan Teks Tautan dalam daftar yang tidak berurutan - "linkTextURL1.js"

  • Daftar yang tidak diurutkan memiliki dan tautannya adalah item daftar ke-4.
  • URL harus "https://tlkeith.com/contact.html"

// Verifikasi teks tautan Hubungi Kami

it('harus berisi teks tautan Hubungi Kami', function () { return driver.getText("//ul[@id='mylist']/li[4]/a").then(function (link) { console.log('Tautan ditemukan: ' + tautan); (tautan).should.equal("Hubungi Kami"); }); }); // Verifikasi Hubungi Kami URL it('harus berisi Hubungi Kami URL', function () { return driver.getAttribute("//ul[@id='mylist']/li[4]/a", "href").then(function (link) { (link).should.equal("https://tlkeith.com/contact.html"); console.log('URL ditemukan: ' + link); }); });

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

  • Hak cipta ada di footerContoh ini menunjukkan 2 cara berbeda untuk menemukan teks hak cipta:

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

// Verifikasi teks Hak Cipta menggunakan id sebagai pemilih elemen

it('harus berisi teks Hak Cipta', function () { return driver.getText("#copyright").then(function (link) { console.log('Copyright found: ' + link); (link).should. equal("Tony Keith - tlkeith.com @ 2015 - Hak cipta dilindungi undang-undang."); }); }); // Verifikasi teks Hak Cipta menggunakan xpath sebagai pemilih elemen it('harus berisi Hak cipta teks', function () { return driver.getText("//footer/center/p").then(function (link) { console.log('Hak cipta ditemukan: ' + tautan); (tautan).should.equal("Tony Keith - tlkeith.com @ 2015 - Semua hak dilindungi undang-undang."); }); });

• Isi Bidang Formulir dan Kirim - "formFillSubmit1.js"

  • Isi nama depan, nama belakang dan submit, lalu tunggu hasilnya.

  • Contoh ini menunjukkan 3 metode mengisi kolom input nama depan:

    • oleh id
    • oleh xpath dari input
    • oleh xpath dari form->input
  • Juga menunjukkan cara menghapus bidang input

// Setel nama depan menggunakan id ke: Tony

it('should set first name to Tony', function() { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Nama Depan: " + e); }); }); // Hapus nama depan menggunakan id it('should clear first name', function() { return driver.clearElement("#fname").getValue("#fname").then(function (e) { (e).should.be.equal(""); console.log("Nama Depan: " + e); }); }); // Atur nama depan menggunakan xpath dari input ke: Tony it('should set first name to Tony', function() { return driver.setValue("//input[@name='fname']", "Tony").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal("Tony"); console.log("Nama Depan: " + e); }); }); // Hapus nama depan menggunakan xpath dari input it('should clear first name', function() { return driver.clearElement("//input[@name='fname']").getValue("//input[@name='fname']").then(function (e) { (e).should.be.equal(""); console.log("Nama Depan: " + e); }); }); // Tetapkan nama depan menggunakan xpath dari form ke: Tony it('should set first name to Tony', function() { return driver.setValue("//form[@id='search-form']/input[1]", "Tony").getValue("//form[@id='search-form']/input[1]").then(function (e) { (e).should.be.equal("Tony"); console.log("Nama Depan: " + e); }); }); // Atur nama belakang menggunakan id menjadi: Keith it('should set last name to Keith', function() { return driver.setValue("#lname", "Keith").getValue("#lname").then (fungsi (e) { (e).should.be.equal("Keith"); console.log("Nama Belakang: " + e); }); }); // Kirim formulir dan tunggu hasil pencariannya ('harus mengirimkan formulir dan menunggu hasil', function() { return driver.submitForm("#search-form").then(function(e) { console.log(' Kirim Formulir Pencarian'); }).waitForVisible("#search-results", 10000).then(function (e) { console.log('Hasil Pencarian Ditemukan'); }); });

• Klik Tampilkan/Sembunyikan Tombol dan Verifikasi Teks - "showHideVerify1.js"

  • Teks berada dalam elemen show/hide. Tombol mengontrol negara.

  • Contoh ini menunjukkan:

    • Klik tombol untuk memperluas
    • Tunggu hingga elemen terlihat (diperluas)
    • Verifikasi teks (salin dek)

// klik tombol "Info Lebih Lanjut" dan verifikasi teks dalam elemen yang diperluas

it('should click more info button and verification text', function() { return driver.click("#moreinfo").then (function() { console.log('Clicked More Info button'); }).waitForVisible ("#collapseExample", 5000).getText("//div[@id='collapseExample']/div").then (function (e) { console.log('Text: ' + e); (e).should.be.equal("Semua yang baik ada disini!"); }); });

• Validasi Kesalahan Bidang Formulir - "formFieldValidation.js"

  • Gunakan skrip pengujian untuk memverifikasi pesan kesalahan yang benar dihasilkan.

  • Contoh ini menunjukkan:

    Verifikasi pesan teks kesalahan dan verifikasi lokasi (posisi daftar tidak berurutan)

it('harus berisi 5 kesalahan: pertama/terakhir/alamat/kota/negara bagian', function() {

return driver.getText("//ul[@class='alert alert-danger']/li[1]").then(function (e) { console.log('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan nama depan'); }).getText("//ul[@class='alert alert-danger']/li[2]").then(function (e) { console.log('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan nama belakang'); }).getText("//ul[@class='alert alert-danger ']/li[3]").then(function (e) { console.log('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan alamat'); }). getText("//ul[@class='alert alert-danger']/li[4]").then(function (e) { console.log('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan kota'); }).getText("//ul[@class='alert alert-danger']/li[5]").then(function (e) { console.log ('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan status'); }); });

• Mengulang Data untuk Memvalidasi Tautan/Teks/Halaman URL - "LoopDataExample1.js"

  • Contoh ini menunjukkan: Gunakan array data JSON untuk menyimpan tautan dan nama, lalu ulangi

    • Verifikasi setiap teks dan tautan URL
    • Klik tautan dan muat halaman

// Tautan data - tautan 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"}]; … // loop through each linkArray linkArray.forEach(function(d) { it('should contain text/link then goto page - ' + d.name, function() { return driver // pastikan Anda berada di halaman awal.url('https://www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // memverifikasi judul (title).should.be.equal("Web Driver IO - Halaman Uji Tutorial"); }) // cari URL.getAttribute('a=' + d.name, "href").then(function (link) { (link).should.equal(d.link); console.log('URL ditemukan: ' + d.link); }) // buka halaman URL dan verifikasi keberadaannya.click('a=' + d.name).waitForVisible("#js-repo-pjax- container", 10000.then(function() { console.log('Halaman Github Ditemukan'); }); }); });

• Mengulang Data Statis untuk Mengisi Bidang Formulir - "loopDataExample2.js"

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

    • Ulangi data untuk mengisi bidang formulir, lalu kirimkan formulir
    • Tunggu halaman hasil
    • Verifikasi nama depan / belakang di halaman hasil

// data array - firstName dan lastNamevar dataArray = [{"firstName": "Tony", "lastName": "Keith"}, {"firstName": "John", "lastName": "Doe"}, {"firstName": "John", "lastName": "Doe"}, {"firstName ": "Jane", "lastName": "Doe"}, {"firstName": "Don", "lastName": "Johnson"}]; … // loop melalui setiap dataArray dataArray.forEach(function(d) { it('should populate fields, sumbit page', function() { return driver // pastikan Anda berada di halaman awal.url('http:/ /www.tlkeith.com/WebDriverIOTutorialTest.html').getTitle().then(function (title) { // memverifikasi judul (title).should.be.equal("Web Driver IO - Halaman Tes Tutorial"); }).setValue("#fname", d.firstName).getValue("#fname").then(function (e) { (e).should.be.equal(d.firstName); console.log("First Nama: " + e); }).setValue("#lname", d.lastName).getValue("#lname").then(function (e) { (e).should.be.equal(d.lastName)); console.log("Nama Belakang: " + e); }).submitForm("#search-form").then(function() { console.log('Kirim Formulir Pencarian'); }).waitForVisible("#hasil-pencarian", 10000).then(function () { console.log('Halaman Hasil Ditemukan'); }).getText("//h1").then(function (link) { console.log('Teks ditemukan: ' + link); (link).should.equal("Selamat datang " + d.namadepan + " " + d.namabelakang + "."); }); }); });

• Validasi Properti CSS - "cssValidation1.js"

  • Contoh ini menunjukkan cara:

    • Validasi properti CSS berikut:

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

it('harus berisi warna teks kesalahan yang benar', function () { return driver.getCssProperty("//ul[@class='alert alert-danger']/li[1]", "color").then(function (hasil) { console.log('Warna ditemukan: ' + result.parsed.hex + " atau " + result.value); (result.parsed.hex).should.be.equal('#a94442'); }); });

it('harus berisi padding yang benar di sel tabel', function() {

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

it('harus berisi warna latar belakang yang benar di header tabel', function() {

return driver.getCssProperty("//table[@id='filelist']/thead", "background-color").then(function (result) { console.log('background color found: ' + result.parsed. hex); (result.parsed.hex).should.be.equal('#eeeeee'); }); });

Langkah 6: Tips dan Trik

• Debug:

  • Aktifkan logging di tingkat driver untuk debug lebih lanjut dan untuk membuat log.

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

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

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

  • console.log() - Gunakan untuk menampilkan informasi untuk menentukan status.
  • debug() - Gunakan jeda browser/skrip hingga enter ditekan pada baris perintah.

  • getText() - Gunakan untuk memverifikasi bahwa Anda berinteraksi dengan elemen yang benar.

    Sangat membantu dengan ekspresi xpath

// Klik pada Item 3 dari daftar

it('should click on Item 3 from list', function() { // use getText() untuk memverifikasi xpath benar untuk driver pengembalian elemen.getText("//ul[@id='mylist']/li [3]/div/div/a").then(function (link) { // gunakan console.log() untuk menampilkan informasi console.log('Link found: ' + link); (link).should.equal ("Item 3"); }) // gunakan debug() untuk menghentikan tindakan untuk melihat apa yang terjadi di browser.debug().click("//ul[@id='mylist']/li[3] /div/div/a").then (function () { console.log('Link clicked'); }) // menunggu formulir pencarian google muncul.waitForVisible("#tsf", 20000).then(function (e) { console.log('Hasil Pencarian Ditemukan'); }); });

• Gunakan Variabel Lingkungan untuk Mengubah Peramban Secara Dinamis:

  • Gunakan variabel lingkungan SELENIUM_BROWSER untuk memanggil browser yang berbeda tanpa mengubah skrip pengujian setiap kali.
  • Membutuhkan sedikit perubahan pengkodean untuk mendukung.

Perubahan Kode:

// memuat driver untuk browser

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

Browser yang Didukung:

• Internet Explorer - IE 8+ (Hanya Windows)

  SELENIUM_BROWSER=yaitu moka

• Firefox 10+ (Windows/Max/Linux)

  SELENIUM_BROWSER=firefox moka

• Chrome 12+ (Windows/Max/Linux)

  SELENIUM_BROWSER=chrome moka

• Opera 12+

  SELENIUM_BROWSER=opera moka

• Safari

  SELENIUM_BROWSER=safari moka

Pengujian:

• Untuk Windows gunakan git bash Shell:

  • SELENIUM_BROWSER=chrome moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Untuk Mac atau Linux, buka terminal:

  • SELENIUM_BROWSER=chrome moka
  • $ SELENIUM_BROWSER=chrome moka DynamicBrowser.js

• Pengujian Responsif:

  • Tentukan breakpoint berdasarkan proyek atau kerangka kerja (yaitu bootstrap).

  • Tentukan variabel lingkungan untuk setiap breakpoint:

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

  • Kembangkan perintah yang dapat digunakan kembali untuk membaca variabel lingkungan dan mengatur ukuran browser.

    Lihat contoh di bawah

  • Panggil perintah yang dapat digunakan kembali dalam skrip pengujian Anda.

// kode yang dapat digunakan kembali - pustaka // cuplikan kode if(bp == "DESKTOP") { obj.width = 1200; obj.tinggi = 600; obj.nama = bp; } else if(bp == "TABLET") { obj.width = 992; obj.tinggi = 600; obj.nama = bp; } else if(bp == "MOBILE") { obj.width = 768; obj.tinggi = 400; obj.nama = bp; }

// Tes skrip

before(function(done) { winsize = common.getWindowSizeParams(); … driver.addCommand('setWindowSize', common.setWindowSize.bind(driver)); } // atur ukuran jendela it('should set window size', function (selesai) { // hanya lebar yang penting driver.setWindowSize(winsize.width, winsize.height, function () {}).call(done); });

• Perintah yang Dapat Digunakan Kembali (Perintah Kustom):

  • Web Driver IO mudah diperpanjang.
  • Saya suka memasukkan semua perintah yang dapat digunakan kembali ke perpustakaan. (mungkin ini sekolah tua tetapi berhasil!)

common/commonLib.js

// verifikasiNamaLastPeriksaError()

// // Deskripsi: // Memverifikasi nama belakang dari pesan kesalahan validasi formulir // // Input: // nomor - indeks kesalahan (1-5) // Output: // tidak ada // var verifikasiLastNameCheckError = function () { var idx = argument[0], callback = argument[arguments.length - 1]; this.getText("//ul[@class='alert alert-danger']/li[" + idx + "]", function(err, e) { console.log('Kesalahan ditemukan: ' + e); (e).should.be.equal('Silakan masukkan nama belakang'); }).call(callback); }; // ekspor fungsi module.exports.verifyLastNameCheckError = verifikasiLastNameCheckError;

Berikut adalah perubahan spesifik yang diperlukan untuk memanggil fungsi yang dapat digunakan kembali

Lihat formFieldValidation.js untuk contoh kerja lengkap

// memerlukan perintah yang dapat digunakan kembali - CommonLib

umum = membutuhkan('./Common/CommonLib'); … // ikat perintah driver.addCommand('verifyFirstNameError', common.verifyFirstNameCheckError.bind(driver)); driver.addCommand('verifyLastNameError', common.verifyLastNameCheckError.bind(driver)); it('harus mengandung 2 kesalahan: nama depan/belakang', function () { // memanggil driver fungsi yang dapat digunakan kembali.verifyFirstNameError(1);.verifyLastNameError(2); });

• Struktur File/Direktori Proyek:

  • Berikut adalah struktur proyek yang khas:

    • "Proyek" - direktori proyek utama
      • README.md - readme untuk proyek global

      • "Umum" - direktori untuk fungsi global yang umum untuk semua proyek

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

      • "Product1" - direktori untuk produk 1

        • tes-script1.js
        • tes-script2.js

        • "Umum" - direktori untuk fungsi lokal ke proyek 1

          • prod1-lib.js - perpustakaan fungsi lokal untuk proyek 1
          • README.md - readme untuk fungsi lokal ke proyek 1

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

        • "Umum" - direktori untuk fungsi lokal ke proyek 2

          • prod2-lib.js - perpustakaan fungsi lokal untuk proyek 2
          • README.md - readme untuk fungsi lokal ke proyek 2

• Pecahkan skrip pengujian menjadi beberapa file:

  • Berikut adalah contoh penggunaan banyak file:

    • Sanity Check - skrip pengujian dasar untuk memverifikasi semuanya berfungsi
    • Elemen Statis dan Validasi Teks - verifikasi semua elemen dan teks
    • Validasi Kesalahan Formulir/Halaman - validasi kesalahan
    • Hasil Pencarian - uji konten dinamis

• Panggilan balik VS. Janji:

  • Versi 3 dari Web Driver IO mendukung panggilan balik dan janji.

    Janji adalah metode yang disukai karena mengurangi kode penanganan kesalahan. Silakan lihat di bawah contoh yang sama yang ditulis menggunakan panggilan balik dan janji.

Panggilan balik

// Setel/verifikasi nama depan/belakang menggunakan Callback

it('harus menetapkan/memverifikasi 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("Nama Depan: " + e); driver.setValue("#lname", "Keith", function (e) { driver.getValue("#lname", function (err, e) { (e).should.be.equal("Keith"); console.log("Nama Belakang: " + e); done(); }); }); }); }); });

Janji

// Tetapkan/verifikasi nama depan/belakang menggunakan Janji

it('harus menetapkan/memverifikasi nama depan/belakang menggunakan Janji', function () { return driver.setValue("#fname", "Tony").getValue("#fname").then(function (e) { (e).should.be.equal("Tony"); console.log("Nama Depan: " + e); }).setValue("#lname", "Keith").getValue("#lname"). then(function (e) { (e).should.be.equal("Keith"); console.log("Nama Belakang: " + e); }); });

Langkah 7: Lebih Banyak Sumber Daya

Berikut adalah beberapa sumber tambahan untuk referensi Anda:

• Grup Diskusi (Gitter)

  • Grup Diskusi IO Pengemudi Web
  • Grup Diskusi Moka
• Proyek menarik lainnya
  • Supertest - pernyataan
  • Chai - pernyataan

Langkah 8: Kesimpulan

Saya menghabiskan beberapa waktu untuk meneliti teknologi yang akan digunakan untuk proyek saya. Saya awalnya mulai dengan Selenium Web Driver tetapi beralih menggunakan Web Driver IO. Web Driver IO tampaknya lebih mudah digunakan dan lebih mudah diperluas (setidaknya dokumentasi untuk perluasan - perintah yang dapat digunakan kembali lebih baik).

Ketika saya pertama kali mulai melihat teknologi, sulit untuk menemukan contoh bagus yang sesuai dengan apa pun yang saya coba lakukan. Inilah alasan saya ingin berbagi informasi dan pengetahuan ini dengan Anda.

Teknologi bekerja jauh lebih baik dari yang saya harapkan namun ada kurva belajar yang terlibat. Setelah saya memahami bagaimana semua komponen bekerja bersama, saya dapat menulis skrip pengujian yang rumit dalam waktu yang sangat singkat. Skrip yang paling sulit adalah komponen berbasis JavaScript seperti pemilih tanggal dan pemilih modal.

Saya tidak pernah menyebut diri saya sebagai pengembang JavaScript dan saya juga tidak ingin menjadi ahli JavaScript, tetapi menggunakan teknologi ini telah memotivasi saya untuk mempertajam keterampilan JS saya.

Semoga artikel ini bermanfaat dan contohnya jelas dan informatif.

Tolong beri tahu saya jika Anda memiliki pertanyaan atau komentar.

Terima kasih, Tony Keith