Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Jalankan Pengujian Situs Otomatis pada Ribuan Perangkat Menggunakan CrossBrowserTesting

by
Read Time:10 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Sungguh benar menguji situs web yang telah Anda buat sama pentingnya dengan mengembangkannya.

Katakanlah perusahaan Anda telah membuat situs web e-commerce. Jika Anda baru saja menguji tombol "Buy Now" untuk kategori elektronik dan berhasil, Anda mungkin berpikir bahwa ini juga berlaku untuk semua kategori lainnya. Bagaimana jika Anda kemudian menemukan bahwa kesalahan adalah mencegah pengguna mengeklik tombol "Buy Now" untuk semua produk di bawah kategori kebugaran? Sesuatu seperti ini pasti akan berpengaruh pada pendapatan perusahaan e-commerce. Ini bukan hanya tentang pendapatan; Hal itu juga mempengaruhi reputasi perusahaan. Pengguna sepenuhnya dapat menghindari kunjungan ke situs Anda untuk mendukung persaingan.

Pengembang dan perusahaan kadang-kadang menghindari pengujian situs web mereka secara menyeluruh karena dua kendala utama: waktu dan uang. Bahkan jika Anda telah menjalankan semua kemungkinan tes untuk situs web Anda di satu perangkat, tidak ada jaminan bahwa hal itu akan bekerja pada setiap perangkat lain juga. Ada banyak faktor seperti browser, sistem operasi, dan ukuran layar yang perlu diperhitungkan. Apalagi perangkat baru dengan ukuran dan kemampuan layar yang berbeda terus bermunculan. Pengujian pada lebih dari seribu kombinasi browser, sistem operasi, dan ukuran layar juga akan menjadi proses yang memakan waktu. Akibatnya, banyak perusahaan tidak menguji situs web mereka semaksimal mungkin.

CrossBrowserTesting dapat mengatasi kedua masalah ini dengan sangat elegan. Layanan ini memungkinkan Anda menjalankan tes otomatis di lebih dari 1.500 perangkat desktop dan mobile nyata tanpa harus meninggalkan kenyamanan browser pengembangan utama Anda. Debugging terjadi dari jarak jauh, namun Anda dapat berinteraksi dengan situs web persis seperti pengguna sebenarnya. Prosesnya tidak lagi memakan waktu seperti dulu karena Anda bisa menjalankan semua tes ini secara paralel.

Tutorial ini akan membantu Anda memulai dengan CrossBrowserTesting dan menunjukkan cara menjalankan tes otomatis pada ribuan perangkat secara paralel. Anda harus mendaftar untuk mendapatkan ujicoba gratis mengikuti tutorial lainnya.

Tes Otomatis Menggunakan Mocha dan Selenium WebDriver

Mocha kaya fitur dan merupakan salah satu kerangka pengujian JavaScript asinkron yang paling populer untuk Node.js. Ini memungkinkan Anda menjalankan beberapa tes secara serial, menghasilkan pelaporan dan pemetaan yang akurat terhadap pengecualian yang tidak tertangkap untuk memperbaiki kasus uji. Kerangka ini memberi kita waktu before, after, beforeEach, dan afterEach hooks. Anda bisa menggunakan hooks ini untuk menyiapkan beberapa prasyarat untuk tes dan membersihkan lingkungan setelah menjalankan tes apapun.

Sementara Mocha dapat membantu Anda menulis tes, Anda memerlukan bantuan pustaka penegasan untuk memeriksa apakah hasil tes sesuai dengan harapan Anda. Kita akan menggunakan Chai dalam tutorial ini. Pustaka assertion sangat fleksibel dan memungkinkan Anda memilih antarmuka pilihan Anda untuk menguji hasilnya. Terserah Anda untuk menggunakan should(), expect(), atau assert() style assertions.

Mocha dan Chai dapat digunakan untuk menjalankan semua jenis tes dan memeriksa nilai yang dihasilkan. Jika Anda perlu melakukan tes seperti memeriksa apakah sebuah array berisi elemen tertentu, kedua alat ini akan cukup memadai. Namun, kami tertarik untuk melakukan tes yang lebih canggih seperti memeriksa apakah upaya masuk berhasil atau apakah pengguna dapat memperbarui nama pengguna mereka, dsb. Ini mengharuskan kita untuk menginstal Selenium WebDriver. Dengan Selenium WebDriver, kita akan bisa mengotomatisasi banyak hal, mulai dari mengklik link dan tombol untuk mengisi formulir.

