Pengantar
Jika Anda adalah developer web yang menargetkan web multiperangkat, Anda mungkin harus menguji situs dan aplikasi web di sejumlah perangkat dan konfigurasi yang berbeda. Pengujian yang disinkronkan dapat membantu hal tersebut dan merupakan cara yang efektif untuk otomatis melakukan interaksi yang sama di sejumlah perangkat dan browser secara bersamaan.
Pengujian yang disinkronkan dapat membantu memecahkan dua masalah yang sangat memakan waktu:
- Menjaga semua perangkat Anda tetap sinkron dengan URL yang ingin Anda uji. Memuatnya secara manual di setiap perangkat terasa seperti kemarin, membutuhkan waktu lebih lama, dan memudahkan kehilangan regresi.
- Menyinkronkan interaksi. Dapat memuat halaman sangat cocok untuk pengujian visual, tetapi untuk pengujian interaksi, sebaiknya Anda juga dapat menyinkronkan scroll, klik, dan perilaku lainnya.
Untungnya, jika Anda memiliki akses ke beberapa perangkat target Anda, ada sejumlah alat yang ditujukan untuk memperlancar alur dari desktop ke perangkat seluler Anda. Dalam artikel ini, kita akan membahas Ghostlab, Remote Preview, Adobe Edge Inspect dan Grunt.
Alat
GhostLab (Mac)
Ghostlab adalah aplikasi Mac komersial ($49) yang dirancang untuk menyinkronkan pengujian situs dan aplikasi web di beberapa perangkat. Dengan penyiapan minimum, Anda dapat menyinkronkan secara bersamaan:
- Klik
- Navigasi
- Scroll
- Input formulir (misalnya, formulir login, pendaftaran)
Dengan begitu, pengujian pengalaman pengguna situs Anda secara menyeluruh di beberapa perangkat akan menjadi sangat mudah. Setelah Anda membuka halaman di browser pada perangkat, setiap perubahan pada navigasi (termasuk pemuatan ulang) akan menyebabkan perangkat lain yang terhubung dimuat ulang secara instan. Ghostlab mendukung pengamatan direktori lokal sehingga pembaruan ini juga terjadi saat Anda menyimpan hasil edit ke file lokal sehingga semuanya selalu sinkron.
Menurut saya, menyiapkan Ghostlab itu proses yang mudah. Untuk memulai, download, instal, dan jalankan uji coba (atau versi lengkapnya jika Anda sedang ingin membeli). Selanjutnya, Anda perlu menghubungkan Mac dan perangkat yang ingin diuji ke jaringan Wifi yang sama agar dapat ditemukan.
Setelah Ghostlab berjalan, Anda dapat mengklik "+" untuk menambahkan URL untuk pengujian atau cukup menariknya dari kolom URL browser. Atau, tarik folder lokal yang ingin Anda uji ke jendela utama, lalu entri situs baru akan dibuat. Untuk artikel ini, saya menguji versi aktif http://html5rock.com. Aneh, ya? ; )
Kemudian, Anda dapat memulai server Ghostlab baru dengan mengklik tombol putar ">" di samping nama situs Anda. Tindakan ini akan memulai server baru, yang tersedia di alamat IP khusus untuk jaringan Anda (misalnya http://192.168.21.43:8080).
Di sini, saya telah menyambungkan Nexus 4 dan mengarahkan Chrome untuk Android ke alamat IP yang diberikan Ghostlab. Hanya itu yang harus saya lakukan. Ghostlab tidak mengharuskan Anda menginstal klien khusus per perangkat seperti beberapa solusi lainnya, dan itu berarti Anda dapat memulai pengujian dengan lebih cepat.
Perangkat apa pun yang Anda hubungkan ke URL Ghostlab akan ditambahkan ke daftar klien yang terhubung di sidebar di sebelah kanan jendela utama Ghostlab. Mengklik dua kali nama perangkat akan menampilkan detail tambahan seperti ukuran layar, OS, dan sebagainya. Sekarang Anda dapat menguji navigasi dan sinkronisasi klik. Asyik.
Ghostlab juga dapat menampilkan beberapa statistik tentang perangkat terhubung seperti string UA, lebar dan tinggi area pandang, kepadatan piksel perangkat, rasio aspek, dan lainnya. Anda dapat mengubah URL dasar yang diperiksa secara manual dengan mengklik roda gigi setelan di samping entri. Tindakan ini akan membuka jendela konfigurasi yang terlihat seperti di bawah ini:
Sekarang saya dapat memilih salah satu perangkat saya yang terhubung, mengklik link yang berbeda di sekitar HTML5Rocks, dan navigasi akan disinkronkan di Chrome desktop (di mana saya memasukkan URL Ghostlab yang sama) serta di semua perangkat.
Yang lebih baik lagi adalah Ghostlab memiliki opsi yang memungkinkan Anda mem-proxy semua link yang melewati jaringan sehingga alih-alih mengklik http://192.168.21.43:8080/www.html5rocks.com, navigasi ke www.html5Rock.com/en/performance (misalnya), yang akan merusak link http://192.168.21.43:8080/www.html5rocks.com menavigasi ke www.html5Rocks.com/en/performance (misalnya), yang akan merusak link 192.168.21.43:8080/www.html5Rock.comhttp://192.168.21.43/www.htm5rocks.com/en/performance
Untuk mengaktifkan, centang "Load all content through Ghostlab" di bawah tab "Content Loading".
Melihat cara kerjanya:
Ghostlab mampu memuat sejumlah situs atau jendela di seluruh browser yang didukung. Hal ini tidak hanya memungkinkan Anda menguji situs pada berbagai resolusi, tetapi juga melihat perilaku kode di berbagai browser dan platform. Hore!
Dengan Ghostlab, Anda dapat mengonfigurasi penyiapan untuk ruang kerja project yang sedang dipratinjau dan menentukan apakah Anda ingin perubahan pada direktori dipantau dan dimuat ulang saat terdeteksi. Ini berarti perubahan menyebabkan semua klien yang terhubung diperbarui. Tidak ada lagi pembaruan manual.
Anda mungkin ingin tahu apa lagi yang dapat Ghostlab bantu. Meskipun bukan pisau tentara swiss, pisau ini juga mendukung pemeriksaan kode jarak jauh pada perangkat yang terhubung. Melalui antarmuka utama, mengklik dua kali nama perangkat akan memunculkan opsi "debug" yang akan meluncurkan versi Chrome DevTools untuk Anda bermain-main.
Ghostlab memungkinkan hal ini melalui paket pemeriksa web jarak jauh Weinre, yang memungkinkan Anda men-debug skrip dan mengubah gaya di perangkat yang terhubung. Serupa dengan pengalaman proses debug jarak jauh yang tersedia untuk Chrome untuk Android, Anda dapat memilih elemen, menjalankan beberapa skrip pembuatan profil performa, dan debug.
Secara keseluruhan, saya terkesan dengan betapa cepatnya saya dapat menggunakan Ghostlab untuk pengujian sehari-hari di berbagai perangkat. Jika Anda seorang {i>freelancer<i}, Anda mungkin akan melihat biaya lisensi komersial yang agak tinggi (lihat di bawah untuk opsi lainnya). Namun, saya akan dengan senang hati merekomendasikan Ghostlab.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect adalah bagian dari paket langganan Adobe Creative Cloud, tetapi juga tersedia sebagai uji coba gratis. Dengan alat ini, Anda dapat mengemudi beberapa perangkat iOS dan Android dengan Chrome (melalui ekstensi Chrome Edge Inspector), sehingga jika Anda menjelajah ke URL tertentu, semua perangkat yang terhubung akan tetap sinkron.
Untuk melakukan persiapan, daftar ke akun Adobe Creative Cloud terlebih dahulu atau login ke akun yang sudah ada jika Anda sudah memilikinya. Selanjutnya, download dan instal Edge Inspect dari Adobe.com (saat ini tersedia untuk Mac dan Windows, tetapi tidak untuk Linux. Maaf!). Perlu diperhatikan bahwa docs untuk Edge Inspect berguna untuk disimpan.
Setelah diinstal, sebaiknya dapatkan ekstensi pemeriksaan Edge untuk Chrome agar Anda dapat menyinkronkan penjelajahan antarperangkat yang terhubung.
Anda juga harus menginstal klien Edge Inspect di setiap perangkat yang ingin Anda gunakan untuk menyinkronkan tindakan. Untungnya, klien tersedia untuk iOS, Android, dan Kindle.
Dengan proses penginstalan di belakang kami, kini kami dapat mulai memeriksa halaman kami. Anda harus memastikan semua perangkat terhubung ke jaringan yang sama agar fitur ini berfungsi.
Mulai Edge Inspect di desktop Anda, ekstensi Edge Inspect di Chrome, dan lalu aplikasi di perangkat Anda (lihat di bawah):
Sekarang kita dapat menavigasi ke situs seperti HTML5Rocks.com di desktop dan perangkat seluler kita akan secara otomatis menavigasi ke laman yang sama.
Pada ekstensi, sekarang Anda juga akan melihat perangkat tercantum dengan simbol <> di sampingnya seperti pada screenshot di bawah. Mengklik ini akan meluncurkan instance Weinre yang memungkinkan Anda untuk memeriksa dan men-debug halaman.
Weinre adalah penampil dan konsol DOM, dan tidak memiliki fitur dari Chrome DevTools seperti proses debug JavaScript, pembuatan profil, dan waterfall jaringan. Meskipun merupakan alat minimum bagi developer, ini berguna untuk memeriksa kesehatan status DOM dan JavaScript.
Ekstensi Edge Inspect juga mendukung pembuatan screenshot dari perangkat yang terhubung dengan mudah. Berguna untuk pengujian tata letak atau hanya mengambil screenshot halaman Anda untuk dibagikan kepada orang lain.
Bagi developer yang sudah membayar CC, Edge Inspect adalah solusi yang bagus. Namun, metode ini memiliki beberapa peringatan, seperti setiap perangkat memerlukan penginstalan klien khusus dan sedikit pekerjaan penyiapan tambahan yang mungkin tidak Anda temukan dengan alternatif seperti Ghostlab.
Pratinjau Jarak Jauh (Mac, Windows, Linux)
Pratinjau Jarak Jauh adalah alat open source tempat Anda menghosting halaman dan konten HTML yang dapat ditampilkan di beberapa perangkat.
Pratinjau jarak jauh mengeksekusi panggilan XHR pada interval setiap 1100 md untuk memeriksa apakah URL dalam file konfigurasi telah berubah. Jika menemukannya, skrip akan memperbarui atribut src dari iframe yang dimuat ke dalam halaman untuk setiap perangkat, yang memuat halaman tersebut ke dalamnya. Jika tidak ada perubahan yang terdeteksi, skrip akan melanjutkan polling hingga perubahan dilakukan.
Cara ini sangat bagus untuk merangkai perangkat dan mengubah URL dengan mudah di semua perangkat tersebut. Untuk memulai:
- Download Pratinjau Jarak Jauh dan pindahkan semua file untuk pratinjau tersebut ke server yang dapat diakses secara lokal. Bisa berupa {i>dropbox<i}, server pengembangan atau yang lainnya.
- Muat "index.html" dari download ini di semua perangkat target Anda. Halaman ini akan digunakan sebagai driver dan akan memuat halaman yang ingin Anda uji menggunakan iframe.
- Edit "url.txt" (disertakan dalam download dan kini ditayangkan di server Anda) dengan URL yang ingin Anda lihat pratinjaunya. Simpan file ini.
- Pratinjau Jarak Jauh akan melihat bahwa file url.txt telah berubah dan akan memperbarui semua perangkat yang terhubung untuk memuat URL Anda.
Meskipun merupakan solusi lo-fi, Pratinjau Jarak Jauh gratis dan berfungsi.
Grunt + Live-Reload (Mac, Windows, Linux)
Grunt (dan Yeoman) adalah alat command line yang digunakan untuk scaffolding dan membangun project di front-end. Jika Anda sudah menggunakan alat ini dan menyiapkan pemuatan ulang live, Anda dapat dengan mudah memperbarui alur kerja untuk mengaktifkan pengujian lintas-perangkat, di mana setiap perubahan yang Anda buat di editor akan menyebabkan pemuatan ulang pada perangkat mana pun tempat Anda membuka aplikasi lokal.
Anda mungkin sudah terbiasa menggunakan grunt server. Saat dijalankan dari direktori utama
project, project akan mengawasi setiap perubahan pada file sumber Anda dan
akan otomatis memuat ulang jendela browser. Hal ini berkat
tugas grunt-contrib-watch yang kami jalankan sebagai bagian dari server.
Jika Anda kebetulan menggunakan Yeoman untuk menyusun project, ia akan
membuat Gruntfile dengan semua yang diperlukan untuk melakukan pemuatan ulang live di
desktop Anda. Agar dapat berfungsi lintas perangkat, Anda hanya perlu mengubah satu
properti, yaitu hostname (di desktop). ID tersebut harus tercantum di bagian
connect. Jika Anda melihat hostname disetel ke localhost, ubah saja ke
0.0.0.0. Selanjutnya, jalankan grunt server dan seperti biasa, jendela baru akan terbuka
yang menampilkan pratinjau halaman Anda. URL-nya mungkin akan terlihat seperti http://localhost:9000 (portnya 9000).
Buka tab atau terminal baru dan gunakan ipconfig | grep inet untuk menemukan
IP internal sistem Anda. Tampilannya mungkin terlihat seperti 192.168.32.20. Langkah terakhir adalah membuka
browser seperti Chrome di perangkat yang ingin Anda sinkronkan livereloadnya
dan ketik alamat IP ini, diikuti dengan nomor port sebelumnya, yaitu
192.169.32.20:9000.
Selesai. Muat ulang live kini seharusnya menyebabkan semua pengeditan yang Anda lakukan pada file sumber di desktop memicu pemuatan ulang di browser desktop dan browser di perangkat seluler Anda. Keren!
Yeoman juga memiliki Generator seluler yang memudahkan penyiapan alur kerja ini.
LiveStyle Emmet
Emmet LiveStyle adalah plugin browser dan editor yang menghadirkan pengeditan CSS langsung ke alur kerja pengembangan Anda. Saat ini, alat ini tersedia untuk Chrome, Safari, dan Sublime Text, serta mendukung pengeditan dua arah (editor ke browser dan sebaliknya).
Emmet LiveStyle tidak memaksa refresh browser lengkap saat Anda membuat perubahan, tetapi mengirim edit CSS ke seluruh protokol proses debug jarak jauh DevTools. Artinya, Anda dapat melihat perubahan yang dibuat di editor desktop pada versi Chrome yang terhubung, baik di Chrome desktop maupun Chrome untuk Android.
LiveStyle memiliki apa yang disebutnya "mode multi-tampilan", yang ideal untuk menguji dan menyesuaikan desain responsif di jendela dan perangkat. Dalam mode multi-tampilan, semua update editor diterapkan ke semua jendela, begitu juga update DevTools untuk halaman yang sama.
Dengan paket LiveStyle yang sudah terinstal, untuk memulai pengeditan CSS langsung:
- Memulai Sublime Text dan membuka file CSS di sebuah proyek
- Mulai Chrome dan buka halaman dengan CSS yang ingin Anda edit
- Buka DevTools dan masuk ke panel LiveStyle. Centang opsi "Enable LiveStyle". Catatan: DevTools harus tetap terbuka selama sesi pengeditan langsung untuk setiap jendela agar pembaruan gaya dapat diterapkan.
- Jika telah diaktifkan, daftar stylesheet akan ditampilkan di sebelah kiri dan daftar file editor di sebelah kanan. Pilih file editor yang akan dikaitkan dengan browser. Selesai. Boom.
Sekarang daftar file editor akan otomatis diperbarui saat Anda mengedit, membuat, membuka, atau menutup file.
Kesimpulan
Pengujian lintas-perangkat masih merupakan ruang baru dan bergerak cepat dengan banyak pesaing baru dalam pengembangan. Untungnya, ada sejumlah alat gratis dan komersial untuk memastikan kompatibilitas dan pengujian Anda di berbagai set perangkat.
Meskipun demikian, masih ada banyak potensi untuk ditingkatkan di area ini dan sebaiknya Anda memikirkan bagaimana alat untuk pengujian di berbagai perangkat dapat lebih ditingkatkan. Apa pun yang mengurangi waktu penyiapan dan meningkatkan alur kerja lintas perangkat Anda akan bermanfaat.
Masalah
Mungkin masalah terbesar yang saya alami selama pengujian dengan alat ini adalah perangkat yang tidur secara teratur. Ini tidak merusak kesepakatan, tetapi akan mengganggu setelah beberapa saat. Jika memungkinkan, sebaiknya setel perangkat agar tidak tidur sebagai solusi. Namun, perlu diingat bahwa tindakan ini dapat menghabiskan baterai kecuali jika Anda selalu dicolokkan ke sumber listrik.
Saya pribadi tidak mengalami masalah besar dengan GhostLab. Dengan harga $49, beberapa mungkin harganya sedikit curam; tetapi, perlu diingat jika Anda menggunakannya secara rutin, harga akan lebih atau kurang sepadan. Salah satu hal terbaik tentang penyiapan ini adalah tidak perlu mengkhawatirkan penginstalan dan pengelolaan klien per perangkat target. URL yang sama berfungsi di mana saja.
Dengan Adobe Edge Inspect, saya merasa menginstal dan menggunakan klien tertentu pada setiap perangkat sedikit merepotkan. Saya juga merasa tidak memperbarui semua klien yang terhubung secara konsisten, yang berarti saya harus melakukannya sendiri dari ekstensi Chrome. Library ini juga memerlukan langganan ke Creative Cloud dan terbatas untuk memuat situs di klien, bukan di browser yang dipilih di perangkat Anda. Hal ini dapat membatasi kemampuan Anda untuk melakukan pengujian secara akurat.
Pratinjau Jarak Jauh berfungsi seperti yang diiklankan, tetapi sangat ringan. Artinya, bukan hanya memuat ulang situs di berbagai perangkat, Anda juga memerlukan opsi alat yang lebih canggih. Misalnya, tindakan ini tidak akan menyinkronkan klik atau scroll.
Rekomendasi
Jika Anda mencari solusi lintas platform gratis untuk memulai, sebaiknya gunakan Pratinjau Jarak Jauh. Bagi mereka yang bekerja di perusahaan yang mencari solusi berbayar, GhostLab secara konsisten sangat baik dalam pengalaman saya, tetapi hanya tersedia untuk Mac. Untuk pengguna Windows, Adobe Edge Inspect adalah panggilan terbaik Anda dan dikurangi beberapa kebiasaan unik, umumnya menyelesaikan pekerjaan.
Grunt dan LiveStyle juga sangat bagus untuk meningkatkan iterasi live Anda selama pengembangan.