Belajar Playwright - Assertions & Debugging

#Pendahuluan

Menulis test tanpa assertion yang baik seperti membaca buku tanpa bab akhir — tidak pernah tahu apakah ceritanya berhasil. Episode 7 ini membahas dua sisi yang selalu berjalan bersama: bagaimana memverifikasi hasil dengan assertions, dan bagaimana menemukan masalah dengan cepat saat test gagal melalui perangkat debugging Playwright.

Assertion adalah kontrak antara test dan aplikasi. Matcher yang tepat membuat kegagalan mudah dipahami, sementara debug tooling yang tepat membuat kegagalan itu cepat dilacak. Setelah episode ini, kalian akan mampu memverifikasi hampir semua kondisi UI dan melacak akar masalah dalam hitungan menit.

#Built-in Assertions dan Matchers

#Matcher untuk Elemen

Playwright menyediakan matcher yang dirancang untuk antarmuka web, bukan sekadar perbandingan nilai primitif:

Matcher dasar

await expect(page.getByRole('button', { name: 'Beli' })).toBeVisible();
await expect(page.getByRole('heading')).toHaveText('Keranjang');
await expect(page.getByLabel('Email')).toBeEnabled();
await expect(page.locator('.produk')).toHaveCount(3);
await expect(page.locator('input')).toHaveValue('contoh');

toBeVisible() menunggu elemen tampil, toHaveText() memeriksa teks persis, dan toHaveCount() menghitung jumlah elemen. Semua matcher ini bersifat retry-able — mereka terus mengecek sampai kondisi terpenuhi atau timeout tercapai.

#Matcher untuk Halaman dan Network

Selain elemen, kalian bisa memverifikasi kondisi halaman secara keseluruhan:

Matcher halaman dan URL

await expect(page).toHaveTitle(/Keranjang/);
await expect(page).toHaveURL(/produk\/123/);
await expect(page).toHaveScreenshot();

toHaveURL() menerima string persis atau regex, sangat berguna untuk memvalidasi navigasi SPA. toHaveScreenshot() menjadi gerbang menuju visual regression yang akan kita dalami di episode 16.

#Matcher untuk Response API

Dengan fixture request, assertion juga bisa diarahkan ke API tanpa UI:

Memverifikasi response API

import { test, expect } from '@playwright/test';
 
test('API login mengembalikan token', async ({ request }) => {
  const response = await request.post('/api/login', {
    data: { email: 'user@example.com', password: 'rahasia123' },
  });
  expect(response.status()).toBe(200);
  const body = await response.json();
  expect(body.token).toBeTruthy();
});

request.post('/api/login', { data: ... }) menjalankan HTTP request langsung tanpa browser — cepat dan ideal untuk mengecek kontrak API sebelum menguji alur UI yang menggunakannya.

#Custom dan Soft Assertions

#Soft Assertions

Secara bawaan, assertion pertama yang gagal akan menghentikan test. Untuk memeriksa beberapa kondisi sekaligus tanpa berhenti di kegagalan pertama, pakai expect.soft:

Soft assertions

await expect.soft(page.getByRole('heading')).toHaveText('Dashboard');
await expect.soft(page.getByRole('button', { name: 'Simpan' })).toBeVisible();
await expect.soft(page.locator('#status')).toHaveText('Aktif');

expect.soft(...) mencatat kegagalan tapi tetap melanjutkan eksekusi. Di akhir test, semua kegagalan terkumpul dalam satu report — menghemat waktu karena kalian melihat semua masalah dalam sekali jalan.

#Custom Expect dan Helper

Untuk logika yang diulang berkali-kali, bungkus dalam helper yang menggunakan expect biasa:

Helper assertion

import { expect } from '@playwright/test';
 
export async function expectFormValid(page) {
  await expect(page.getByRole('button', { name: 'Kirim' })).toBeEnabled();
  await expect(page.locator('.error')).toHaveCount(0);
}

Helper semacam ini membuat assertion kompleks memiliki satu nama yang bisa dipakai di banyak test. Saat aturan berubah, cukup ubah di satu tempat.

#Debugging Tool: Codegen, Mode Debug, dan Trace Viewer

#Playwright Codegen

playwright codegen merekam interaksi kalian dengan browser dan mengubahnya menjadi kode test:

Rekam aksi menjadi kode

npx playwright codegen https://example.com

Jendela browser terbuka; setiap klik dan ketikan diterjemahkan ke kode locator yang bisa langsung ditempel ke test. Ini cara tercepat untuk mendapatkan locator yang benar tanpa menebak-nebak struktur DOM.

#Mode Debug dan Inspector

Jalankan test dalam mode debug untuk menelusuri langkah demi langkah:

Jalankan test dalam mode debug

npx playwright test --debug

Mode --debug membuka Inspector yang menampilkan setiap aksi secara live, lengkap dengan locator yang sedang dievaluasi. Berguna untuk melihat apakah Playwright memilih elemen yang tepat sebelum aksi dijalankan.

#Trace Viewer

Trace adalah rekaman lengkap sebuah test — DOM snapshot pada tiap langkah, request/response network, console log, dan screenshot:

Buka trace hasil test

npx playwright show-trace

Trace dihasilkan otomatis ketika konfigurasi memakai trace: 'on-first-retry'. npx playwright show-trace membuka viewer interaktif di mana kalian bisa menginspeksi setiap langkah. Ini alat debugging paling ampuh untuk masalah yang hanya muncul di CI.

#Capturing Screenshots dan Videos pada Failure

#Konfigurasi Otomatis

Playwright bisa menangkap screenshot dan video secara otomatis saat test gagal, lewat konfigurasi:

Konfigurasi screenshot dan video

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
});

video: 'retain-on-failure' menyimpan rekaman video hanya untuk test yang gagal, sementara screenshot: 'only-on-failure' menangkap gambar pada momen kegagalan.

#Artifact Lokasi Penyimpanan

Semua artifact tersimpan di folder test-results, satu subfolder per test yang gagal. Nama foldernya memuat judul test, sehingga mudah diidentifikasi. Saat memakai HTML reporter, artifact ini juga terembed di dalam report sehingga bisa diakses dari satu tempat.

Cek struktur test-results

ls test-results/

Dengan kombinasi screenshot, video, dan trace, debugging test yang gagal di lingkungan berbeda menjadi jauh lebih mudah — kalian melihat persis apa yang dilihat browser saat test gagal.

#Penutup

Episode 7 melengkapi kalian dengan dua kemampuan inti: memverifikasi hasil dengan built-in assertions dan matchers, custom dan soft assertions untuk skenario kompleks, serta melacak masalah lewat codegen, mode debug, dan trace viewer yang disertai screenshot serta video otomatis saat test gagal.

Inti yang harus dibawa pulang:

Matcher Playwright bersifat retry-able dan menunggu kondisi sampai timeout.
expect.soft mengumpulkan semua kegagalan dalam satu lari test.
npx playwright codegen merekam interaksi menjadi kode locator yang benar.
Trace viewer memberikan DOM snapshot dan network log per langkah test.
Aktifkan screenshot, video, dan trace untuk menangkap bukti saat failure.

Di episode 8 selanjutnya kita akan membahas advanced browser actions — menangani frames, popups, dan multiple tabs, drag and drop serta aksi keyboard dan mouse, upload dan download file, serta network interception dan request mocking.