Cara Membuat Pengujian Lintas-Browser Lebih Efisien Dengan LambdaTest

Artikel ini telah didukung dengan baik oleh teman-teman terkasih kami di LambdaTest, alat pengujian kompatibilitas lintas-browser yang memungkinkan Anda melakukan pengujian lintas-browser interaktif otomatis dan langsung secara gratis di browser dan perangkat nyata. Terima kasih!

Sebelum konsumen duduk di depan perangkat seluler selama berjam-jam setiap hari, ada banyak browser dan sistem operasi yang harus dihadapi oleh perancang web. Jadi, bukan seperti konsep pengujian lintas browser yang baru.

Karena browser web tidak selalu membuat situs web dengan cara yang sama atau memproses data dengan cara yang semula dimaksudkan, pengujian lintas-browser telah lama menjadi bagian penting dari desain dan pengembangan web. Ini satu-satunya cara untuk memastikan bahwa apa yang dibangun di belakang layar diterapkan dengan benar di bagian depan situs web.

Tapi itu bisa dengan cepat menjadi pekerjaan yang membosankan jika Anda mencoba meninjau setiap browser, OS, dan perangkat Anda sendiri.

Untungnya, kita hidup di era di mana otomatisasi adalah raja dan sekarang kita memiliki cara yang lebih baik untuk melakukan pengujian lintas-browser (dan juga lebih sering). Jadi, mari kita bicara tentang mengapa Anda perlu mengotomatiskan proses ini dan bagaimana melakukannya dengan bantuan LambdaTest.

Cara yang Lebih Baik Untuk Menangani Pengujian Lintas-Browser

Saat Anda mulai membangun situs web untuk pengguna Anda, Anda memperhitungkan siapa mereka, apa yang mereka butuhkan, dan apa yang akan mereka tanggapi sepanjang perjalanan mereka. Namun bagaimana dan kapan Anda mengatasi berbagai hasil yang mungkin dialami pengguna Anda berkat pilihan browser mereka?

Desain responsif dapat membantu mengurangi beberapa perbedaan ini, tetapi ini bukan solusi untuk semua masalah tampilan yang melekat antara browser dan perangkat.

Untuk memastikan sepenuhnya bahwa kode dan pilihan desain yang Anda buat untuk situs web tidak akan berdampak negatif pada pengguna, pengujian lintas-browser di seluruh proses desain web sangat penting.

“

Dan jika Anda ingin memastikan pengujian lintas-browser yang ekstensif tidak berdampak negatif pada laba Anda , maka mengotomatiskannya adalah cara yang harus dilakukan.

Berikut adalah beberapa tip untuk membantu Anda membangun pengujian otomatis ke dalam proses Anda:

Biasakan Diri Anda Dengan Perbedaan Dukungan Browser

Ini adalah ringkasan dari Statista dari browser web teratas berdasarkan pangsa pasar:

Sekarang, masalahnya di sini belum tentu setiap browser memproses data situs web Anda secara berbeda. Apa yang benar-benar mengacaukan segalanya adalah mesin yang menjalankan browser di belakang layar.

Misalnya, ini adalah mesin yang digunakan browser web terkemuka:

• Chrome menggunakan Blink + V8;
• Edge menggunakan Blink;
• Firefox menggunakan Quantum/Gecko + SpiderMonkey;
• Safari menggunakan WebKit + Nitro;
• Internet Explorer menggunakan Trident + Chakra.

Banyak dari mesin ini membuat potongan kode yang sama secara berbeda. Misalnya, lihat eksperimen yang dibuat oleh LambdaTest ini:

Tag HTML tanggal adalah salah satu tag yang paling sering digunakan, namun hanya Chrome, Firefox, dan Opera yang mendukung sepenuhnya — seperti yang ditunjukkan pada bilah biru atas di atas area pengujian. Meski begitu, browser ini memberikan pengalaman pengguna yang sangat berbeda.

Misalnya, gambar di atas menunjukkan seperti apa tag tanggal di Chrome. Begini cara kode yang sama ditampilkan di Edge:

Tidak hanya gaya dan ukuran font yang sedikit berbeda, tetapi cara dropdown pemilihan tanggal muncul sangat berbeda.

