Membangun lingkungan pengembangan yang lebih aman dan efisien dengan memanfaatkan Playwright Visual Comparisons

Latar belakang dan identifikasi masalah

• Pengujian frontend memiliki banyak tantangan karena perubahan UI dan input pengguna yang sulit diprediksi.
• Pengujian yang diverifikasi langsung oleh manusia memiliki keterbatasan, sehingga dipertimbangkan penerapan pengujian otomatis.
• Pengujian E2E berbasis perekaman yang ada sebelumnya (TestProject, Playwright) memiliki biaya pemeliharaan tinggi dan rentan terhadap perubahan UI.

Penerapan Playwright Visual Comparisons

• Menerapkan metode pengujian regresi visual untuk mendeteksi perubahan pada UI.
• Menyimpan screenshot acuan lalu membandingkannya setelah perubahan kode untuk mendeteksi perubahan.
• Perbandingan gambar dapat dilakukan dengan metode 2-up, Swipe, Highlight, dan Onion Skin.

Masalah utama yang dialami selama penerapan dan solusinya

1. False failure terjadi karena perbedaan kecil (0.01%)
   Masalah: Perbedaan rendering font muncul tergantung pada lingkungan eksekusi pengujian (OS, browser, pengaturan display, dan sebagainya).
   Solusi: Menggunakan container Docker agar semua pengujian berjalan dalam lingkungan yang sama.

2. Perlu mengambil screenshot setelah pemuatan data selesai
   Masalah: Jika screenshot diambil sebelum halaman selesai dimuat sepenuhnya, UI loading bisa ikut tercapture.
   Solusi: Menggunakan fungsi utilitas berbasis getByText + toBeVisible untuk menunggu hingga string tertentu muncul.

3. Perbedaan screenshot akibat elemen animasi
   Masalah: Elemen CSS animation, Canvas, SVG, dan WebGL tercapture pada timing yang berbeda setiap kali & menyebabkan flaky test.
   Solusi: Menerapkan berbagai penanganan untuk menonaktifkan animasi serta tambahan optimasi efisiensi eksekusi pengujian

4. Deteksi perubahan yang tidak perlu akibat plugin pihak ketiga (iframe, dll.)
   Masalah: Plugin pihak ketiga seperti umpan balik pelanggan, survei, dan chatbot dimuat melalui iframe sehingga menimbulkan perubahan visual.
   Solusi: Saat membuat screenshot, menerapkan CSS umum agar iframe dan elemen plugin tertentu tidak terlihat

5. Gagal memverifikasi elemen bawah pada halaman yang memiliki scroll
   Masalah: toHaveScreenshot secara default hanya menangkap area layar yang sedang terlihat, sehingga perlu penanganan terkait scroll
   Solusi: Menerapkan opsi fullPage: true agar screenshot seluruh halaman dapat diambil.

Kesimpulan

• Otomatisasi deteksi perubahan UI dilakukan secara efektif melalui pengujian regresi visual.
• Meskipun bukan solusi yang sempurna, pendekatan ini meningkatkan produktivitas pengembangan dan stabilitas pengujian sekaligus.
• Perbaikan berkelanjutan dan optimasi lingkungan pengujian tetap diperlukan.