Menguji aplikasi web dengan Node.js dan Playwright

Pembangunan aplikasi moden bergantung pada pengujian automatik, menggunakan kerangka ujian untuk memastikan bahawa kod siap masuk ke dalam pakej aplikasi dan keluar kepada pengguna akhir. Untuk memanfaatkan sepenuhnya pengujian, ujian ditulis sebelum kod dan dapat disatukan ke saluran kawalan sumber dan saluran paip CI / CD (integrasi berterusan / penerapan berterusan). Ujian harus dilakukan di mana sahaja dalam proses pengembangan anda. Perlu menggabungkan permintaan tarik? Uji kodnya. Perlu komited dengan cawangan? Uji kodnya.

Tetapi ada satu bidang di mana ujian sukar dilakukan, terutama ketika perlu dilakukan secara automatik. Saya bercakap mengenai keperluan untuk berinteraksi dan menguji antara muka pengguna yang dinamik. Pengujian aplikasi web adalah proses yang kompleks. Alat seperti Selenium dan pemacu web adalah elemen penting dalam mengautomasikan kandungan halaman dan memastikan bahawa anda menguji kedua-dua elemen halaman dan aplikasi secara keseluruhan. Ini penting jika anda menggunakan penyemak imbas tanpa kepala dalam aplikasi; Saya telah menggunakan sekumpulan skrip Python dalam aplikasi Twitter yang dibangun di sekitar Selenium dan sokongan pemacu web Chromium untuk mengautomatik mengambil tangkapan skrin dari aplikasi pelacakan pesawat.

Memperkenalkan Playwright, kerangka ujian web Microsoft

Selenium dan pemacu web bukan satu-satunya alat untuk membina ujian akhir ke hujung untuk aplikasi dan penyemak imbas web moden. Alternatif yang popular adalah Puppeteer Google, yang menangani kedua-dua menghantar klik ke penyemak imbas menggunakan teknik yang sama seperti perkakas pemacu web Chrome dan mengakses maklumat penyahpepijatan melalui API alat pemaju yang sudah biasa. Peserta baru dalam liga ujian penyemak imbas, Playwright sedang dikembangkan oleh Microsoft sebagai projek sumber terbuka yang dihoskan di GitHub.

Playwright menggunakan seni bina Puppeteer asas dan menggerakkannya lebih jauh ke arah Selenium, menambahkan kerangka automasi web dan meningkatkan bagaimana Puppeteer berinteraksi dengan kandungan halaman. Ia dirancang untuk dipasang dengan cepat dan mudah menggunakan sintaks npm yang sudah biasa, menggunakan JavaScript untuk membina automasi dan pengujian aplikasi web. Ia berfungsi dengan lebih banyak penyemak imbas, dengan sokongan untuk penyemak imbas berasaskan Chromium seperti Edge, serta Firefox dan Apple's WebKit.

Terdapat mesej penting dalam senarai penyemak imbas yang disokong oleh Playwright: Anda tidak boleh menggunakannya dengan penyemak imbas berasaskan Trident atau EdgeHTML. Ia tidak menghairankan. Microsoft telah membuat komitmen yang tegas terhadap cawangan Chromium di Edge barunya, dan Edge lama dan Internet Explorer sudah hampir ke akhir hayat. Sekiranya anda akan menggunakan Playwright untuk ujian, anda membuat keputusan untuk hanya menyokong penyemak imbas moden arus perdana, jadi anda perlu memberitahu pengguna apa yang ada untuk pelepasan masa depan mengenai aplikasi web yang anda bina dan sokong.

Menguji web dengan Playwright

Keupayaan untuk merentas platform pada semua penyemak imbas utama dengan set skrip yang sama adalah penting, begitu juga sokongan untuk versi laman web mudah alih (kerana dua platform mudah alih utama menggunakan varian penyemak imbas desktop mereka, Playwright kini meniru pandangan mudah alih dalam penyemak imbas desktop ). Juga penting ialah sokongan untuk ujian tanpa kepala, di mana anda tidak membuat UI penyemak imbas, sebaliknya berfungsi dengan model objek dokumen yang dihasilkan (dan bayangan DOM jika anda menggunakan fungsi dan teknologi penyemak imbas moden seperti komponen web).

Anda boleh menggunakan Playwright untuk mengautomasikan penyemak imbas yang sedang berjalan di desktop pengembangan untuk memeriksa kesilapan sebagai sebahagian daripada penyahpepijatan aplikasi, memastikan bahawa anda menjalankan semua ujian anda secara konsisten sambil merakam maklumat prestasi tambahan dan menonton gangguan UI yang tidak dilacak. Sebagai alternatif, ia dapat disiapkan sebagai bagian dari tindakan GitHub untuk menguji kod baru sebagai bagian dari komit atau penggabungan, mengotomatisasi apa yang sebaliknya dapat menjadi ujian manual yang kompleks.

Membangun dan menjalankan ujian Playwright

Bermula dengan Playwright semudah menyiapkan projek Node.js baru. Pertama, pasangkan Node.js pada peranti ujian anda. Oleh kerana Playwright menggunakan Node, anda boleh menjalankannya di PC pengembangan atau di pelayan di saluran paip CI / CD anda, menjadikannya sebahagian daripada tindakan GitHub yang dapat digunakan sepanjang proses pengembangan perisian anda. Yang anda perlukan hanyalah satu arahan npm, yang memasang pakej Playwright serta binari untuk semua penyemak imbas yang disokong. Dengan pemasangan selesai, anda dapat membuat skrip automasi menggunakan JavaScript atau TypeScript untuk memanggil API Playwright. Ini semua adalah panggilan tidak segerak, jadi gunakan pernyataan menunggu untuk menguruskan janji mereka.