Jadi, sebelum Anda mulai berpikir tentang pengujian lintas-browser dan mengatasi kekusutan antara browser dan mesin ini, biasakan diri Anda dengan perbedaan utama.

Alat yang dapat Anda gunakan sebagai referensi adalah Dapatkah saya menggunakan….

Anda dapat mencari perbedaan dalam komponen dan teknologi yang paling umum digunakan. Ambil, misalnya, tata letak kotak CSS:

Sebagian besar browser terkemuka (dan beberapa tidak begitu terkemuka) mendukung tata letak kotak CSS (yang berwarna hijau). Internet Explorer (berwarna biru) menyediakan dukungan parsial dan Opera Mini (berwarna ungu) tidak memberikan dukungan sama sekali.

Atau katakanlah Anda mencoba menggunakan lebih banyak gambar WebP dalam desain Anda karena kinerja dan resolusinya jauh lebih baik. Inilah yang dapat saya gunakan… memberi tahu kami tentang dukungan browser untuk format gambar:

Versi terbaru Internet Explorer dan Safari (web dan seluler) tidak mendukungnya. Jadi, jika Anda ingin mendesain dengan gambar WebP, Anda harus membuat solusi untuk browser ini.

Intinya: Luangkan waktu sekarang untuk memahami jenis konten atau kode apa yang didukung, sehingga Anda dapat lebih efektif membangun situs web dari awal.

Kiat Pro: Buat Matriks Browser untuk Referensi

Anda dapat melihat mengapa sangat penting untuk memahami perbedaan antara rendering dan dukungan browser. Semakin Anda membiasakan diri dengan mereka, semakin sedikit pengacakan yang harus Anda lakukan ketika perbedaan baru ditemukan.

Untuk mempermudah Anda, sebaiknya buat matriks browser untuk semua perbedaan ini sekarang.

Inilah yang sederhana yang dirancang LambdaTest:

Saya akan merekomendasikan membuat salah satu dari Anda sendiri. Anda dapat memanfaatkan data dari Can I use… serta mendokumentasikan masalah dukungan yang Anda temui dalam proyek Anda sendiri.

Ini juga akan membantu Anda menetapkan prioritas saat Anda mendesain. Misalnya, Anda dapat memutuskan fitur yang tidak didukung mana yang layak digunakan berdasarkan jenis dampaknya terhadap sasaran situs web Anda.

Ini juga akan berguna untuk memiliki spreadsheet ini di tangan setelah situs telah ditayangkan. Dengan menggunakan data dari Google Analytics, Anda dapat mulai memprioritaskan pilihan desain berdasarkan browser web mana yang paling sering digunakan pengguna Anda.

Dapatkan Alat Pengujian Lintas-Browser yang Melakukan Itu Semua

Tidak masalah ukuran situs web yang Anda buat. Semua situs publik akan mendapat manfaat dari alat pengujian lintas-browser otomatis.

Apa yang sangat bagus tentang mengotomatisasi dengan LambdaTest adalah ia memberikan opsi kepada penggunanya. Dari pengujian yang sepenuhnya otomatis yang memeriksa bagaimana kode Anda memengaruhi frontend hingga tugas semi-otomatis yang memudahkan pekerjaan dalam mengelola pembaruan dan bug, ada banyak cara untuk mengotomatisasi dan mengoptimalkan proses Anda.

Berikut adalah beberapa sorotan fitur yang harus Anda ketahui:

Pengujian Waktu Nyata: Terbaik untuk Pelacakan Bug

Pengujian waktu nyata berguna ketika ada sesuatu yang ditargetkan yang perlu Anda periksa dengan kedua mata Anda sendiri. Seperti jika Anda telah mengirimkan desain ke klien untuk ditinjau dan mereka bersikeras bahwa ada sesuatu yang tidak beres pada akhirnya, Anda dapat meninjau situs web menggunakan konfigurasi persisnya. Ini juga akan membantu untuk mengonfirmasi bug dan mencari tahu browser mana yang terpengaruh.

Dari panel Pengujian Waktu Nyata , Anda akan memasukkan URL situs Anda dan kemudian memilih spesifikasi tampilan Anda.

