Daftar Periksa Pengujian Lintas-Browser yang Praktis

Sebuah tata letak bisa terlihat sempurna di satu browser tetapi berantakan di browser lain. Ponsel Android murah dengan layar sempit atau laptop lama dengan zoom 125% dapat merusak desain Anda.

Jangan menganggap pengujian sebagai pemeriksaan akhir yang samar. Perlakukan pengujian sebagai daftar periksa yang spesifik.

Fokus pada area berisiko tinggi:

  • Formulir dan input
  • Menu navigasi
  • Pergeseran tata letak (layout shifts)
  • Pemuatan font
  • Interaksi JavaScript

Berhentilah mencoba menguji setiap browser. Itu membuang waktu. Gunakan matriks yang ramping sebagai gantinya:

  • Satu browser Chromium di desktop
  • Satu lingkungan Safari
  • Satu lingkungan Firefox
  • Satu ponsel Android
  • Satu iPhone

Sesuaikan pengujian Anda dengan cara orang benar-benar menggunakan produk Anda. Sebuah halaman tidak perlu terlihat identik di mana saja. Halaman tersebut harus dapat digunakan, terbaca, dan stabil.

Daftar periksa Anda harus mencakup:

  • Browser dan OS
  • Lebar viewport
  • Tingkat zoom
  • Alur pengguna (user flows) spesifik

Jaga agar daftar tetap singkat. Jika sebuah pengujian memakan waktu setengah hari, tim Anda akan melewatkannya. Pemeriksaan yang baik seharusnya memakan waktu kurang dari satu jam.

Mulailah dengan struktur. Periksa beranda, halaman konten, dan formulir Anda. Ubah ukuran jendela Anda dari lebar desktop ke lebar seluler. Perbesar (zoom in). Perhatikan masalah-masalah berikut:

  • Tombol yang terbungkus (wrap) secara canggung
  • Judul yang terpotong
  • Pengguliran (scrolling) horizontal
  • Sticky header yang menutupi konten
  • Modal yang menyembunyikan kontrol penting

Selanjutnya, uji interaksinya. Browser menangani formulir secara berbeda. Uji input teks, pengelola kata sandi, pemilih tanggal (date pickers), dan unggahan file. Periksa bagaimana autofill memengaruhi tata letak Anda.

Uji komponen yang berat JavaScript seperti tab, akordeon, dan saran pencarian. Sebuah halaman mungkin tidak menunjukkan kesalahan di konsol tetapi tetap memiliki tombol yang rusak.

Terakhir, lakukan stress test pada situs Anda:

  • Batasi (throttle) kecepatan jaringan Anda
  • Nonaktifkan cache Anda
  • Gunakan teks yang sangat panjang di kolom input
  • Muat lebih banyak item dari biasanya untuk memeriksa overflow

Daftar periksa terbaik adalah yang membosankan. Seharusnya berupa daftar lulus atau gagal yang sederhana. Gunakan setiap kali Anda merilis sesuatu. Ketika ada bug yang lolos ke produksi, tambahkan kegagalan spesifik tersebut ke daftar periksa Anda.

Daftar periksa hanya berguna jika ia mengingat apa yang dilupakan tim Anda.

Sumber: https://dev.to/graceholloway_/a-practical-cross-browser-testing-checklist-1p6a