Mengemulasikan dan Menguji Browser Lain

Tugas Anda belum selesai di tahap memastikan situs berjalan mulus di Chrome dan Android. Meskipun Device Mode bisa menyimulasikan berbagai perangkat lain seperti iPhone, kami sarankan agar Anda memeriksa solusi browser lain untuk emulasi."

TL;DR

  • Bila Anda tidak memiliki perangkat tertentu, atau ingin melakukan pemeriksaan cepat pada sesuatu, langkah terbaik adalah mengemulasikan perangkat langsung dari dalam browser Anda.
  • Emulator dan simulator perangkat memungkinkan Anda meniru situs development di berbagai perangkat dari tempat kerja Anda.
  • Emulator berbasis awan memungkinkan Anda mengotomatiskan pengujian unit untuk situs Anda di platform yang berbeda.

Emulator browser

Emulator browser sangat bermanfaat untuk menguji daya respons situs, tetapi tidak mengemulasikan perbedaan di API, dukungan CSS, dan perilaku tertentu yang ingin Anda lihat di browser seluler. Uji situs Anda pada browser yang berjalan pada perangkat nyata agar yakin semuanya berjalan seperti yang diharapkan.

Tampilan Desain Responsif Firefox

Firefox memiliki tampilan desain responsif yang mendorong Anda berhenti memikirkan perangkat tertentu, tetapi sebaiknya mengeksplorasi perubahan desain pada ukuran layar yang umum atau layar Anda sendiri dengan menyeret tepinya.

F12 Emulation Edge

Untuk mengemulasikan ponsel Windows, gunakan emulasi bawaan Microsoft Edge.

Karena Edge tidak dilengkapi kompatibilitas lawas, gunakan Emulasi IE 11 untuk menyimulasikan tampilan laman Anda di versi lama Internet Explorer.

Emulator dan simulator perangkat

Simulator dan emulator perangkat tidak hanya menyimulasikan lingkungan browser, tetapi juga keseluruhan perangkat. Alat ini berguna untuk menguji hal-hal yang memerlukan integrasi OS, misalnya masukan formulir dengan keyboard virtual.

Android Emulator

Browser Bawaan Android Emulator
Browser Bawaan di Android Emulator

Saat ini, memasang Chrome pada Android Emulator tidak bisa dilakukan. Namun, Anda bisa menggunakan Browser Android, Chromium Content Shell, dan Firefox untuk Android yang akan kita bahas nanti di panduan ini. Chromium Content Shell menggunakan mesin rendering Chrome yang sama, tetapi tidak dilengkapi fitur browser khusus apa pun.

Android Emulator dilengkapi dengan Android SDK yang harus Anda unduh dari sini. Lalu, ikuti petunjuk untuk menyiapkan perangkat virtual dan memulai emulator.

Setelah emulator dihidupkan, klik ikon Browser dan Anda pun bisa menguji situs pada Browser Bawaan untuk Android versi lama.

Chromium Content Shell di Android

Android Emulator Content Shell
Android Emulator Content Shell

Untuk memasang Chromium Content Shell untuk Android, biarkan emulator berjalan dan jalankan perintah berikut di command prompt:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

Sekarang Anda bisa menguji situs Anda dengan Chromium Content Shell.

Firefox di Android

Ikon Firefox di Android Emulator
Ikon Firefox di Android Emulator

Sama dengan Content Shell Chromium, Anda bisa mendapatkan APK untuk memasang Firefox di emulator.

Unduh .apk yang benar dari https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Dari sini, Anda bisa memasang file pada emulator yang terbuka atau perangkat Android yang terhubung dengan perintah berikut:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

Simulator iOS

Simulator iOS untuk Mac OS X satu paket dengan Xcode, yang bisa Anda pasang dari App Store.

Setelah selesai, pelajari cara bekerja dengan simulator di dokumentasi Apple.

Modern.IE

VM Modern IE
VM Modern IE

Mesin Virtual Modern.IE memungkinkan Anda mengakses versi IE yang berbeda di komputer Anda melalui VirtualBox (atau VMWare). Pilih mesin virtual di laman unduhan di sini.

Emulator dan simulator berbasis awan

Jika Anda tidak bisa menggunakan emulator dan tidak memiliki akses ke perangkat fisik, emulator berbasis awan bisa menjadi pilihan terbaik. Keuntungan utama emulator berbasis awan dibanding perangkat fisik dan emulator lokal adalah Anda bisa mengotomatiskan pengujian unit untuk situs Anda di berbagai platform yang berbeda.

  • BrowserStack (berbayar) adalah yang paling mudah digunakan untuk pengujian manual. Anda bisa memilih sistem operasi, memilih versi browser dan jenis perangkat, memilih URL untuk dijelajahi, dan BrowserStack akan menghidupkan mesin virtual yang di-host yang dengannya Anda bisa berinteraksi. Anda juga bisa mengaktifkan beberapa emulator di layar yang sama, sehingga Anda bisa menguji bagaimana tampilan dan nuansa aplikasi Anda di berbagai perangkat yang berbeda sekaligus.
  • SauceLabs (berbayar) memungkinkan Anda menjalankan pengujian unit di dalam emulator yang bisa menjadi sangat berguna untuk menuliskan skrip aliran melalui situs Anda dan melihat rekaman video aliran ini setelahnya pada berbagai perangkat. Anda juga bisa melakukan pengujian manual untuk situs Anda.
  • Device Anywhere (berbayar) tidak menggunakan emulator, tetapi perangkat fisik yang bisa Anda kontrol dari jauh. Ini berguna apabila Anda perlu mereproduksi masalah pada perangkat khusus dan tidak bisa melihat bug di opsi yang lain di panduan ini.