Ini memungkinkan Anda menjadi sangat spesifik, memilih dari:

• Mac vs Android,
• Tipe perangkat,
• Versi perangkat,
• Sistem operasi,
• peramban web.

Setelah tes dimulai, inilah yang akan Anda lihat (tergantung pada jenis perangkat yang Anda pilih, tentu saja):

Di atas, Anda dapat melihat opsi pertama di bilah sisi yang memungkinkan Anda untuk beralih tampilan perangkat dengan cepat. Dengan begitu, jika Anda memiliki beberapa tampilan browser yang Anda coba bandingkan atau periksa kesalahannya, Anda tidak perlu mundur.

Sejauh opsi pengujian real-time lainnya berjalan, kebanyakan dari mereka berguna untuk mengidentifikasi dan melaporkan masalah dalam konteks yang sebenarnya terjadi.

Pada alat pelacakan bug di atas, Anda dapat menunjukkan dengan tepat tempat di halaman di mana kesalahan telah terjadi. Anda kemudian dapat menandainya menggunakan sejumlah alat di bilah sisi.

Pengguna juga dapat menggunakan opsi tangkapan layar dan video untuk menangkap kesalahan yang lebih besar — ​​terutama yang terjadi saat Anda menelusuri atau terlibat dengan situs.

Pengujian Tangkapan Layar: Terbaik untuk Mempercepat Pengujian Manual

Tidak ada alasan Anda atau QA Anda masih tidak dapat meninjau situs web Anda sendiri. Yang mengatakan, mengapa membuat prosesnya memakan waktu lebih lama dari yang seharusnya? Anda dapat membiarkan alat Pengujian UI Visual LambdaTest mempercepat proses.

Alat Tangkapan Layar, misalnya, memungkinkan Anda memilih semua perangkat dan peramban yang ingin Anda bandingkan sekaligus:

Saat pengujian selesai, Anda akan memiliki semua tangkapan layar yang diminta di satu tempat:

Anda dapat melihatnya di sini, mengunduhnya ke komputer Anda atau membaginya dengan orang lain.

Anda juga dapat mengatur tangkapan layar berdasarkan proyek dan versi/putaran. Dengan begitu, jika Anda sedang mengerjakan beberapa putaran revisi dan ingin merujuk kembali ke versi sebelumnya, semua salinan dari iterasi sebelumnya ada di sini. (Anda juga dapat menggunakan tangkapan layar dalam pengujian regresi yang akan segera saya jelaskan.)

Pengujian Responsif: Terbaik untuk Mengonfirmasi Pengalaman Mobile-first

Jika Anda perlu melihat lebih dari sekadar tangkapan layar statis, tes Responsif telah Anda liput. Yang perlu Anda lakukan adalah memilih OS dan perangkat mana yang ingin Anda bandingkan dan alat ini akan mengisi versi situs yang berfungsi penuh di browser seluler:

Anda dapat meninjau desain dan interaktivitas situs web Anda tidak hanya di semua browser yang memungkinkan, tetapi Anda juga dapat mengubah orientasi situs (jika masalah muncul saat lanskap).

Apa yang bagus dari alat pengujian ini adalah, jika ada yang tampak miring, Anda dapat menandai bug begitu Anda mendeteksinya. Ada tombol bagi Anda untuk melakukannya langsung di atas browser seluler interaktif. Itu akan membuat kesalahan seluler yang mahal dilaporkan dan diselesaikan lebih cepat.

Pengujian Cerdas: Terbaik untuk Pengujian Regresi

Mata hanya dapat mendeteksi begitu banyak, terutama ketika Anda telah melihat bagian halaman web yang sama selama berminggu-minggu.

Jadi, ketika Anda mulai menerapkan perubahan di situs Anda — selama pengembangan, tepat sebelum peluncuran dan bahkan setelahnya — pengujian regresi akan menjadi sangat penting untuk menangkap masalah yang berpotensi sulit dikenali tersebut.

Ini harus dilakukan setiap kali ada perubahan:

• Anda secara manual memperbarui bagian dari desain.
• Kode di-tweak di backend.
• Seseorang melaporkan bug dan perbaikannya diterapkan.
• Perangkat lunak diperbarui.
• API terhubung kembali.

