Advertisement
  1. Code
  2. Tools & Tips

Menggunakan BrowserStack untuk pengujian Lintas-Browser

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Pengujian browser adalah kutukan dari keberadaan kita. Yah, itu adalah sedikit berlebihan, tetapi tidak banyak. Beberapa versi browser dan fragmentasi browser dapat menjadikan sulit untuk mendapatkan cakupan tes yang baik untuk situs Anda terutama ketika Anda memfaktor di sistem operasi yang berbeda yang digunakan oleh pengembang untuk membangun dengannya.

Selama bertahun-tahun, kita telah mengandalkan berbagai alat untuk membantu kami dengan tantangan ini termasuk mesin virtual, alat-alat yang mensimulasikan browser dan bahkan memiliki beberapa perangkat di tangan untuk bekerja dengannya. Akan lebih bagus jika ada cara untuk memiliki satu viewport yang memungkinkan kita untuk dengan mudah menguji seluruh browser besar dan versi individu mereka tanpa melompat melalui lingkaran.

BrowserStack.com bertujuan untuk menawarkan ini melalui virtualisasi layanan berbasis browser dan dalam artikel ini kita akan membahas layanannya dan bagaimana ini membantu mengatasi masalah pengujian lintas-browser.


Browser Di Dalam Browser Anda

Saya telah menyebutkan bahwa BrowserStack menawarkan layanan virtualisasi. Apa yang kebanyakan pengembang pikirkan ketika mereka mendengar bahwa adalah "mesin virtual" dan bukan dalam cara yang indah. Mesin virtual, sementara tentu saja berguna, memerlukan ruang disk yang berharga dan sumber daya agar menjadi berguna dan sebagian besar pengembang benci harus menjalankan mereka karenanya. BrowserStack mengambil pendekatan yang berbeda dengan memanfaatkan Adobe Flash untuk memberikan virtualisasi browser dalam browser Anda sendiri. Anda tidak perlu menginstal apapun dan Anda mendapatkan akses ke browser virtual nyata di internet.

Untuk memberikan contoh, menggunakan layanan saya menarik halaman utama Nettuts+ melalui Safari 5.1 di OSX Lion saat menggunakan Internet Explorer 11.

bs-nettuts-page

Itu fungsionalitas yang cukup kuat dan kuncinya adalah bahwa itu semua dilakukan dalam browser Anda. Dan tentu saja Anda tidak dibatasi dalam pilihan versi OS atau browser. BrowserStack menawarkan virtualisasi untuk:

  • Windows XP, 7 dan 8
  • OSX Snow Leopard, Lion dan Mountain Lion
  • iOS
  • Android
  • Opera Mobile
bs-oses

Benar sekali, mereka menawarkan virtualisasi browser mobile. Kita berada di dunia mobile, jadi saya mengharapkan tidak kurang.

Tergantung pada sistem operasi yang Anda pilih, BrowserStack menawarkan sejumlah browser yang didukung untuk OS tertentu termasuk beta dan nightly dalam beberapa kasus.

bs-browsers

Ya, bahkan IE6 yang ditakuti juga tersedia. Itu tidak akan mati cukup cepat.

Selain pilihan OS dan browser, Anda juga dapat memilih resolusi layar yang Anda ingin untuk mengujinya yang sangat berguna untuk memeriksa tata letak responsif Anda. Ketahui juga bahwa BrowserStack juga memiliki layanan pelengkap untuk mengatasi desain responsif yang menghasilkan screenshot untuk perangkat yang berbeda dan ukuran.

Titik utamanya adalah bahwa ada cakupan tes ekstensif di sini tanpa perlu menginstal apapun untuk menggunakannya.


Bagaimana Cara Kerjanya?

Hal pertama yang perlu Anda lakukan adalah mendaftar untuk layanannya. BrowserStack adalah layanan untuk-membayar dan saya pikir harganya sangat wajar untuk fungsionalitasnya yang Anda dapatkan dan ya ada fitur lebih banyak lagi.

Setelah Anda telah terdaftar dan sign in, Anda akan berada di dashboard yang menawarkan sebuah dialog ringkas.

bs-quick-start

Hal ini memungkinkan Anda untuk dengan mudah memasukkan URL yang ingin Anda uji dan melalui dropdown, target OS dan versi browser. Anda dapat mengatur hal-hal melalui panel kiri yang menawarkan simulasi pilihan resolusi layar dan kecepatan render halaman.

Mengklik start akan memulai proses membangun koneksi melalui Flash ke server remote dan me-render browser yang divirtualisasi:

bs-flash-start

Apa ingin saya tekankan di sini adalah bahwa ini bukanlah sebuah pengambil screenshot atau semacam sesi palsu. Anda memiliki akses penuh ke fungsionalitas halaman web termasuk menu, tombol, dan sebagainya. Ini juga termasuk developer tools yang ada di browser. Ya, Anda membacanya dengan benar. Anda memiliki akses ke alat-alat seperti Web Developer Tools Firefox, peralatan IE F12 dan Developer Tools Chrome. Pada layar ini, saya beradad di sesi menjalankan Firefox di Mountain Lain dan menggunakan Web Developer Tools Firefox.

bs-dev-tools

