Mencoba Browser Testing Automation dengan (Laravel) Dusk

3 min readOct 11, 2020

Pengenalan

Laravel Dusk adalah salah satu pilihan tool yang dapat digunakan untuk melakukan automasi browser testing pada Framework Laravel. Dusk dapat digunakan tanpa perlu melakukan instalasi JDK atau Selenium.

Instalasi

Langkah pertama adalah melakukan instalasi. Kali ini kita akan menggunakan dusk versi 6.4. Untuk menambahkan package dapat dilakukan dengan perintah berikut.

composer require --dev laravel/dusk ^6.4

Setelah itu untuk melakukan konfigurasi secara otomatis, mulai dari pembuatan TestCase contoh hingga instalasi browser driver bisa dilakukan dengan perintah berikut.

php artisan dusk:install

Browser Driver

Secara default, driver yang dipasang adalah untuk Google Chrome versi terbaru yang didukung oleh OS yang digunakan.

Jadi pastikan browser tersebut terpasang. Tapi jika ingin menggunakan versi lain, maka bisa juga memasangnya secara manual setelah proses konfigurasi dengan salah satu dari perintah berikut :

A. Perintah untuk instalasi driver versi terbaru

php artisan dusk:chrome-driver

B. Perintah untuk instalasi driver versi 74

php artisan dusk:chrome-driver 74

C. Perintah untuk instalasi semau versi driver

php artisan dusk:chrome-driver --all

Membuat Test Case

Langkah selanjutnya adalah membuat TestCase untuk melakukan testing pada sebuah aksi. Sebagai contoh kali ini akan melakukan testing untuk login. Maka dibuat TestCase LoginTest dengan perintah berikut.

php artisan dusk:make LoginTest

Setelahnya akan di-generate sebuah skrip TestCase yang berisi skrip dasar untuk melakukan testing.

Kita perlu untuk mengubah skrip agar sesuai dengan urutan langkah testing yang akan dilakukan. Kali ini kita akan melakukan testing login. Dalam tes ini akan digunakan data dummy dengan memanfaatkan factory atau Faker.

Untuk itu kita perlu menambahkan Use DatabaseMigration agar setiap kali test akan dilakukan fresh migration database.

Skenarionya adalah :

Buka halaman login dengan url : /login
Ketikan email dari user.
ketikan password dari user.
Tekan tombol dengan label Login.
Check apakah halaman di arahkan ke /home yang berarti proses login berhasil.

Secara garis beras dalam testing bisa dibagi menjadi 3 bagian utama, yaitu :

Selector

Selektor atau element selektor di sini seperti selektor dalam JavaScript maupun CSS. Contoh selektor yang ada seperti :

name
class
id

Untuk selektor berdasarkan nama (name) bisa langsung menuliskannya dalam action. Seperti selektor elemen input dengan name email, maka dapat ditulis …->type(‘email’, $user->email)

Sementara untuk selektor type class dan id, penulisannya seperti pada CSS atau JavaScript, yaitu dengan menggunakan prefix titik ( . ) untuk class dan prefix tanda hash ( # ) untuk id.

Action

Sebenarnya saya belum menemukan istilah resmi ketika menulis ini. Dalam dokumentasi resmi disebut sebagai cara untuk berinteraksi dengan element. Contoh beberapa action yang ada seperti :

visit
type
press

Assertion

Untuk melakukan pengujian maka dilakukan sebuah assertion. Beberapa method untuk melakukan assertion diantaranya adalah seperti :

assertSee
assertPathIs
assertDontSee
assertPathIsNot

Menjalankan Test

Untuk menjalankan testing ada beberapa perintah yang bisa digunakan.

A. Untuk menjalankan semua testCase

php artisan dusk

B. Untuk menjalankan hanya testCase yang sebelumnya gagal.

php artisan dusk:fails

C. Untuk menjalankan testCase spesifik

php artisan dusk -‐filter LoginTest

Screenshot

Ketika terjadi test yang gagal, akan secara otomatis dilakukan screenshot terhadap tampilan yang muncul ketika test berjalan. Tangkapan layar ini akan disimpan di dalam direktori screenshot.

Log Hasil Test

Berikut adalah hasil test ketika gagal dan berhasil.

Sebagai penutup, ini adalah kali pertama kalinya saya mencoba Laravel Dusk. Masih banyak hal yang bisa dieksplore lagi terkait Automation Testing dengan menggunakan Laravel Dusk. Semoga bermanfaat. Salam.

Baca Lebih Lanjut

Dokumentasi Laravel Dusk https://laravel.com/docs/7.x/dusk