Latihan: Menggunakan Playwright di Visual Studio Code
Di bagian sebelumnya, kami menelusuri konsep inti yang terkait dengan Konfigurasi Uji Playwright dan Spesifikasi Pengujian Playwright, tetapi kami menggunakan Playwright Commandline (CLI) untuk menjalankan pengujian dan melihat laporan.
Bagaimana jika kita dapat melakukannya dalam lingkungan Visual Studio Code kita dan memiliki proses interaksi yang lebih visual untuk penulisan, menjalankan, dan men-debug, pengujian kita?
Dengan Playwright Test for Visual Studio Code Extension, Anda mendapatkan pengalaman pengembang yang unggul dan beberapa fitur alat unik yang dapat menjadikannya cara pilihan Anda untuk berinteraksi dengan runner Playwright Test. Mari kita melompat dan mengikuti tur.
Memulai Langkah Pertama
Dokumentasi Playwright memiliki tutorial komprehensif dengan panduan video yang kami sarankan Anda tonton di waktu Anda sendiri. Dalam pelajaran ini, kami mencoba menelusuri subset latihan ini untuk membuat Anda terbiasa dengan penggunaan.
]
Menginstal ekstensi Playwright
Instal ekstensi dari Visual Studio Code Marketplace. Setelah diinstal, Anda harus melihat ikon beaker di sisi kiri jendela Visual Studio Code Anda seperti yang ditunjukkan pada cuplikan layar. Perhatikan bagaimana ekstensi secara otomatis mendeteksi dan mengumpulkan spesifikasi pengujian dalam proyek Anda.
Jalankan pengujian (tanpa kepala)
Untuk menjalankan pengujian secara headless (tanpa jendela browser), pastikan opsi Tampilkan browser dan Tampilkan penampil pelacakan tidak dicentang. Pilih tombol putar hijau pada baris 3 file example.spec.ts untuk menjalankan pengujian pertama. Anda juga dapat memilih tombol putar abu-abu di bar samping Test Explorer untuk menjalankan semua pengujian dalam file atau untuk menjalankan pengujian tertentu.
Setelah Menjalankan pengujian, tab Hasil Pengujian akan membuka jendela tempat Anda dapat melihat seluruh riwayat eksekusi pengujian. Anda juga dapat menelusuri paling detail pengujian dan memilih Jalankan pengujian untuk menjalankan ulang pengujian tertentu tersebut.
Tampilkan browser (dengan header)
Jika Anda ingin berjalan dalam mode headed , yang berarti menjalankan pengujian Anda dengan jendela browser terbuka, Anda dapat mencentang kotak Tampilkan browser sebelum menjalankan pengujian.
Playwright adalah pengguna yang sangat cepat, yang dapat menyulitkan untuk melacak apa yang terjadi dalam pengujian saat menggunakan Show browser. Untuk penelusuran kesalahan, sebaiknya gunakan opsi Tampilkan penampil jejak .
Perlihatkan penampil jejak (dituju)
Centang kotak Perlihatkan penampil jejak dan pilih tombol putar hijau untuk pengujian kedua. Ini membuka jendela penampil jejak, yang menampilkan representasi visual dari pelaksanaan pengujian.
Di bagian atas, Anda akan melihat garis waktu pengujian yang dapat Anda arahkan untuk melihat status browser. Untuk memilih rentang waktu tertentu yang akan difokuskan, pilih dan seret garis waktu.
Di bilah sisi kiri, Anda dapat melihat tindakan yang dilakukan selama eksekusi pengujian. Jika Anda memilih tindakan locator.click , Anda akan melihat titik merah pada tombol Memulai di rekam jepret DOM.
Selanjutnya, pilih pernyataan expect.toBeVisible , dan Anda akan melihat rekam jepret DOM kami diubah untuk menampilkan halaman Penginstalan dengan sorotan pada judul yang kami tegaskan. Di atas rekam jepret DOM, Anda dapat memilih tombol Sebelum dan Sesudah untuk melihat status DOM sebelum dan sesudah tindakan dilakukan.
Anda dapat memunculkan rekam jepret DOM ke jendela terpisah dengan memilih ikon pop out di sudut kanan atas. Ini dapat berguna jika Anda ingin memeriksa DOM saat menelusuri kesalahan pengujian Anda.
Berbicara tentang debugging, Anda juga dapat memilih pencari dari rekam jepret DOM dengan memilih tombol Pilih Locator di panel bawah. Kemudian, arahkan mouse ke atas elemen pada rekam jepret DOM untuk melihat pencari lokasi untuk elemen tersebut. Dengan memilih elemen, elemen tersebut ditambahkan ke kotak Locator di bagian bawah penampil pelacak, di mana Anda dapat mengeditnya sebelum menyalinnya ke clipboard Anda.
Jangan ragu untuk menjelajahi sendiri fitur-fitur dari peninjau jejak seperti tab Panggilan, Konsol, Jaringan, dan Sumber.
Tes penyaringan kesalahan
Untuk penelusuran kesalahan, sebaiknya jalankan pengujian Anda dengan opsi Tampilkan penampil jejak dan gunakan jejak pengujian Anda untuk lebih memahami apa yang terjadi.
Namun, dengan ekstensi Visual Studio Code, Anda juga dapat men-debug pengujian langsung di Visual Studio Code, melihat pesan kesalahan, membuat titik henti, dan melakukan debug langsung pengujian Anda. Pelajari selengkapnya dari dokumentasi atau tonton video berikut untuk memahami dukungan penelusuran kesalahan.
Hasilkan pengujian
CodeGen menghasilkan pengujian untuk Anda saat Anda melakukan tindakan di browser, menjadikannya cara paling sederhana untuk memulai pengujian penulisan untuk alur kerja yang kompleks.
Untuk membuat pengujian, pilih tombol Rekam baru di bar samping pengujian di Visual Studio Code. Ini membuka jendela browser tempat Anda dapat melakukan tindakan yang akan direkam dan diubah menjadi pengujian. Anda juga akan melihat bahwa file baru di tests folder dibuat dengan pengujian yang dihasilkan.
Ketik URL di jendela browser dan mulai lakukan tindakan seperti yang dilakukan pengguna. Anda akan melihat tindakan yang direkam dalam file pengujian di Visual Studio Code.
Mari kita buat ulang tes sederhana yang kita jalankan sebelumnya dengan membuka situs web Playwright dan memilih tombol Memulai . Kita kemudian dapat memilih ikon Pernyataan Visibilitas dari toolbar Codegen dan memilih judul Penginstalan untuk menegaskan bahwa ikon tersebut terlihat.
Pelajari selengkapnya tentang membuat pengujian dalam video berikut.
Langkah selanjutnya
Di bagian ini, Anda mempelajari cara menggunakan ekstensi Visual Studio Code untuk menemukan dan menjalankan pengujian, dan cara bekerja dengan penampil jejak untuk mendapatkan pengalaman visual yang lebih baik saat debugging pengujian.
Anda juga mempelajari bagaimana Visual Studio Code menyediakan alat yang lebih kaya untuk menghasilkan pengujian menggunakan fitur Rekam Pengujian Baru, Pilih Pencari Lokasi, dan Rekam di Kursor. Sekarang, saatnya untuk menerapkan pembelajaran Dasar-Dasar Playwright Anda dalam proyek terpandu untuk membangun spesifikasi pengujian end-to-end untuk aplikasi sampel kami.