Jadi tidak hanya Anda dapat melihat bagaimana halaman Anda akan di-render di berbagai browser tetapi Anda juga dapat menggunakan alat bantu yang ada untuk debug masalah umum. Sangat bagus!


Pergi ke Lokal

Ini jelas mengagumkan untuk dapat memeriksa halaman Anda setelah mereka tersedia untuk umum tetapi dalam banyak kasus, Anda akan mengembangkan secara lokal dan akan ingin memeriksa halaman Anda sebelum mendorong kode Anda untuk produksi.

BrowserStack telah membahas ini dengan menyediakan kemampuan tunneling yang memungkinkan Anda untuk menguji halaman lokal Anda dari jarak jauh. Menggunakan Java applet untuk bertindak sebagai proxy antara direktori Anda atau web server dan layanan berbasis-cloud. Ya, ini berarti Anda akan perlu untuk menginstal Java dan sementara saya cenderung tidak merekomendasikan pemasangan plugin browser Java, dalam hal ini adalah suatu keharusan dan berharga. Meskipun BrowserStack tidak menginstal plugin. Ini melayani sebuah applet yang memanfaatkan plugin browser Java applet. Hanya pastikan untuk menonaktifkan plugin browser setelah Anda selesai melakukan pengujian. Hal yang perlu diperhatikan adalah bahwa selama pengujian saya pada Windows 8.1, saya perlu untuk menggunakan versi 32-bit Java JRE yang 64-bit tampaknya tidak bekerja dan tidak akan menginstal browser plugin ke Firefox atau Chrome. Untuk mendapatkan versi 32-bit, pergi ke halaman manual download Oracle. Juga sadari bahwa Firefox tidak akan mengaktifkan plugin secara default sehingga Anda akan perlu untuk mengaktifkannya.

Melihat panel kiri di dashboard BrowserStack, Anda akan melihat bagian yang berjudul "Local Testing" dengan dua tombol yang berlabel "Web tunnel" dan "Command line".

bs-local-1

Opsi "Web Tunnel" memanfaatkan Java applet untuk membangun tunnel antara komputer Anda dan layanan jarak jauh. Ini dapat dilakukan pada tingkat sistem file dimana Anda akan memilih direktori spesifik dengan halaman Anda atau URL server lokal (contoh: localhost). Untuk menggambarkan hal ini, saya telah menginstal WAMP pada PC saya untuk memiliki sebuah server web lokal untuk digunakan dengan BrowserStack. WAMP secara default juga menginstal phpMyAdmin yang dapat diakses melalui:

http://localhost:81/phpmyadmin/

Saya menggunakan port 81 agar tidak bertentangan dengan proses lain yang saya jalankan. Mengklik pilihan "Web Tunnel" membuka dialog berikut yang membiarkan Anda tahu bahwa applet sedang loading:

bs-applet-1

Karena Oracle telah bekerja untuk mengamankan Java, terutama plugin browser mereka, Anda akan diminta untuk menjalankan applet. Saran saya adalah untuk tidak pernah membiarkan applet unsigned apapun dari situs web untuk dijalankan pada PC Anda jadi saya selalu menetapkan pengaturan keamanan Java untuk "High". Ada juga pilihan yang disebut "Very High" tetapi menggunakannya akan mencegah applet BrowserStack menyambung dari jauh.

bs-applet-2

Setelah applet berjalan, Anda akan disajikan dengan sebuah dialog yang meminta Anda alamat server lokal atau folder.

bs-tunnel

Seperti yang Anda lihat, saya masukkan URL lokal saya dan itu terdeteksi nomor port-nya. Anda juga dapat menggunakan SSL jika Anda memerlukannya. Dari sana, saya memulai koneksi dan saya dapat melihat salinan lokal dari phpMyAdmin di server remote BrowserStack.

bs-tunnel-2

Sekarang, jika Anda tidak ingin menggunakan Java applet dalam browser atau untuk beberapa alasan tidak dapat bekerja, Anda dapat menggunakan opsi "Command line" yang mengharuskan Anda men-download file .jar yang dipanggil melalui baris perintah untuk membangun koneksi:

<key> adalah access key BrowserStack yang harus Anda masukkan. Setelah sambungan dibuat, Anda kemudian kembali ke dashboard untuk memulai pengujian.

Secara pribadi, saya suka pendekatan applet karena sangat sederhana. Anda bisa mendapatkan satu ton rincian lebih lanjut tentang pengujian lokal BrowserStack pada halaman ini.


Secara Keseluruhan Lebih Banyak Lagi

Saya pikir Anda akan setuju bahwa dari perspektif pengujian browser, ini adalah layanan yang sangat bagus yang membuatnya jauh lebih mudah untuk melakukan pengujian lintas-browser, bahkan secara lokal. Dan sudah tentu alternatif ke mesin virtual untuk siapa saja yang memiliki sumber daya sistem minim.

Tapi BrowserStack menawarkan lebih banyak termasuk uji fungsional otomatis, menangkap screenshot browser dan layanan pengujian desain responsif yang memungkinkan Anda melihat bagaimana situs Anda akan terlihat melalui beberapa perangkat (bukan browser saja).

Ini adalah salah satu layanan yang sebagai pengembang profesional pasti bernilai investasi.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.