Pada artikel sebelumnya, saya berbicara tentang tes unit NG. Hari ini saya akan berbicara tentang pengujian E2E (ujung ke ujung).
Ketika kami menguji titik fungsional tunggal dari modul tertentu, pengujian unit paling cocok. Namun, ketika bug terjadi ketika pengguna berinteraksi dengan beberapa halaman, pengujian unit tidak akan berfungsi. Pada saat ini, E2E harus digunakan untuk mensimulasikan operasi pengguna dan mengembalikan situs masalah. Tentu saja, menggunakan tes E2E juga dapat menguji ketahanan program. Banyak hal yang unit pengujian tidak dapat dilakukan dengan tes E2E.
Sebelumnya, NG menggunakan skenario sudut runner untuk menjalankan tes E2E, dan sekarang telah diganti dengan busur derajat untuk menjalankan E2E.
Busur derajat
Gotraktor adalah kerangka kerja yang digunakan dalam AngularJS untuk menguji E2E. Itu sendiri adalah modul NPM dan dibangun di atas WebDriverJS. Gotraktor dapat benar -benar memungkinkan kasus uji Anda untuk berjalan di browser dan sepenuhnya mensimulasikan perilaku pengguna yang sebenarnya.
Berikut adalah beberapa alamat sumber dayanya:
1. API uji disediakan oleh busur derajat
2. Contoh Penggunaan Sederhana dari Got
3. Panduan WebDriverJS, ini adalah inti dari ketergantungan busur derajat, modul NPM disebut selenium-webdriver
Prinsip Operasi Bahan Bahan
GotRactor tergantung pada hal -hal berikut untuk menjalankan tes E2E:
1. Webdriver API, yang merupakan WebDriverJS yang disebutkan di atas, terkait dengan JS API yang disediakan oleh Selenium dengan pengujian front-end.
2. Selenium Server, paket jar backend, digunakan untuk berkomunikasi dengan driver browser
3. Driver Browser Webdriver digunakan untuk menampilkan konten situs web nyata dan berkomunikasi dengan Selenium Server. Ini adalah tempat untuk meneruskan operasi browser nyata.
Seluruh proses operasi adalah sebagai berikut
Jika Anda ingin tahu lebih banyak tentang interaksi sebelumnya dari komponen -komponen ini, silakan klik di sini
Gunakan proyek benih NG untuk menjelaskan e2e
Kami menggunakan proyek benih yang disediakan oleh NG untuk menjelaskan contoh E2E nyata. Pertama, gunakan perintah berikut untuk mendapatkan proyek benih
Salinan kode adalah sebagai berikut:
Git Clone https://github.com/angular/angular-seed.git
Lalu jalankan
Salinan kode adalah sebagai berikut:
Instal NPM
Instal semua dependensi yang terkait dengan
Di sini kita pertama -tama akan berbicara tentang file konfigurasi yang diperlukan untuk menjalankan tes E2E. Anda dapat melihat bahwa file test/phartactor-conf.js digunakan untuk mengonfigurasi fungsi terkait. Mari fokus pada beberapa atribut
1.specs mewakili jalur file uji yang akan dijalankan, dan yang ditulis di sini adalah e2e/*. Js
2.BaseUrl mewakili alamat root dari lompatan halaman antara browser dalam file uji
3. Kemampuan mewakili browser mana yang akan digunakan untuk menjalankan kasus uji, seperti menggunakan chrome, Anda dapat mengaturnya seperti ini
Salinan kode adalah sebagai berikut:
kemampuan: {
'Browsername': 'Chrome'
}
Kerangka kerja mewakili kerangka kerja tes mana yang akan digunakan, berikut adalah Jasmine
Jika Anda ingin tahu lebih banyak tentang file konfigurasi ini, silakan klik di sini untuk melihatnya.
Setelah berbicara tentang file konfigurasi, mari kita lihat cara menulis kasus tes dan memposting contoh di situs web resmi terlebih dahulu.
Salinan kode adalah sebagai berikut:
'Gunakan ketat';
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
jelaskan ('aplikasi saya', function () {
browser.get ('index.html');
itu ('harus secara otomatis mengarahkan kembali ke /view1 saat hash lokasi /fragmen kosong', function () {
harapkan (browser.getLocationAbsurl ()). TOMATCH ("/view1");
});
jelaskan ('view1', function () {
sebelum kembali (function () {
browser.get ('index.html#/view1');
});
itu ('harus membuat view1 saat pengguna menavigasi ke /view1', function () {
harapkan (element.all (by.css ('[ng-view] p')). first (). getText ()).
tomatch (/parsial untuk tampilan 1/);
});
});
jelaskan ('view2', function () {
sebelum kembali (function () {
browser.get ('index.html#/view2');
});
itu ('harus membuat view2 saat pengguna menavigasi ke /view2', function () {
harapkan (element.all (by.css ('[ng-view] p')). first (). getText ()).
tomatch (/parsial untuk tampilan 2/);
});
});
});
Pertama -tama, sintaks di atas adalah metode penulisan yang didukung oleh kerangka kerja melati. Jika Anda tidak memahami penggunaannya, Anda dapat mengklik di sini
Di sini kita hanya akan berbicara tentang beberapa metode dan sifat umum yang disediakan oleh busur derajat dalam contoh di atas
1.Browser, objek global, mewakili contoh dari browser saat ini. Metode GET yang umum digunakan digunakan untuk mengimplementasikan perubahan alamat browser.
2. Elemen, objek global, menyediakan fungsi seperti jQuery yang bertanggung jawab untuk menemukan elemen dokumen, dan sering digunakan dalam penggunaan bersama oleh objek.
3. Dengan objek global, menyediakan jenis pemilih, misalnya, Anda dapat menemukan elemen melalui CSS, model, ikat, dan fitur lainnya.
Untuk metode elemen dan dengan, silakan merujuk ke dokumentasi API busur derajat di atas
Setelah banyak mengatakan, sudah waktunya untuk menjalankan kasus uji di atas, perintahnya relatif sederhana
Salinan kode adalah sebagai berikut:
NPM Run Update-Webdriver
Ini bertanggung jawab untuk mengunduh driver browser yang relevan dan paket toples selenium-server. Secara umum, ini akan gagal karena kedua sumber daya ada di Google Server, sehingga Anda dapat menggunakan browser untuk menjelajahi dinding untuk mengunduhnya secara terpisah. Alamatnya adalah sebagai berikut:
1. Alamat driver chrome, umumnya unduh file chromedriver_2.9.zip.
2. Unduh Paket Jar Lokal Selenium-Server, umumnya unduh file selenium-server-standalone-2.40.0.jar.
Kemudian salin selenium-server ke folder selenium dalam paket busur derajat. Jika perintah di atas diatur waktunya, file akan muncul di sini, tetapi akan kosong, ganti saja secara langsung. Anda juga perlu menyalin file setelah dekompresi ChromedRiver_2.9.zip ke sini.
Akhirnya, jalankan perintah berikut untuk melihat hasil tes
Salinan kode adalah sebagai berikut:
NPM menjalankan busur derajat
Jika Anda ingin tahu lebih banyak tentang baris perintah di proyek NG Seed, Anda dapat mengklik di sini untuk melihatnya
Meringkaskan
Tes NG E2E jauh lebih rumit daripada konfigurasi uji unit, tetapi dapat melakukan banyak hal. Jika Anda sangat berharga, Anda juga dapat mencobanya. Jika Anda memiliki pertanyaan, Anda dapat membalas komentar.