Hasilnya adalah cara yang sangat jelas untuk membina skrip, bermula dengan membuka contoh penyemak imbas tanpa kepala, kemudian menavigasi ke halaman sebelum berinteraksi dengan contoh halaman. Sebaiknya mulakan membina ujian dengan penyemak imbas penuh agar anda dapat mengikuti bagaimana Playwright berinteraksi dengan aplikasi anda. Pilihan slow-mo yang berguna menjalankan interaksi pada kelajuan yang lebih manusiawi, menjadikannya lebih mudah untuk menggambarkan dan menguruskan ujian yang dijalankan di penyemak imbas desktop. Setelah ujian dilancarkan dan dijalankan dengan baik, anda boleh memindahkannya ke mod tanpa kepala dan kemudian menjalankannya sebagai sebahagian daripada pelaksanaan CI / CD.

Playwright merangkumi alat CLI yang dapat merakam interaksi dengan laman web, secara automatik menghasilkan JavaScript yang diperlukan untuk menjalankan ujian. Pilihan codegen adalah alat yang berguna untuk cepat memulakan Playwright, menunjukkan kod yang berinteraksi dengan elemen halaman yang kemudian anda boleh gunakan sebagai templat untuk ujian anda sendiri, menyalin dan menyunting kod yang dihasilkan jika perlu. Sokongan TypeScript dapat membantu menulis ujian yang lebih kompleks, menggunakan penaipan kuat untuk menguruskan pemboleh ubah.

Bekerja dengan aplikasi web di Playwright

Salah satu ciri Playwright yang lebih berguna adalah sokongannya untuk konteks penyemak imbas. Ini membolehkan anda menjalankan tindakan terpencil dalam satu contoh penyemak imbas, jadi anda boleh mengatur beberapa konteks untuk menguji beberapa interaksi pada masa yang sama. Di dalam setiap konteks, anda membuat halaman, yang dianggap terbaik sebagai tab dalam penyemak imbas desktop. Halaman menyokong interaksi klik mereka sendiri dan dapat dipantau secara selari. Setelah berada di halaman, anda boleh menggunakan pelbagai cara untuk mencari kandungan untuk berinteraksi, menggunakan pemilih CSS atau XPath, atribut HTML, atau teks. Sekiranya anda sudah biasa dengan Selenium, anda pasti dapat menavigasi ke halaman yang sudah biasa, dengan kemampuan tambahan untuk menunggu halaman dimuat sepenuhnya atau kandungan dinamik dapat diberikan dalam aplikasi web satu halaman.

Anda dapat menggunakan fungsi evaluasi untuk mengirim parameter ke dan dari halaman web ke kod JavaScript yang berjalan dalam konteks halaman. Hasil dikembalikan kepada pelari skrip ujian di Node.js untuk analisis, memberi anda alat yang diperlukan untuk lulus atau gagal ujian. Playwright berfungsi dengan devtools penyemak imbas F12 sehingga dapat melakukan lebih banyak daripada sekadar berinteraksi dengan kandungan halaman. Ia dapat memantau lalu lintas rangkaian, jadi anda dapat menggunakannya untuk menguji pengesahan dan muat turun fail, antara lain. Ia dapat mengakses konsol penyemak imbas dan merekod kesalahan yang mungkin tidak dapat dilihat langsung di halaman yang dirender: misalnya, mengesan masalah CSS atau perpustakaan JavaScript yang gagal dimuat.

Terdapat banyak di Playwright, dan ini menjadikan alternatif yang menarik untuk Selenium untuk menguji aplikasi penyemak imbas. Dengan Microsoft terus menambah alat pembangun F12 di Edge, akan menarik untuk menonton Playwright menambahkan ciri baru yang memperluas pilihan anda untuk menguji aplikasi yang dihoskan oleh penyemak imbas dan aplikasi web progresif di samping aplikasi web tradisional.

Di luar JavaScript: Ujian di Python dan C #

Microsoft baru-baru ini melancarkan versi baru Playwright untuk pembangun yang lebih suka membina ujian di Python daripada JavaScript. Ini adalah pilihan yang berguna, kerana banyak kerangka ujian Selenium yang ada berasaskan Python, dan ini membolehkan anda menghubungkan kod ujian anda ke pakej analisis untuk analisis hasil yang lebih terperinci menggunakan ekosistem aplikasi dan alat statistik yang kaya dengan Python.

Playwright merangkumi pengikat bahasa untuk C #, jadi anda dapat memasukkan Playwright ke dalam kerangka ujian yang ada untuk ASP.NET atau alat .NET lain. Anda tidak perlu mengubah cara anda bekerja untuk membawa alat baru, dan Microsoft menjanjikan pengikatan bahasa tambahan untuk Java dan Ruby. Ada prospek yang lebih banyak di masa depan, kerana dokumentasi Playwright menyatakan bahawa ia dirancang untuk menyokong pengikat untuk bahasa apa pun. Dengan semua kod di GitHub, ada kesempatan untuk membuat pengikatan anda sendiri untuk bahasa percobaan pilihan anda dan menyerahkannya sebagai permintaan tarik ke projek.