Meningkatkan kualitas software dengan Visual Regression Testing
Halo… halo… manusia pixel perfect. Dalam pengembangan software saat ini kualitas adalah yang utama. Kualitas yang saat ini dikejar bukan hanya kualitas dari sisi kode, logic, dan infrastruktur tetapi juga dari sisi user interface. Menjaga konsistensi tampilan antarmuka pengguna sangatlah penting untuk memberikan pengalaman pengguna yang baik. Visual Regression Testing membantu tim pengembang untuk mendeteksi perubahan visual yang tidak diinginkan secara otomatis, sehingga mempercepat proses pengujian dan meningkatkan kualitas perangkat lunak.
Apa itu Visual Regression Testing?
Visual Regression Testing adalah metode pengujian otomatis yang membandingkan tampilan antarmuka pengguna saat ini dengan tampilan yang diharapkan setelah dilakukan perubahan kode. Metode ini menggunakan gambar (screenshot) dari halaman web atau aplikasi mobile untuk membandingkan perbedaan visual antara versi sebelum dan sesudah perubahan. Jika terdapat perbedaan visual yang signifikan, Visual Regression Testing akan memberikan laporan tentang perubahan tersebut, sehingga tim pengembang dapat segera mengidentifikasi dan memperbaiki masalahnya.
Perbedaannya dengan Regression Testing yang lain?
Perbedaan utama antara Visual Regression Testing dengan Regression Testing konvensional terletak pada fokus pengujian dan metode yang digunakan. Regression Testing konvensional lebih berfokus pada pengujian fungsionalitas perangkat lunak, seperti pengujian fitur-fitur baru dan perbaikan bug, tanpa memperhatikan perubahan visual antarmuka pengguna. Sedangkan Visual Regression Testing lebih berfokus pada pengujian perubahan visual yang dapat terjadi akibat perubahan kode, seperti perubahan tata letak (layout), warna, ukuran, dan elemen desain lainnya.
Tools apa saja yang bisa digunakan untuk melakukan Visual Regression Testing?
Ada beberapa tools yang bisa digunakan untuk melakukan Visual Regression Testing, di antaranya:
- Percy: Percy adalah platform VRT yang memungkinkan pengujian otomatis tampilan antarmuka pengguna pada aplikasi web dan mobile.
- BackstopJS: BackstopJS adalah library JavaScript yang dapat digunakan untuk membuat skenario pengujian visual pada aplikasi web.
- Applitools: Applitools menyediakan platform VRT yang dapat menguji tampilan antarmuka pengguna secara otomatis pada berbagai perangkat dan browser.
- Specto: Specto adalah tool open-source untuk VRT yang dapat digunakan untuk menguji perubahan visual pada aplikasi web.
- Storybook: Storybook adalah sebuah tool open-source yang digunakan untuk mengembangkan komponen antarmuka pengguna secara terisolasi dan interaktif.
Pertimbangan untuk melakukan Visual Regression Testing
Sebelum melakukan Visual Regression Testing, terdapat beberapa pertimbangan yang perlu diperhatikan oleh tim pengembang, antara lain:
- Ketersediaan Resources: Pastikan tim pengembang memiliki cukup resources (waktu, tenaga, dan keahlian) untuk melakukan VRT secara efektif.
- Pemilihan Tools: Pilihlah tools VRT yang sesuai dengan kebutuhan dan kemampuan tim pengembang.
- Pemeliharaan: Perlu dilakukan pemeliharaan secara berkala terhadap skenario pengujian visual untuk memastikan keakuratan hasil pengujian.
Visual Regression Testing dengan Storybook
Storybook adalah sebuah open-source tools yang digunakan untuk mengembangkan komponen antarmuka pengguna secara terisolasi dan interaktif. Storybook juga dapat digunakan untuk melakukan Visual Regression Testing dengan mudah. Dengan menggunakan Storybook, tim pengembang dapat membuat skenario pengujian visual untuk setiap komponen antarmuka pengguna, sehingga memudahkan dalam mendeteksi perubahan visual yang terjadi akibat perubahan kode.
Untuk metode yang dilakukan storybook sendiri cukup sederhana, dimana storybook akan meng-capture gambar dari setiap komponen yang terdapat pada UI tersebut seperti ilustrasi di bawah ini.
Lalu storybook akan melakukan komparasi antara UI lama dengan UI baru.
Setelah melakukan komparasi, storybook akan meng-highlight perubahan yang terjadi pada UI tersebut seperti yang diilustrasikan dibawah.
Storybook sendiri mendukung pengujian visual lintas browser secara native menggunakan Chromatic, layanan cloud yang dibuat oleh tim Storybook. Saat Anda mengaktifkan pengujian visual, setiap storybook secara otomatis diubah menjadi pengujian. Ini memberi Anda feedback secara langsung mengenai bug UI melalui Storybook.
Dengan menggunakan Visual Regression Testing, tim pengembang dapat meningkatkan kualitas perangkat lunak dengan memastikan tidak terjadi perubahan visual yang tidak diinginkan pada antarmuka pengguna. Dengan demikian, pengguna dapat mengalami pengalaman pengguna yang lebih baik saat menggunakan aplikasi web atau mobile yang dikembangkan.
