Menguji aplikasi web dengan Node.js dan Playwright

Pengembangan aplikasi modern bergantung pada pengujian otomatis, menggunakan kerangka kerja pengujian untuk memastikan bahwa kode siap masuk ke paket aplikasi dan keluar ke pengguna akhir. Untuk mendapatkan hasil maksimal dari pengujian, pengujian ditulis sebelum kode dan dapat diintegrasikan ke dalam kontrol sumber dan pipeline CI / CD (integrasi berkelanjutan / penerapan berkelanjutan). Tes harus ada di mana-mana dalam proses pengembangan Anda. Perlu menggabungkan permintaan tarik? Uji kodenya. Perlu berkomitmen ke cabang? Uji kodenya.

Tetapi ada satu area di mana pengujian sulit, terutama ketika perlu diotomatiskan. Saya berbicara tentang perlunya berinteraksi dengan dan menguji antarmuka pengguna dinamis. Pengujian aplikasi web adalah proses yang kompleks. Alat seperti Selenium dan webdriver adalah elemen kunci dalam mengotomatiskan konten halaman dan memastikan bahwa Anda menguji kedua elemen halaman dan aplikasi secara keseluruhan. Mereka penting jika Anda menggunakan browser tanpa kepala dalam sebuah aplikasi; Saya telah menggunakan satu set skrip Python di aplikasi Twitter yang dibangun di sekitar Selenium dan dukungan webdriver Chromium untuk mengotomatiskan pengambilan screenshot dari aplikasi pelacakan pesawat.

Memperkenalkan Playwright, kerangka pengujian web Microsoft

Selenium dan webdriver bukan satu-satunya alat untuk membuat pengujian ujung ke ujung untuk aplikasi web dan browser modern. Alternatif yang populer adalah Google Puppeteer, yang menangani pengiriman klik ke browser menggunakan teknik yang sama seperti alat webdriver Chrome dan mengakses informasi debugging melalui API alat pengembang yang sudah dikenal. Seorang peserta baru di liga pengujian browser, Playwright sedang dikembangkan oleh Microsoft sebagai proyek sumber terbuka yang dihosting di GitHub.

Penulis drama mengambil arsitektur Puppeteer dasar dan lebih menggerakkannya ke arah Selenium, menambahkan kerangka kerja otomatisasi web dan meningkatkan cara Puppeteer berinteraksi dengan konten halaman. Ini dirancang untuk menginstal dengan cepat dan mudah menggunakan sintaks npm yang sudah dikenal, menggunakan JavaScript untuk membangun otomatisasi dan pengujian aplikasi web. Ia bekerja dengan lebih banyak browser, dengan dukungan untuk browser berbasis Chromium seperti Edge, serta Firefox dan WebKit Apple.

Ada pesan penting dalam daftar browser yang didukung Playwright: Anda tidak dapat menggunakannya dengan browser berbasis Trident atau EdgeHTML. Itu tidak mengherankan. Microsoft telah membuat komitmen kuat untuk cabang Chromium di Edge barunya, dan baik Edge lama dan Internet Explorer hampir berakhir. Jika Anda akan menggunakan Playwright untuk pengujian, Anda membuat keputusan untuk hanya mendukung browser modern arus utama, jadi Anda perlu memberi tahu pengguna apa yang tersedia untuk rilis mendatang dari aplikasi web apa pun yang Anda buat dan dukung.

Menguji web dengan Playwright

Kemampuan untuk menguji lintas platform di semua browser utama dengan sekumpulan skrip yang sama itu penting, begitu pula dukungan untuk versi seluler situs (karena dua platform seluler utama menggunakan varian browser desktopnya, Playwright saat ini mengemulasi tampilan seluler di browser desktop ). Yang juga penting adalah dukungan untuk pengujian tanpa head, di mana Anda tidak merender UI browser, melainkan bekerja dengan model objek dokumen yang dihasilkan (dan shadow DOM jika Anda menggunakan fungsionalitas dan teknologi browser modern seperti komponen web).

Anda dapat menggunakan Playwright untuk mengotomatiskan browser yang sedang berjalan pada desktop pengembangan untuk memeriksa kesalahan sebagai bagian dari proses debug aplikasi, memastikan bahwa Anda secara konsisten menjalankan semua jalur pengujian Anda sambil merekam informasi kinerja tambahan dan mengawasi gangguan UI yang tidak terlacak. Atau, ini dapat disiapkan sebagai bagian dari tindakan GitHub untuk menguji kode baru sebagai bagian dari komit atau penggabungan, mengotomatiskan apa yang bisa menjadi pengujian manual yang kompleks.

Membangun dan menjalankan tes Penulis naskah

Memulai dengan Playwright semudah menyiapkan proyek Node.js baru. Pertama, instal Node.js di perangkat uji Anda. Karena Playwright menggunakan Node, Anda dapat menjalankannya di PC pengembangan atau server di pipeline CI / CD Anda, menjadikannya bagian dari tindakan GitHub yang dapat digunakan di seluruh proses pengembangan perangkat lunak Anda. Yang Anda butuhkan hanyalah satu perintah npm, yang menginstal paket Playwright serta binari untuk semua browser yang didukung. Setelah penginstalan selesai, Anda dapat membuat skrip otomatisasi menggunakan JavaScript atau TypeScript untuk memanggil API Playwright. Ini semua adalah panggilan asinkron, jadi gunakan pernyataan await untuk mengelola promise mereka.

