Dengan satu atau lain cara, semua orang dihadapkan pada situasi ketika sesuatu yang tidak biasa terjadi dalam pengaturan dangkal. Kasus serupa terjadi pada kami ketika menguji aplikasi baru di lingkungan yang diuji seratus kali. Yang mengejutkan bagi kami adalah penggunaan beberapa fitur HTML5 dalam pekerjaan front-end, atau lebih tepatnya, ketidakmampuan untuk mengotomatiskan operasi pengujian drag & drop menggunakan alat Selenium WebDriver standar. Kami ingin membicarakan pengalaman ini.
Bayangkan sebuah proyek yang secara teknologi sangat mirip dengan yang sebelumnya (menurut kami, itu memiliki efek negatif kecil dalam hal memahami dengan benar dan menganalisis masalah yang muncul), tetapi versi Angular antara proyek berubah dari 1.x ke 5.x dan perpustakaan Selenide untuk autotest UI ditambahkan. .
Aplikasi web yang dikembangkan memiliki halaman dengan sekumpulan entitas tertentu yang dapat dipindahkan di antara mereka sendiri. Bayangkan keterkejutan kami ketika upaya melakukan swa-uji untuk memeriksa fungsi seret & jatuhkan menggunakan alat Selenide tidak berhasil. Tampaknya apa yang salah? Pada proyek sebelumnya, pada lingkungan pengujian yang sama, semuanya bekerja dengan sempurna.
Pertama, kami memeriksa fungsi seret & jatuhkan fungsi Selenide dan Selenium di browser saat ini menggunakan contoh aplikasi web lain. Semuanya berfungsi. Versi terbaru, Anda tidak pernah tahu ...
Kami memutuskan untuk memeriksa apakah kami seret dan ada di sana. Dan untuk membuat pilihan elemen yang salah saat menggunakan Angular cukup mudah. Kami duduk dengan pengembang front-end dan menemukan bahwa elemen seret dan lepas dipilih dengan benar.
Secara umum, lingkungan pengujian berfungsi, metode pengujian ditulis dengan benar, seret & letakkan "dengan tangan" berfungsi, tetapi autotest tidak berfungsi. Dan tidak ada alasan untuk ini pada pandangan pertama.
Akhirnya, kami menerima kenyataan masalahnya dan mencari solusi di Internet. Apa yang mengejutkan kami ketika kami menemukan masalah terbuka
Chrome WebDriver # 3604 dari 03/04/2016 . Bayangkan saja, sejak musim semi 2016, secara resmi ada masalah dengan drag & drop yang rusak di Chrome WebDriver, belum lagi browser lain. Tidak, itu pasti berfungsi, tetapi tidak ketika menggunakan HTML5. Dan ternyata dalam proses menganalisis masalah, aplikasi kami menggunakan implementasi drag & drop menggunakan HTML5.
Apa implementasi drag & drop untuk pengujian di HTML5? Di Internet, dua solusi ditemukan:
- Gunakan awt.Robot perpustakaan Java (atau clicker pihak ketiga);
- Gunakan javascript.
Kami mungkin mendapatkan sedikit uang atau terkubur dalam masalah, tetapi segera saya akan membuat reservasi bahwa solusi pertama yang dipilih tidak cocok untuk kami :)Apa yang bisa dikatakan tentang implementasi pada Robot:
- Kami mencegat mouse, meniru tindakan pengguna penuh;
- Kami menggunakan Selenium untuk menentukan koordinat elemen;
- Karena elemen Selenium digunakan, Anda tidak perlu mengubah lokasi. Kami sedang mencoba proyek untuk menggunakan xpath;
- Itu ditulis dalam Java, sintaksnya intuitif, dokumentasi yang bagus.
Tetapi sesuatu tentang implementasi JavaScript muncul di pikiran:
- Segala sesuatu terjadi pada JavaScript di dalam browser (tindakan tersembunyi dari mata penguji dan tindakan ini mengganggu kode);
- Dari perpustakaan js untuk pengujian drag & drop di Internet, satu ditemukan, sumbernya tidak begitu mudah ditemukan;
- Pustaka yang ditemukan harus selesai dengan file yang sesuai dengan kebutuhan Anda, karena hanya menerapkan seret & lepas bersih. Dan kita, misalnya, membutuhkan drag -> move -> hold -> drop;
- Perpustakaan diimplementasikan sebagai add-on jQuery, dan karena itu akan perlu untuk memahami struktur jQuery;
- Kita harus membuang locators ke css (jquery tidak berfungsi dengan xpath);
- Tidak mungkin menggunakan pencarian untuk elemen Selenium, Anda harus merekatkan pencari dengan "pena".
Pada pandangan pertama, solusi pertama jauh lebih nyaman dan diuji.
Secara umum, solusinya bekerja ... Namun, dalam proses pengembangannya, bidang masalahnya menjadi jelas.
- Gerakan mouse atau meminimalkan browser selama pelaksanaan tes menyebabkan gangguan selama pengujian dan penurunannya;
- Tidak dapat menjalankan tes secara paralel menggunakan JUnit / TestNG. Kecuali untuk memparalelkan melalui tugas terpisah di CI.
- Tidak dapat mengontrol mouse pada mesin jarak jauh melalui Selenium Grid / Selenoid;
- Jika terjadi kerusakan browser, Robot dapat dengan mudah mengklik / menarik sesuatu di desktop atau di aplikasi terbuka lainnya.
Namun pada akhirnya, implementasi JavaScript ...Saya ingin mengatakan bahwa kami berhasil memecahkan masalah menggunakan pelacak xpath menggunakan jquery.xpath.js jQuery plugin.
Dan perpustakaan drag_and_drop_helper.js (sumber di
sini ) menjadi alat utama untuk mengendalikan operasi drag & drop. Tidak ada gunanya memilah pekerjaannya, tetapi tentang bagaimana kami mengatasinya sedikit kemudian.
Sekarang langsung pada implementasi dalam tes. Di Selenide, semuanya sederhana. Sebelum menggunakan drag & drop, Anda perlu memuat pustaka JS yang digunakan:
StringBuilder sb = new StringBuilder(); sb.append(readFile("jquery-3.3.1.min.js")); sb.append(readFile("jquery.xpath.min.js")); sb.append(readFile("drag_and_drop_helper.js")); executeJavaScript(sb.toString());
Secara alami, jQuery perlu dimuat jika belum ada dalam aplikasi.
Di versi asli perpustakaan, cukup menulis yang berikut ini:
executeJavaScript("$('" + source + "') .simulateDragDrop({ dropTarget: '" + target + "'});");
sumber dan target adalah css locator dari elemen drag and drop.
Seperti yang dinyatakan di atas, kita sering menggunakan pelacak-xpath dalam proyek, jadi setelah sedikit perbaikan, perpustakaan mulai menerimanya:
executeJavaScript("$(document).xpath('" + source + "').simulateDragDrop({ dropTarget: '" + target + "'});");
Sekarang, sebenarnya, tentang perpustakaan drag_and_drop_helper.js. Ada potongan-potongan di blok kode simulateEvent yang bertanggung jawab untuk peristiwa mouse tertentu. Tidak ada gunanya mencantumkan kemungkinan acara operasi drag & drop di HTML5; informasi ini mudah ditemukan.
Untuk pengujian, kami perlu mengimplementasikan fungsi yang menggerakkan elemen dan menahan mouse pada elemen target. Dan ini, seperti di perpustakaan sumber, tidak disediakan.
Dengan analogi, kami menambahkan acara dragenter ke perpustakaan (antara dragstart dan drop).
type = 'dragenter'; var dragenterEvent = this.createEvent(type, {}); dragenterEvent.dataTransfer = event.dataTransfer; this.dispatchEvent($(options.dropTarget)[0], type, dragenterEvent);
Namun, ini tidak cukup. Bagaimanapun, acara penahanan akan segera diselesaikan. Menempatkan jeda tetap antara acara dragEnter dan drop sepertinya bukan pilihan yang paling nyaman. Bagaimanapun, pada awalnya tidak diketahui berapa lama aplikasi perlu memproses suatu peristiwa, jumlah dan waktu pemeriksaan dalam tes tidak diketahui. Penundaan antara acara-acara ini setidaknya harus dikelola. Alih-alih, kami memutuskan untuk memecah pengujian seret & jatuhkan ke dalam beberapa tahapan dan tidak untuk mengemulasi set lengkap aktivitas mouse, yaitu, menambahkan kemampuan untuk mengelola daftar peristiwa yang terlibat melalui parameter.
Dan semuanya tampak baik-baik saja, kekurangan baru tidak muncul, dan beberapa yang lama tidak lagi seperti itu, dan yang paling penting, tugas yang diberikan sedang dilakukan. Tampaknya semuanya sempurna. Namun, alat pengembangan modern meletakkan pemrosesan jauh dari dua peristiwa dan menggunakan berbagai parameter elemen yang dipindahkan. Misalkan kita memiliki solusi ini ketika menjalankan drag & drop yang menyebabkan kesalahan dragStartListener. Tapi karena itu tidak merusak apa pun, kami kami tidak mulai mengubah apa pun. Namun, di beberapa aplikasi lain, Anda mungkin harus menyelesaikan momen ini.
Kami ingin meringkas hal di atas. Yang mengejutkan, sebuah fakta! HTML5 dirilis kembali pada tahun 2013, browser telah mendukungnya selama beberapa tahun, aplikasi telah dikembangkan untuk itu, tetapi webDriver, sayangnya, masih tidak tahu bagaimana cara menggunakan kemampuannya. Dan pengujian operasi drag & drop harus diimplementasikan dengan alat pihak ketiga, menyulitkan arsitektur dan pergi ke segala macam trik. Ya, ada alat-alat seperti itu dan "menari dengan rebana" hanya membuat kita lebih kuat, tetapi saya masih ingin memiliki solusi yang berfungsi di luar kotak.
Dalam pengalaman kami, kami dapat mengatakan bahwa masalah seperti itu tidak begitu umum hari ini, meskipun drag & drop digunakan di mana-mana. Mungkin masalahnya adalah pilihan teknologi pengembangan aplikasi web. Namun, persentase aplikasi menggunakan HTML5 terus berkembang, kerangka kerja sedang berkembang, dan akan lebih bagus jika pengembang peramban dan driver untuk mereka juga tidak ketinggalan.
PS Dan akhirnya, sedikit lirik. Saya ingin menyarankan semua orang, jika mungkin, untuk tidak memperhitungkan kedangkalan situasi atau kedekatan lingkungan pengujian dengan beberapa jenis pola ketika menganalisis masalah. Ini dapat menyebabkan kesimpulan yang salah atau kehilangan waktu.