Begitu Anda memiliki pemahaman dasar tentang alat ini, bagian yang sulit sudah berakhir. Menulis tes otomatis untuk CrossBrowserTesting itu mudah. Saya berasumsi bahwa Anda telah menginstal Node.js.

Beralih ke direktori proyek Anda dan jalankan perintah berikut:

Setelah semua paket telah terinstal, buatlah sebuah folder bernama test di dalam folder proyek Anda. Folder ini akan berisi semua file uji kami. Untuk saat ini, buat file bernama github.js di dalam folder test. Tuliskan kode berikut di dalam github.js.

Dalam kode di atas, Anda harus mengganti [email protected] dengan alamat email yang Anda gunakan untuk mendaftar ke uji coba gratis Anda. Demikian pula, Anda harus mendapatkan kunci otorisasi Anda sendiri dari halaman akun. Salin kunci itu dan tempelkan di tempat yourAuthKey.

Objek caps digunakan untuk menentukan pilihan konfigurasi yang berbeda untuk menjalankan pengujian. Anda bisa memberi name dan nomor build untuk mengidentifikasinya. Properti browserName digunakan untuk menentukan nama browser yang ingin Anda jalankan tesnya. Anda juga bisa menentukan version untuk browser, tapi opsional. Bila tidak ada yang ditentukan, versi browser terbaru digunakan.

Anda bisa membaca tentang semua properti dan nilai valid mereka di artikel berjudul Selenium automation capabilities. Anda harus membaca halaman itu secara menyeluruh untuk memanfaatkan sepenuhnya fitur pengujian otomatis Selenium. Demi kemudahan penggunaan Anda, CrossBrowserTesting juga menyediakan konfigurator kemampuan di beranda otomasi.

Setelah menetapkan nilai yang sesuai untuk parameter uji kita, kita dapat menulis tes yang ingin kita jalankan. Setiap rangkaian tes yang ingin Anda jalankan tertutup di dalam blok describe. Di dalam blok describe, kita telah menetapkan batas waktu untuk berbagai tes dan membuat objek webdriver yang akan diakses oleh setiap tes di blok.

Pada langkah selanjutnya, kita telah menggunakan hook before untuk mengakses halaman pencarian GitHub sebelum menjalankan tes di dalam it. Kode di dalam before hanya akan berjalan sekali, itulah yang ingin saya lakukan dalam kasus saya. Namun, jika Anda ingin mencari istilah baru setelah setiap tes berhasil, Anda harus kembali ke halaman pencarian lagi dan lagi. Dalam situasi seperti itu, menggunakan hook beforeEach. Anda bisa menggunakan hook ini untuk mengatur ulang data seperti cookies yang tidak ingin Anda tahan di antara sesi.

Tes yang sebenarnya masuk ke dalam blok it. Pada tes pertama, kami mengidentifikasi bidang masukan menggunakan pemilih CSS dan kemudian menetapkan nilainya ke "Mocha". Setelah itu, kita klik pada tombol pencarian dan tunggu sampai driver bisa menemukan link yang teridentifikasi oleh pemilih .repo-list h3 a. Kami memeriksa teks di dalam elemen itu untuk melihat apakah itu cocok dengan mochajs/mocha. Tes di dalam blok it kedua berlanjut dari tes pertama dan klik pada link untuk mengunjungi gudang GitHub.

Kode di dalam blok after dijalankan setelah kita menjalankan tes di dalam semua it blok. Pastikan Anda menghubungi driver.quit() di dalam blok setelah itu, jika tidak sesi akan tetap terbuka selama 10 menit secara default.

Anda mungkin ingin mengambil foto pada berbagai tahap selama tes Anda untuk berbagi hasil dengan orang lain. Hal ini bisa dilakukan dengan meminta API. Informasi lebih lanjut yang berkaitan dengan topik ini dapat ditemukan di posting CrossBrowserTesting tentang menjalankan tes browser otomatis dengan Selenium dan JavaScript.

Setelah membuat file uji di atas, Anda dapat menjalankan tes pada perangkat dan browser pilihan Anda dengan memasukkan perintah berikut di konsol dari dalam direktori proyek:

Jika semuanya bekerja seperti yang diharapkan, Anda akan dapat melihat hasil tes di dalam akun CrossBrowserTesting Anda di sini. Saya telah mendownload video yang dibuat setelah saya menjalankan tes ini dengan akun saya. Anda harus melihat sesuatu yang serupa juga.

Tes Otomatis Menggunakan Mocha dan WebdriverIO

Hal yang baik tentang CrossBrowserTesting adalah Anda dapat mengintegrasikannya dengan mudah dengan alat favorit Anda untuk membantu Anda menulis tes dengan cepat dan menggunakan kerangka kerja yang tim sudah Anda kenal.

Pada bagian ini, kami akan menulis beberapa tes menggunakan WebdriverIO. Pada dasarnya, itu hanya mengirim permintaan ke server Selenium dan menangani responsnya. Kerangka kerja ini memungkinkan Anda menulis perintah asinkron secara serentak sehingga Anda tidak perlu khawatir dengan janji dan kondisi balap. Anda dapat membaca dokumentasi API untuk mendapatkan lebih banyak informasi tentang kerangka kerja tersebut.

Mari kita mulai menulis tes kita sekarang. Kali ini, kita akan mencoba masuk ke akun yang telah saya buat di Pixabay. Kami dengan sengaja akan memberikan kredensial yang salah untuk pertama kalinya jika situs web mengizinkan kami masuk. Lain kali, kami akan menggunakan kredensial yang benar dan memastikan bahwa kami telah masuk log.

Sebelum melanjutkan, Anda harus menginstal WebdriverIO dengan menjalankan perintah berikut:

Sekarang buat file di dalam folder test dan beri nama pixabay.js. File harus berisi kode berikut:

Setelah menjalankan kode di bagian sebelumnya, ini akan terlihat sangat familiar. Sama seperti contoh sebelumnya, ganti [email protected] dan yourAuthKey dengan alamat email dan kunci otentikasi CrossBrowserTesting Anda.

Untuk menguji halaman login, Anda dapat membuat akun Pixabay sendiri atau mencoba masuk ke beberapa situs web lain. Ingatlah bahwa Anda harus dapat memilih bidang dan tombol masukan yang tepat dengan menggunakan pemilih yang berbeda.

Satu perbedaan penting saat ini adalah bahwa kita telah menciptakan sebuah array dari objek konfigurasi, dan kita dapat mengulang masing-masing untuk menjalankan tes yang sama pada beberapa perangkat. Ini bisa menghemat banyak tim dan Anda. Yang harus Anda lakukan adalah menulis tes sekali dan kemudian menjalankannya pada sebanyak mungkin perangkat yang Anda inginkan. CrossBrowserTesting memungkinkan Anda melihat rekaman video semua tes otomatis Anda. Dengan cara ini Anda dapat dengan mudah melihat apa yang salah dengan perangkat dan browser tertentu.

Pemikiran Akhir

Kemampuan untuk menguji situs web Anda di lebih dari 1.500 perangkat berbeda dari jarak jauh sangat menakjubkan. Anda tidak lagi perlu khawatir kehilangan pelanggan karena situs web Anda tidak berfungsi seperti yang diharapkan pada perangkat yang Anda lupa atau tidak dapat Anda uji. Sejumlah besar perangkat yang disediakan oleh CrossBrowserTesting mencakup hampir semua kombinasi perangkat dan browser yang mungkin digunakan oleh pelanggan Anda. Tidak hanya itu, tapi Anda juga bisa menyingkirkan biaya besar untuk merawat begitu banyak perangkat.

Saya telah membuat beberapa tes otomasi dasar di sini untuk membantu Anda memulai dengan CrossBrowserTesting. Begitu Anda memahami dasar-dasarnya, Anda akan bisa menjalankan semua jenis tes, mulai dari mengisi formulir besar hingga mengunjungi satu halaman demi satu produk. Karena tes otomatis dan Anda dapat menjalankannya secara paralel, Anda juga menghemat banyak waktu, yang dapat dimasukkan ke dalam membuat produk utama Anda menjadi lebih baik lagi.

Anda dapat mendaftar untuk layanan secara gratis, jadi cobalah dan pelajari tentang berbagai fitur yang menjadikannya pilihan yang lebih baik dan lebih hemat biaya daripada kompetisi. Jika semuanya berjalan baik, Anda atau perusahaan Anda akan menghabiskan ribuan dolar dan ratusan jam berharga dengan bantuan CrossBrowserTesting.

Advertisement
Did you find this post useful?
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.