Pengujian End To End Javascript
Pembaruan: Beberapa hari setelah posting ini diterbitkan, alat otomatisasi browser baru muncul! Playwright menyediakan dukungan lintas-browser asli tanpa menggunakan protokol WebDriver. Ditambahkan ke posting ini. Dan saya harus mengatakan, JavaScript adalah masa depan, dan masa depan akan terjadi hari ini!
Status Otomasi Uji Browser
Pengujian end to end digunakan untuk mengikuti pendekatan yang sangat konservatif. Semua orang menggunakan Java/Python/Ruby dengan Selenium dan saya benar-benar merasa bahwa tidak ada alternatif yang baik untuk pengaturan ini. Selenium ada di mana-mana, dan pada titik tertentu mengubah protokol ke standar W3C. Sekarang kita memiliki standar W3C, mengapa kita membutuhkan alternatif?
Kami selalu membutuhkan alternatif dan komunitas teknologi sangat cocok untuk membuat alternatif! Namun, sebelum JavaScript membuat kemajuan yang luar biasa, tidak ada platform lain yang menawarkan solusi yang benar dan populer. Saat ini, sudah ada tiga alternatif untuk Selenium di ekosistem JavaScript, dan ada ruang untuk yang baru. Jadi, menurut saya, mengalihkan semua otomatisasi pengujian browser ke JavaScript hanya masalah waktu. Ini adalah pernyataan yang sangat ambisius, tetapi dari perspektif bisnis, memilih alat yang lebih cepat dan lebih stabil dari pada Selenium pada Java yang lebih lama akan secara dramatis meningkatkan produktivitas dan hasil pengujian pengembang perangkat lunak.
Satu-satunya masalah dengan beralih adalah JavaScript. Sebagian besar insinyur otomasi pengujian dilatih untuk menggunakan Selenium dalam bahasa back-end tradisional seperti Java dan Python, dan beralih ke bahasa dan alat baru dapat menjadi masalah. Otomatisasi pengujian dilakukan di Jawa, dan semua insinyur baru dilatih dari awal di Jawa dan Selenium, yang diulang dari tahun ke tahun.
Javascript vs Java vs Python
dipahami. Tetapi mengapa JavaScript begitu populer dan mengapa ia memenangkan pertempuran? Pada titik ini, sulit untuk mengatakan bahwa kami menang dalam jumlah, tetapi kami menang dalam teknologi. Berikut adalah beberapa faktor yang mendorong evolusi pengujian browser JavaScript.
- JavaScript sudah ada di browser. Titik yang jelas. Mengapa belajar dua bahasa ketika Anda bisa menggunakan satu?
- Electron — Kerangka kerja yang memungkinkan Anda untuk membungkus browser Anda di dalam mesin JavaScript. Saya dapat membuat set Selenium alternatif seperti Nightmare.js dan Cypress.io
- Chrome Dev Tools Protocol— Pendapat dari tim pengembangan Chrome untuk memperkenalkan protokol berpemilik (standar non-W3C) untuk mengontrol browser.
Kesederhanaan bahasa, fleksibilitas, npm, dan munculnya aplikasi front-end juga dapat disebutkan sebagai poin tambahan yang telah meningkatkan minat dalam pengujian browser di JS. Namun, tidak seperti pengaturan tradisional (Java, Python), JavaScript tidak dirancang untuk pengujian end to end.
Itu betul.
Masalahnya di sini adalah fitur utama JavaScript. Asynchrony sama sekali tidak berguna dan bahkan berbahaya dalam hal pengujian di browser.
- Semua perintah browser harus dijalankan secara asinkron (karena selalu membutuhkan waktu lama untuk menyelesaikannya)
- Setiap tes adalah daftar perintah itu
- Setiap tes harus linier dan dapat diprediksi
Singkatnya, Anda perlu menjalankan semua perintah satu per satu. Jika tidak, tes mungkin tidak dapat diprediksi. Misalnya, jika Anda mengirim browser dua perintah, "Periksa Elemen" dan "Klik", Anda tidak akan tahu perintah mana yang akan selesai lebih dulu. Tes ini selalu gagal karena alasan acak. Untuk mengurangi ketidakstabilan ini, teknisi otomatisasi pengujian harus selalu mengingat bahwa semua perintah ke browser perlu disinkronkan agar dapat lulus pengujian. Itu tidak ada di Jawa.
Alat untuk pengujian browser
xDan sekarang saya akan memberi Anda gambaran umum tentang semua alat uji di luar sana. Saya juga berbagi kekuatan dan kelemahan mereka, serta masalah implementasi.
Cypress.io
Alternatif Selenium paling populer saat ini ditawarkan oleh Cypress.io. Cypress.io dibangun dengan gagasan bahwa jika JavaScript berjalan di browser, Anda juga perlu menjalankan tes di browser. Mereka menggunakan Electron untuk membuat pembungkus di browser dan mengemasnya sebagai solusi fungsionalitas yang berdiri sendiri. Cypress.io telah menjadi populer karena sangat mudah digunakan, terutama untuk para insinyur front-end. Bekerja dengan Cypress.io semudah menggunakan JQuery di masa lalu. Cypress.io lebih cepat dan lebih stabil daripada Selenium, dan Anda bisa mendapatkan keuntungan dari menjalankannya di dalam aplikasi Anda.
Cypress.io hebat! Namun, pertimbangkan batasan itu sebelum memilih Cypress.io. Cypress.io bekerja secara internal dalam konteks browser, sehingga Anda tidak dapat mengakses fitur eksternal seperti:
- gunakan iframe
- Manajemen tab
- Kelola banyak windows
- Unggah file
- Unduh file
- Kirim native event keyboard dan mouse
Cypress.io juga mempersulit pengujian interaksi dengan situs web pihak ketiga. Kurangnya dukungan lintas browser.
Cypress.io sangat efektif untuk menguji aplikasi atau komponen satu halaman. Cypress.io dicintai oleh pengembang! Tetapi sekali lagi, teknologi di balik Cypress.io tidak selalu memenuhi persyaratan.
WebDriver
Dalam hal pengujian lintas-browser, teknisi pengujian masih lebih memilih WebDriver. Ya, WebDriver adalah standar, dan bahkan browser paling canggih seperti Safari dan IE mematuhi standar ini.
Ketika datang untuk mengimplementasikan WebDriver, ada dua implementasi umum dari JavaScript.
- Protractor — Dibangun di atas perpustakaan Selenium resmi, ia mencoba memasukkan sintaksis seperti Java ke dalam JS.
- webdriverio — Implementasi JavaScript alternatif.
Pada awal tahun 2020, Protractor adalah solusi WebDriver paling populer, tetapi saat ini mereka kurang terpelihara. Saya memiliki keprihatinan mendalam tentang masa depannya, jadi saya memposting tentang hal itu.
webdriverio memiliki API yang hebat, dokumentasi yang hebat, dukungan lintas-browser, dukungan pengujian aplikasi seluler asli, dan kumpulan alat yang kaya yang dibangun di atas protokol WebDriver.
Teknologi di balik WebDriver memiliki masalah berikut:
WebDriver adalah solusi hebat dan stabil dengan komunitas terbesar. Untuk pengaturan stabil tradisional, WebDriver masih yang terbaik di pasar. Kami juga memiliki ekosistem dan layanan yang kaya seperti SauceLabs dan BrowserStack untuk membantu menskalakan pengujian WebDriver Anda.
Puppeteer
Puppeteer seperti kombinasi yang terbaik dari dua dunia, WebDriver dan Cypress.io.
Puppeteer dibangun di atas protokol Chrome DevTools oleh pengembang Chromium. Dengan kata lain, ini jauh lebih kuat daripada WebDriver tradisional karena menggunakan semua API yang dapat diekspos oleh browser. Jika WebDriver dibatasi pada standar (semua metode harus bekerja sama di semua browser), Puppeteer hanya berfokus pada Chrome dan Firefox, sehingga Anda dapat mendorong inovasi lebih cepat.
Tidak seperti Cypress.io, Puppeteer memberikan kontrol eksternal yang sebenarnya dari browser Anda. Kelola tab, iframe, sesi penyamaran, jaringan (permintaan mengejek), unggahan dan unduhan file. Hampir semuanya! Tapi kecepatannya sebanding dengan Cypress.io, ya, Puppeteer sangat cepat.
Satu-satunya masalah dengan Puppeteer adalah perpustakaan umum, bukan solusi otomatisasi pengujian. Oleh karena itu, pengembang biasanya memasangkan dengan Jest atau CodeceptJS.
Lebih tepatnya, kita perlu membuat daftar kelemahan Puppeteer. Tapi saya tidak melihat ada masalah teknis. Ini memberi Anda segala kemungkinan, sehingga Anda dapat menulis tes browser yang paling canggih. Mudah dipasang, memiliki API yang hebat, dan sangat fleksibel untuk dikendalikan. Ini adalah alat yang sangat sederhana, jadi tidak seperti Cypress, ia tidak menyediakan fitur hebat seperti menunggu elemen secara otomatis atau menunggu animasi. Jika Anda membutuhkan fitur ini, Anda harus mengembangkannya sendiri.
Puppeteer adalah teknologi yang hebat, tetapi memiliki kurva belajar yang lebih tinggi daripada Cypress.io dan materi pembelajaran yang lebih sedikit daripada WebDriver. Anda memerlukan insinyur JavaScript berpengalaman yang dapat mengaturnya dan membangun framework pengujian di sekitarnya.
laywright
Untuk beberapa waktu, tidak ada aktivitas yang menonjol dari tim Puppeteer. Puppeteer 2.0 dirilis tanpa perubahan besar atau gangguan kompatibilitas yang sebenarnya. Pengembangan Puppeteer tampaknya memasuki tahap yang membosankan ketika hanya perbaikan kecil baru dan perbaikan bug yang diperkenalkan. Saya tidak tahu bahwa tim di belakang Puppeteer sedang mengerjakan proyek lain untuk memperluas ke Firefox dan Safari sambil mendapatkan hasil maksimal dari Puppeteer.
Ya, penulis naskah yang resmi diumumkan pada Januari 2020 ini sudah terlihat seperti game changer. API Puppeteer canggih dengan semua fitur. Secara internal, Playwright menambal Firefox dan Webkit (mesin Safari) untuk menyematkan API otomatisasi. Oleh karena itu, ini menyediakan protokol tingkat yang sangat rendah dan sangat cepat untuk kontrol browser. Pendekatan ini tidak bekerja di browser sumber tertutup. Namun, dengan Microsoft akhirnya beralih ke Chromium, kami tidak lagi memerlukan browser desktop lain untuk mendukung pengujian kami.
Tim penulis naskah juga menyertakan beberapa peningkatan dibandingkan dengan Puppeteer.
- Kurangi kebutuhan akan timeout
- Deteksi visibilitas elemen pra-interaksi yang lebih baik
Saya belum memiliki kesempatan untuk mencobanya (belum), tetapi saya menantikannya. Saya pikir Playwright sangat disukai oleh pengembang dan insinyur otomasi pengujian. Ide dan teknologi, dan tim di belakangnya, tampak hebat.
TestCafe
Teknologi hebat lainnya dengan kekuatan dan kelemahannya sendiri. TestCafe melakukan beberapa trik yang sangat bagus. Alih-alih mengendalikan browser saja, ia meluncurkan server proxy yang memotong panggilan di browser dan memasukkan skrip ke dalam browser.
Begini Cara kerjanya. Ketika saya mengunjungi google.com dalam pengujian, browser benar-benar terbuka.
Alamat sebenarnya adalah server proxy yang mengirimkan permintaan ke google.com, tetapi ia menambahkan skripnya sendiri ke setiap HTML yang diterimanya. Server ini juga memulai dan menutup browser, tetapi tidak mengontrol browser selama menjalankan pengujian. Jadi, seperti halnya Cypress.io, tes ini benar-benar berfungsi (secara internal) di dalam browser.
Solusi ini menjadikan TestCafe alat tercepat di pasar untuk mendukung lintas-browser. Bahkan, Anda dapat menggunakan browser apa pun jika Anda tidak perlu mengontrolnya. Safari, IE, bahkan Chrome seluler! Semua browser dapat diambil dengan TestCafe, yang jauh lebih cepat daripada WebDriver (karena pengujian berjalan di dalam browser). Masalah dengan teknologi ini sebagian besar adalah kasus tepi dan sulit untuk didaftar. Pada dasarnya, TestCafe seharusnya berfungsi untuk sebagian besar pengujian, tetapi jika tidak, tidak jelas alasannya. Dan tidak ada alat debugging untuk membantu dengan itu.
TestCafe memiliki rangkaian fitur yang kaya, cepat, dan memiliki komunitas yang hebat di sekitar Anda. Jika dukungan lintas-browser adalah persyaratan utama, Anda harus selalu memeriksanya.
CodeceptJS
xCypress.io, WebDriver, Puppeteer, TestCafe — semuanya hebat. Mereka memecahkan masalah tes dengan cara mereka sendiri. Namun, semua kerangka kerja ini memiliki API dan sintaksnya sendiri. Setelah Anda mulai menulis tes, Anda tidak akan dapat pindah ke mesin lain jika Anda mengalami masalah yang belum terselesaikan.
- xBagaimana jika saya mulai menulis tes di Puppeteer tetapi tes saya harus mendukung Safari?
- xSaya mulai dengan WebDriver, tetapi apakah Anda memerlukan lebih banyak kontrol browser yang hanya dapat disediakan oleh Puppeteer?
- xSaya mulai dengan TestCafe, tetapi beberapa tes tidak stabil
- xSaya mulai dengan Cypress.io, tetapi saya perlu menjalankan tes di dua jendela untuk melihat apakah situs web berisi iframe.
Ini adalah ide di balik CodeceptJS — sebuah meta-framework untuk otomatisasi pengujian browser. CodeceptJS mengambil semua mesin browser-driven populer dan membungkusnya untuk menyediakan sintaks terpadu. Tidak seperti alat lain yang dijelaskan dalam artikel ini, CodeceptJS mendelegasikan kontrol ke WebDriver, Puppeteer, atau TestCafe daripada mengontrol browser sendiri. Ini memungkinkan Codecept JS untuk lebih fokus pada pengalaman pengembang. Misalnya, Anda dapat langsung menggunakan objek halaman, percobaan ulang langkah, dan jeda interaktif. CodeceptJS mudah digunakan seperti Cypress.io, tetapi dapat menggunakan berbagai teknologi.
Cypress.io cocok untuk insinyur front-end dan konsisten dengan pengalaman mereka, tetapi Codecept JS berfokus pada pengujian ujung-ke-ujung murni. Oleh karena itu, pengujian CodeceptJS terlihat seperti rencana pengujian, bukan kode JavaScript. Jadi, bahkan QA manual pun dapat mempelajari JavaScript selangkah demi selangkah untuk membantu Anda memulai.
Kesimpulan
Saya pikir tahun ini akan menjadi tahun terobosan untuk otomatisasi pengujian. Pasar otomatisasi uji akan mencapai $30 miliar tahun depan. Dan JavaScript mendorong pertumbuhan ini dan menguji inovasi otomatisasi. Pertimbangkan untuk mengalihkan pengujian browser Anda ke JavaScript hari ini. Namun, sebelum memilih Cypress.io yang paling populer, pilih alat dengan bijak atau Protractor akan mengutip alternatif seperti CodeceptJS, webdriver.io, TestCafe. Mereka dapat lebih sesuai dengan kebutuhan Anda.