Pada tahap awal pengembangan, Anda bisa bertahan dengan pengujian manual sesuai dengan rencana pengujian yang diberikan. Tetapi dengan munculnya arsitektur modular, ketika beberapa tim pengembangan dapat membuat perubahan pada saat yang sama, ada peningkatan eksponensial dalam jumlah skrip pengujian. Mengusir mereka secara manual semakin sulit.
Pada artikel ini, kita akan berbicara tentang bagaimana kita di Virto Commerce mengotomatiskan pengujian skenario bisnis penting.
Kenapa semua ini?
Saya akan memberikan contoh dari pengalaman kami - suntingan kecil bergaya CSS membuat tombol "Tambahkan produk ke troli" tidak lagi terlihat di perangkat seluler. Sayangnya, dalam bentuk ini, itu diuji dan mencapai rilis. Ada banyak contoh di mana fungsionalitas baru, koreksi kecil dan koreksi, memecahkan skenario bisnis penting. Sayangnya, kami sering belajar tentang mereka setelah rilis dan dari pelanggan. Untuk menghindari hal ini, lebih dari dua tahun yang lalu, kami mulai mengimplementasikan pengujian E2E sebagai bagian dari proses pengembangan. Setelah itu, sebagian besar kesalahan diidentifikasi pada tahap pengembangan, dan bukan pada lingkungan pertempuran.
E2E sedang menguji skenario bisnis dari awal hingga selesai. Tes E2E mensimulasikan tindakan pengguna nyata di browser nyata, sama seperti pengguna nyata akan menggunakan solusi.
Kami menggunakan tes E2E:
- Untuk mengontrol regresi
- Untuk menggambarkan sistem
- Untuk integrasi ke CI / CD
Ini termasuk memastikan bahwa semua modul berfungsi dan bekerja bersama dengan benar dan dapat diprediksi.
Tes E2E memungkinkan kami untuk mencakup bagian aplikasi yang tidak diverifikasi oleh Unit dan tes integrasi. Hal ini disebabkan oleh fakta bahwa pengujian Unit dan pengujian integrasi mencakup bagian-bagian aplikasi secara individual dan menguji bagian fungsionalitas yang terisolasi. Bahkan jika bagian-bagian ini bekerja dengan baik sendiri, Anda tidak dapat sepenuhnya yakin apakah mereka akan bekerja bersama. Dengan demikian, kehadiran satu set tes E2E di atas Unit dan integrasi memungkinkan kami untuk menguji seluruh solusi dengan cara yang paling lengkap.

Menulis dan menjalankan tes E2E membutuhkan waktu dan sumber daya. Google, misalnya, menawarkan pemisahan 70/20/10: tes unit 70%, tes integrasi 20%, dan tes E2E 10%. Kombinasi yang tepat akan berbeda untuk setiap proyek, tetapi secara umum harus mempertahankan bentuk piramida.
Tes E2E tidak sederhana dan pada awalnya tampak mahal untuk dikembangkan dan dipelihara. Di Virto Commerce, kami terus bekerja untuk menyederhanakan pengembangan dan mengurangi biaya untuk mendukung tes E2E ketika rilis baru dirilis. Kami berharap bahwa solusi kami akan membantu Anda menyederhanakan penggunaan E2E dalam proyek Anda.
Kisah pengguna yang bagus - hampir siap untuk tes E2E
Anda dapat sering mendengar bahwa menulis tes E2E membutuhkan waktu, sulit untuk mempertahankannya. Ya, begitulah, mereka tidak mudah dipelihara dengan cara yang sama seperti dokumentasi. Mengapa tidak menjadikan mereka bagian dari proses pengembangan dan menulis dokumentasi, sehingga menangkap skenario bisnis.
Membuat E2E dimulai dengan deskripsi kisah pengguna. Seberapa hati-hati kami menyiapkan deskripsi pada tahap ini, akan sangat mudah bagi tim pengembangan untuk menulis tes E2E yang akan menunjukkan bahwa semua sistem bekerja dengan benar ketika menerapkan skenario ini.
Contoh kisah pengguna untuk tombol untuk menambahkan item ke troli:
GIVEN I am signed in to the storefront AND Some product page is open (/product-name) AND my cart is empty WHEN I click to the "Add" button on the item with the following parameters: THEN I should see a dropdown menu where I can choose from 1 to 10+
yang kemudian berubah menjadi tes berikut:

Setelah beberapa waktu, penulis teknis atau tim pengembangan baru, alih-alih membaca dokumentasi, dapat menggunakan tes untuk menjalankan dan melihat skrip yang diterapkan di browser nyata atau secara otomatis merekam tutorial video.
Mudah - Instal dan Konfigurasi Busur Derajat
Sebagai alat pengujian, kami memilih Protractor, sistem otomatisasi pengujian E2E open source yang dikembangkan khusus untuk aplikasi web AngularJS.
Protractor adalah program Node.js yang dibangun di atas WebDriverJS. Protractor berfungsi sebagai integrator solusi yang menggabungkan teknologi canggih seperti Node.js, Jasmine, Selenium, Mocha, Mentimun dan Web.

Busur derajat tahu tentang AngularJS, yang membuatnya lebih mudah untuk menulis tes tanpa menghabiskan waktu menunggu proyek AngularJS diluncurkan, menyegarkan halaman, dll. ... Pengalaman menunjukkan bahwa ambang masuk pengembang sangat rendah.
Gunakan npm untuk menginstal busur derajat secara global:
npm install -g protractor
webdriver-manager adalah utilitas yang memudahkan Anda mengkonfigurasi instance Selenium Server. Selenium Server - akan digunakan untuk mentransfer perintah antara tes dan lingkungan nyata.
Jalankan perintah ini untuk menginstal atau mengunduh:
webdriver-manager update
Dan jalankan:
webdriver-manager start
Perintah ini memulai Selenium Server dan membuka jendela untuk menampilkan log. Busur derajat akan mengirim permintaan ke server ini untuk mengontrol browser.
Busur derajat siap untuk pergi. Penjelasan lebih rinci tentang langkah-langkah dasar untuk menulis tes dapat ditemukan di
situs utama .
Struktur proyek yang benar
Tes E2E selalu dalam repositori yang sama dengan aplikasi atau tema.
Kami menolak untuk menggunakan layanan pengujian E2E eksternal, karena, dengan kesederhanaan yang tampak, layanan mempersulit peluncuran pengujian pada mesin lokal dan pemeliharaan selanjutnya. Kode dan tes terletak di tempat fisik yang berbeda, yang mengarah pada fakta bahwa pengembang lupa untuk memperbaruinya.
Menemukan kode aplikasi dan menguji dalam satu repositori membuatnya lebih mudah untuk memelihara dan memelihara proyek.
Contoh dasar dapat
ditemukan di sini .
Proyek ini membuat folder E2E dari struktur berikut, yang menggunakan Page Objects untuk mengatur pengujian.
E2E/ |--cart | |--cart.pageObject.js | |--*.spec.js |--home | |--home.pageObject.js | |--*.spec.js |--conf.js
- conf.js - file konfigurasi berada di root
- untuk setiap objek antarmuka foldernya dibuat, di mana ia berada
- file pageObject untuk menjelaskan elemen-elemen pada halaman
- beberapa file spesifikasi - di mana tes berada
Dalam proyek tersebut, penggunaan:
- baseUrl - yang memungkinkan Anda menggunakan tes untuk menguji lingkungan yang berbeda
- params - yang digunakan untuk menemukan elemen kunci pada halaman atau mengisi formulir
github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L21
github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L29Parameter ini kemudian dapat diubah oleh administrator TI ketika mengkonfigurasi peluncuran di Jenkins, dalam mode otomatis untuk lingkungan DEV dan QA.
protractor conf.js --baseUrl=https://some-url.azurewebsites.net/--params.api.endpoint=https://some-admin-url.azurewebsites.net
Optimalisasi elemen pencarian di halaman
Busur derajat menawarkan metode yang sangat fleksibel untuk menemukan elemen pada halaman:
- oleh.binding
- by.model
- oleh.repeater
- oleh.className
- by.css
- by.select ()
- oleh.partialButtonText ()
- ...
Tetapi dalam proyek terbaru, kami sampai pada model bahwa elemen yang berpartisipasi dalam tes ditandai dengan kelas khusus dengan awalan busur derajat. Dalam pengujian, elemen-elemen ini ditemukan oleh byclassName.
Ini menyederhanakan pemeliharaan tes dan membuat perubahan, sehingga programmer atau alat otomatis dapat menentukan bahwa elemen yang berpartisipasi dalam tes E2E telah diubah.
Browser apa yang kami uji
Secara default, semua proses dikonfigurasikan untuk menjalankan tes di browser Chrome. Seperti pengalaman kami menggunakan tes E2E di Chrome menunjukkan, itu memungkinkan kami untuk mengidentifikasi sebagian besar masalah dan pada saat yang sama tidak menyulitkan penulisan tes.
Jika Anda perlu menguji di beberapa browser, maka ini dilakukan di satu sisi dengan sangat sederhana, di sisi lain ada kesulitan dengan konfigurasi dan adanya kesalahan dalam implementasi driver untuk browser yang berbeda.
Di berbagai proyek klien, kami juga menguji di Firefox, Safari dan IE. Tes Firefox sebenarnya menggandakan hasil di Chrome. Tetapi peluncuran E2E di Safari dan IE memerlukan konfigurasi sistem, membuka port, menonaktifkan keamanan dan mengedit registri, tetapi ini memungkinkan untuk secara otomatis mendeteksi banyak masalah dengan tampilan dan ketidakcocokan skrip dalam aplikasi.
Untuk menambahkan pengujian di browser, Anda perlu mengunduh dan menginstal
WebDriver yang diperlukan.Dan tambahkan multiCapabilities bagian baru dalam file konfigurasi:
exports.config = { … multiCapabilities: [ { 'browserName' : 'chrome' }, { 'browserName' : 'firefox' } ], … }
Karena aplikasi web modern mendukung kerja dengan resolusi yang berbeda, ini harus dipertimbangkan ketika menulis tes.
Busur derajat memungkinkan Anda untuk menjalankan tes untuk resolusi layar yang berbeda.
Untuk melakukan ini, ada opsi untuk mengatur ukuran layar melalui browser.driver.manage (). Window (). SetSize. Dalam contoh ini, kami mengatur ukuran layar ke 1600 oleh 800.
exports.config = { … capabilities: { 'browserName': 'chrome' }, onPrepare: function() { browser.driver.manage().window().setSize(1600, 800)
Atau melalui bagian kemampuan multi di file konfigurasi. Dalam contoh ini, kami akan menjalankan tes di browser Chrome untuk tiga resolusi berbeda.
multiCapabilities: [ { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1920,1080'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1680,1050'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1600,900'] }, specs: ['specs.js'] }]
E2E adalah bagian dari dokumentasi.
Sekali lagi, E2E bagus sebagai elemen dokumentasi, menunjukkan apa yang dilakukan oleh tim pengembangan. Tim pengembang atau penulis teknis baru dapat menjalankan tes dan menonton skrip yang diimplementasikan secara langsung. Karena itu, dokumentasikan bagaimana karyawan baru dapat menjalankan tes ini.
Integrasi CI / CD
Setiap tes harus relevan dan dijalankan secara berkala. Jika ini tidak dilakukan, maka Anda tidak perlu membuang waktu menulis tes, mereka akan menjadi tidak berharga dalam beberapa minggu, dan akan lebih mudah untuk menulis ulang dari awal.
Kami telah mengambil langkah penting dalam mengintegrasikan tes E2E ke dalam CI / CD dan menjadikan E2E bagian dari proses penyebaran.
Integrasi ke CI / CD memungkinkan Anda untuk menjalankan tes E2E secara otomatis untuk lingkungan DEV dan QA untuk memberikan umpan balik dan menambah wawasan bahwa sistem tetap beroperasi bahkan setelah perubahan kecil. Dan jika keputusan dilanggar, maka beri informasi kapan dan pada perubahan apa ini terjadi.
Pertama, tes diluncurkan ketika salah satu modul diperbarui dan versi baru masuk ke lingkungan QA.
Kedua, tes E2E dijalankan pada malam hari dengan jadwal pada lingkungan DEV dan QA dalam mode otomatis.
Ketiga, jika perlu, pengembang sendiri dapat menjalankan tes sesuai kebutuhan.
Berdasarkan hasil peluncuran, semua peserta proyek dari tim pengembangan ke klien menerima email dengan laporan HTML tentang hasil tes.
Penting untuk mencatat ketersediaan informasi wajib tentang hasil pengujian kepada seluruh tim proyek. Ini memberi kepercayaan kepada tim pengembangan di satu sisi dan mengelola harapan pelanggan di sisi lain. Tim pengembang dapat membuat perubahan lebih cepat, sambil menyadari bahwa skenario bisnis utama berfungsi. Dan klien menerima informasi tentang kualitas proyek, bahwa sebagian besar masalah diidentifikasi sebelum rilis. Dan bahkan jika masalah diidentifikasi oleh tes dan rilis ditunda, maka muncul informasi tentang apa yang sebenarnya rusak dan bagaimana proses pengerjaan koreksi berjalan.
Kami menggunakan versi plugin protractor-jasmine2-html-reporter yang telah dimodifikasi (https://github.com/VirtoCommerce/protractor-jasmine2-html-reporter) untuk menghasilkan laporan. Plugin ini menghasilkan laporan HTML dan menyisipkan tangkapan layar elemen inline.
Menginstalnya sangat sederhana:
- Instal protractor-jasmine2-html-reporter
- Menambahkan protractor-jasmine2-html-reporter ke proyek
- Laporan koneksi pada metode Siapkan
var HtmlScreenshotReporter = require('protractor-jasmine2-html-reporter'); var reporter = new HtmlScreenshotReporter(self.options); var name = browser.suite; self.options.reportTitle = name + '-report.html'; jasmine.getEnv().addReporter(reporter);

Terus meningkatkan proses
Terus bekerja dalam tim untuk mengurangi biaya dan meningkatkan kecepatan pengembangan dan dukungan tes E2E.
Latih dan tinjau proses penulisan tes. Lihat komponen dan layanan baru mana yang dapat digunakan.
Misalnya, kami sedang mempertimbangkan opsi koneksi Mentimun. Mentimun adalah alat untuk menjalankan tes otomatis yang ditulis dalam bahasa sederhana.
Kesimpulan
Tes E2E tidak begitu sederhana dan pada awalnya tampak mahal untuk dijaga, tetapi mereka sangat berharga karena merupakan indikator kesehatan dari skenario bisnis yang penting.
Dari pengalaman menggunakan tes E2E dalam proyek Virto Commerce, kami dapat menarik kesimpulan berikut:
- Menulis E2E adalah bagian dari proses pengembangan. Dan ini sangat penting, karena menguji kerja proses bisnis dan seluruh solusi. Sejumlah besar kesalahan terdeteksi pada tahap DEV dan QA, dan tidak pada lingkungan tempur.
- Tes dan kode harus dalam repositori yang sama dan tersedia untuk pengembang.
- Kualitas tes E2E tergantung pada deskripsi cerita pengguna, jika ditulis dengan benar, tim pengembangan lebih mudah untuk membuat tes E2E.
- Tes E2E dapat bertindak sebagai dokumentasi dan catatan skrip dibuat.
- Tes E2E harus dijalankan secara terus menerus dan otomatis pada lingkungan DEV dan QA. Jika Anda tidak mengotomatiskan peluncuran, maka Anda tidak perlu membuang waktu untuk tes, mereka akan menjadi tidak berharga dalam beberapa minggu.
- Hasil tes harus tersedia untuk semua peserta proyek. Ini memberikan gambaran tentang apa yang terjadi.
- E2E bukan solusi 100% untuk semua masalah. Ikuti aturan 70/20/10: tes unit 70%, tes integrasi 20% dan tes E2E 10%
- Terus bekerja dalam tim untuk mengurangi biaya dan meningkatkan kecepatan pengembangan dan dukungan tes E2E.
Referensi
www.protractortest.orgBusur Derajat untuk AngularJS - Menulis tes ujung ke ujung tidak pernah semenyenangkan inigithub.com/angular/protractor/blob/master/docs/page-objects.mdgithub.com/VirtoCommerce/vc-storefront/tree/master/VirtoCommerce.Storefront.Test/e2eKatakan Tidak untuk Lebih Banyak Lagi Tes End-to-End
testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html