Posisi pengujian browser

Pengujian fitur menilai respons yang dihasilkan server, sedangkan sebagian perilaku aplikasi baru muncul setelah halaman dijalankan di browser, yaitu saat JavaScript bereaksi terhadap klik dan perubahan isian. Topik ini membahas posisi Laravel Dusk untuk kebutuhan tersebut, bentuk kasus pengujian browser, biaya yang menyertainya, serta garis batas kapan pengujian fitur masih cukup. Contoh pada proyek uji bersifat konseptual karena Dusk tidak terpasang pada lingkungan sandbox ini.

Posisi Laravel Dusk#

Laravel Dusk adalah package pengujian browser yang mengoperasikan Chrome nyata melalui ChromeDriver. Kasusnya ditulis pada direktori tests/Browser, mewarisi kelas Tests\DuskTestCase, dan dijalankan dengan perintah php artisan dusk yang terpisah dari php artisan test. Karena mengoperasikan browser sungguhan, kasus Dusk membuktikan perilaku yang tidak terlihat pada respons HTTP, seperti efek JavaScript, perpindahan fokus isian, dan hasil akhir interaksi berlapis. Selain membaca isi halaman, asersi halaman seperti assertPathIs() dan assertTitle() memeriksa URL tujuan dan judul dokumen setelah aksi dijalankan.

Package ini tidak terpasang pada proyek uji dalam topik ini karena pemasangannya menuntut Chrome dan ChromeDriver pada lingkungan eksekusi. Kasus yang ditampilkan berikut adalah bentuk yang lazim dijumpai pada proyek nyata, tetapi tidak dijalankan di sini.

Bentuk kasus Dusk#

Inti kasus Dusk adalah pemanggilan $this->browse() yang menerima closure dengan parameter objek Browser. Metode pada objek tersebut meniru tindakan pengguna secara berurutan, seperti visit(), type(), dan press(), lalu diakhiri asersi yang membaca keadaan halaman. Karena JavaScript berjalan asinkron, teks yang baru muncul beberapa saat kemudian dibaca melalui waitForText() agar browser menunggu elemennya sebelum asersi dijalankan.

// tidak-dijalankan
<?php

namespace Tests\Browser;

use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class HalamanCatatanTest extends DuskTestCase
{
    public function test_tombol_simpan_menampilkan_pesan_sukses(): void
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/catatan/buat')
                ->type('@input-judul', 'Laporan harian')
                ->press('@tombol-simpan')
                ->waitForText('Catatan tersimpan.')
                ->assertSee('Catatan tersimpan.');
        });
    }
}

Selector bertanda @ merujuk atribut dusk pada elemen HTML, misalnya <input dusk="input-judul">. Dengan cara itu kasus tidak bergantung pada kelas CSS yang dapat berubah karena alasan tampilan. Apabila asersi gagal, Dusk menyimpan tangkapan layar halaman pada tests/Browser/screenshots, sehingga keadaan saat kegagalan tetap dapat diperiksa. Rangkaian tindakan yang digunakan beberapa kasus dapat dipindahkan ke page object, yaitu kelas yang dibuat dengan php artisan dusk:page dan memuat tindakan beserta selector halamannya, sehingga perubahan selector hanya dilakukan pada satu tempat.

Pemasangannya terdiri atas dua langkah, yaitu menambahkan package lalu menerbitkan konfigurasi beserta salinan ChromeDriver yang sesuai dengan sistem operasi.

# tidak-dijalankan
# pemasangan Dusk pada proyek Laravel (butuh Chrome dan ChromeDriver)
composer require --dev laravel/dusk
php artisan dusk:install

Biaya yang menyertai pengujian browser#

Kasus Dusk berlangsung dalam hitungan detik per kasus, sedangkan kasus fitur biasanya selesai dalam sepersekian detik, sehingga suite browser menyumbang porsi waktu eksekusi yang paling besar. Browser dan ChromeDriver juga merupakan dependensi lingkungan tersendiri yang harus tersedia pada mesin pengembang maupun mesin continuous integration (CI). Keberhasilan kasus pun bergantung pada waktu eksekusinya, karena elemen yang dibaca sebelum JavaScript selesai membuat kasus gagal sesekali tanpa perubahan kode apa pun.

Karena biaya itu, suite Dusk biasanya dipisahkan dari suite utama dan dijalankan pada tahap tersendiri. Jumlah kasusnya dijaga kecil, cukup untuk alur penting yang benar-benar membutuhkan browser, sedangkan perilaku lainnya dibuktikan pada tingkat pengujian yang lebih murah.

Garis batas antara HTTP dan browser#

Garis batasnya mengikuti tempat bukti perilaku berada. Selama perilaku yang diuji berakhir pada respons HTTP, seperti status, isi HTML, struktur JSON, dan kegagalan validasi, pengujian fitur dengan helper get() dan post() sudah membuktikannya dengan biaya yang jauh lebih kecil. Perilaku yang baru terlihat setelah halaman dijalankan, seperti isian yang terisi otomatis oleh JavaScript atau tabel yang diurutkan tanpa memuat ulang halaman, membutuhkan browser.

Dua pertanyaan berikut membantu menempatkan kasus pada tingkat yang tepat.

Kesalahan umum#

Kesalahan pertama adalah menggunakan Dusk untuk perilaku yang sudah dapat dibuktikan oleh respons HTTP. Kasus semacam itu menambah waktu eksekusi tanpa menambah bukti, karena asersi yang sama tersedia pada TestResponse. Kasus browser disiapkan hanya apabila buktinya memang terdapat pada halaman yang dirender di dalam browser.

Kesalahan kedua adalah menunggu dengan jeda waktu tetap, misalnya sleep(2), alih-alih metode waitFor*. Jeda yang terlalu pendek membuat kasus gagal sesekali, sedangkan jeda yang terlalu panjang memperlambat suite tanpa manfaat. Metode waitFor* kembali segera setelah elemen muncul, sehingga kecepatan dan kestabilannya lebih terjaga.

Kesalahan ketiga adalah memilih selector dari struktur tampilan, misalnya rantai kelas CSS yang dalam. Selector semacam itu gagal setiap kali tampilan disunting, padahal perilakunya tidak berubah. Selector bertanda @ yang merujuk atribut dusk memisahkan maksud elemen dari penampilannya.

Ringkasan#

• Laravel Dusk mengoperasikan Chrome melalui ChromeDriver untuk membuktikan perilaku halaman yang baru muncul setelah JavaScript berjalan, dengan kasus pada tests/Browser dan perintah php artisan dusk.
• Biayanya berupa waktu per kasus yang jauh lebih besar, dependensi ChromeDriver, dan risiko kegagalan berkaitan waktu, sehingga suite-nya dipisahkan dan dijaga kecil.
• Pengujian fitur tetap menjadi tingkat yang tepat selama buktinya berakhir pada respons HTTP, sedangkan browser digunakan ketika interaksi dan perenderan browser itulah yang dibuktikan.

Referensi#

• Laravel Dusk — Laravel — Dokumentasi pemasangan Dusk, penulisan kasus browser, dan API objek Browser.
• HTTP Tests — Laravel — Dokumentasi pengujian HTTP yang menjadi pembanding tingkat termurah untuk asersi respons.