Hasilnya adalah cara yang sangat jelas untuk membuat skrip, dimulai dengan membuka instance browser headless, kemudian menavigasi ke halaman sebelum berinteraksi dengan instance halaman. Sebaiknya mulailah membuat pengujian dengan browser lengkap sehingga Anda dapat mengikuti bagaimana Playwright berinteraksi dengan aplikasi Anda. Opsi gerak lambat yang berguna menjalankan interaksi pada kecepatan yang lebih manusiawi, mempermudah untuk memvisualisasikan dan mengelola pengujian yang berjalan di browser desktop. Setelah pengujian di-debug dan berjalan dengan baik, Anda dapat memindahkannya ke mode headless lalu menjalankannya sebagai bagian dari implementasi CI / CD.

Penulis drama menyertakan alat CLI yang dapat merekam interaksi dengan situs, secara otomatis menghasilkan JavaScript yang diperlukan untuk menjalankan pengujian. Opsi codegen adalah alat yang berguna untuk segera memulai dengan Playwright, menunjukkan kepada Anda kode yang berinteraksi dengan elemen halaman yang kemudian dapat Anda gunakan sebagai template untuk pengujian Anda sendiri, menyalin dan mengedit kode yang dihasilkan seperlunya. Dukungan TypeScript dapat membantu menulis pengujian yang lebih kompleks, menggunakan pengetikan yang kuat untuk mengelola variabel.

Bekerja dengan aplikasi web di Playwright

Salah satu fitur Playwright yang lebih bermanfaat adalah dukungannya untuk konteks browser. Ini memungkinkan Anda menjalankan tindakan terisolasi dalam satu instance browser, sehingga Anda dapat menyiapkan beberapa konteks untuk menguji beberapa interaksi pada waktu yang sama. Di dalam setiap konteks Anda membuat halaman, yang paling baik dianggap sebagai tab di browser desktop. Halaman mendukung interaksi klik mereka sendiri dan dapat dipantau secara paralel. Setelah Anda berada di halaman, Anda dapat menggunakan berbagai cara untuk menemukan konten untuk berinteraksi, menggunakan pemilih CSS atau XPath, atribut HTML, atau teks. Jika Anda terbiasa dengan Selenium, Anda akan menemukan cara menavigasi halaman dengan akrab, dengan kemampuan tambahan untuk menunggu halaman dimuat sepenuhnya atau konten dinamis ditampilkan dalam aplikasi web satu halaman.

Anda dapat menggunakan fungsi evaluasi untuk mengirim parameter ke dan dari halaman web ke kode JavaScript yang berjalan dalam konteks halaman. Hasil dikembalikan ke runner skrip pengujian di Node.js untuk dianalisis, memberi Anda alat yang diperlukan untuk lulus atau gagal dalam pengujian. Playwright bekerja dengan alat pengembang browser F12 sehingga dapat melakukan lebih dari sekadar berinteraksi dengan konten halaman. Itu dapat memantau lalu lintas jaringan, sehingga Anda dapat menggunakannya untuk menguji otentikasi dan unduhan file, antara lain. Itu dapat mengakses konsol browser dan mencatat kesalahan yang mungkin tidak langsung terlihat di laman yang dirender: misalnya, melacak masalah CSS atau pustaka JavaScript yang gagal dimuat.

Ada banyak hal di Playwright, dan itu membuat alternatif yang menarik untuk Selenium untuk menguji aplikasi browser. Dengan Microsoft yang terus menambah alat pengembang F12 di Edge, akan menarik untuk menonton Playwright menambahkan fitur baru yang memperluas pilihan Anda untuk menguji aplikasi yang dihosting browser dan aplikasi web progresif bersama dengan aplikasi web tradisional.

Melampaui JavaScript: Menguji dengan Python dan C #

Microsoft baru-baru ini merilis versi baru Playwright untuk pengembang yang lebih suka membuat pengujian dengan Python daripada JavaScript. Ini adalah opsi yang berguna, karena banyak kerangka kerja pengujian Selenium yang ada berbasis Python, dan ini memungkinkan Anda untuk menautkan kode pengujian Anda ke paket analitik untuk analisis hasil yang lebih terperinci menggunakan ekosistem aplikasi dan alat statistik Python yang kaya.

Playwright menyertakan pengikatan bahasa untuk C #, sehingga Anda dapat membawa Playwright ke dalam kerangka kerja pengujian yang ada untuk ASP.NET atau alat .NET lainnya. Anda tidak perlu mengubah cara Anda bekerja untuk menghadirkan alat baru, dan Microsoft menjanjikan binding bahasa tambahan untuk Java dan Ruby. Ada kemungkinan lebih banyak di masa depan, karena dokumentasi Penulis Drama menyatakan bahwa itu dirancang untuk mendukung binding untuk bahasa apa pun. Dengan semua kode di GitHub, ada peluang untuk membuat binding Anda sendiri untuk bahasa pengujian pilihan Anda dan mengirimkannya sebagai permintaan tarik ke proyek.