Jika Anda mengetahui halaman mana dan bagian mana dari halaman tersebut yang terkena dampak langsung, pengujian cerdas dapat mempermudah konfirmasi bahwa semuanya baik-baik saja.

Cukup unggah tangkapan layar asli dari halaman yang terpengaruh, lalu tambahkan gambar perbandingan saat perubahan telah dibuat. (Di sinilah alat Tangkapan Layar itu sangat berguna.)

Catatan: Jelas tidak ada yang salah dengan situs Smashing Magazine. Tapi yang saya lakukan pada contoh di atas adalah menggunakan rendering untuk versi iPhone yang berbeda. Jelas, itu bukan cara kerja tes regresi, tetapi saya ingin menunjukkan kepada Anda bagaimana fitur perbandingan ini terlihat ketika ada yang tidak beres.

Sekarang, mengapa fitur ini sangat mengagumkan, inilah cara kerjanya:

Tangkapan layar tunggal ini memungkinkan Anda melihat di mana dua versi halaman Anda tidak lagi sejajar. Jadi, jika tangkapan layar awalnya berasal dari tampilan browser yang sama, ini bisa menjadi masalah jika Anda tidak berencana untuk menyelaraskan kembali semua elemen.

Anda juga dapat menggunakan tes perbandingan berdampingan untuk memeriksa hal yang sama:

Sekali lagi, pengujian cerdas dimaksudkan untuk membantu Anda menemukan dan melaporkan masalah dengan cepat selama pengujian regresi. Temukan metode yang paling sesuai untuk Anda, sehingga Anda bisa menyelesaikan masalah ini secepat mungkin mulai sekarang.

Pengujian Otomatis: Terbaik untuk Mendeteksi Masalah pada Skala yang Lebih Besar

Secara teknis, semua yang telah kami lihat sejauh ini memiliki beberapa bentuk otomatisasi bawaan, apakah itu memproses 20 tangkapan layar browser yang berbeda secara bersamaan atau membiarkan Anda langsung melihat antarmuka pengujian seluler untuk semua perangkat iOS dan Android sekaligus.

Konon, platform LambdaTest juga dilengkapi dengan alat yang disebut "Otomasi". Dan hal ini memungkinkan Anda melakukan pengujian Selenium di cloud pada lebih dari 2.000 browser. Fitur yang lebih baru, "Lambda Tunnel", dapat digunakan untuk melakukan pengujian Selenium di localhost Anda juga. Dengan begitu, Anda dapat melihat bagaimana perubahan kode Anda muncul bahkan sebelum ditayangkan.

Ada banyak manfaat menggabungkan LambdaTest dengan pengujian Selenium:

• Ini adalah cara yang sangat efisien untuk melakukan pengujian lintas-browser dalam jumlah besar, sehingga meningkatkan jangkauan browser Anda (sesuatu yang tidak mungkin dilakukan secara manual).
• Dengan pengujian lintas-browser paralel, Anda akan mengurangi waktu yang dihabiskan untuk menjalankan pengujian otomatisasi secara keseluruhan.
• Karena pengujian Selenium dimulai dengan mengidentifikasi bahasa pengkodean pilihan Anda, itu dapat lebih cerdas mendeteksi kesalahan yang akan muncul di browser.

Tentu saja, manfaat terbesar menggunakan LambdaTest Selenium Automation Grid adalah LambdaTest akan membantu Anda mengevaluasi apakah pengujian Anda lulus atau gagal.

Anda masih harus meninjau hasilnya untuk mengonfirmasi bahwa semua kesalahan adalah kegagalan yang sebenarnya dan sebaliknya, tetapi ini akan menghemat banyak waktu dan sakit kepala karena LambdaTest melakukan pekerjaan awal untuk Anda.

Membungkus

Pengujian lintas-browser bukan hanya tentang memastikan situs web responsif seluler. Apa yang pada akhirnya ingin kami lakukan di sini adalah menghilangkan dugaan dari desain web. Mungkin ada lebih dari selusin browser dan ratusan konfigurasi browser/perangkat, tetapi pengujian lintas-browser otomatis dapat mempermudah pemeriksaan semua kemungkinan ini dan menemukan kesalahan.