Spesifikasi Tur: Merekam Produk, Bukan Kegagalan

Seorang rekan dari tim produk bertanya ke saya: CMS admin PortalKota itu bisa apa? Saya buka terminal, jalankan test suite, dan jawaban paling jujur yang bisa saya berikan adalah satu tembok centang hijau. Semua lulus. Tidak ada satu pun centang yang menjelaskan bagaimana editor memposting artikel atau mengunggah media.

Ceklis hijau itu bukti buat saya, bukan untuk orang yang bertanya.

Video sebagai barang bukti kegagalan

Playwright merekam video lewat opsi video, dan default-nya mati [5]. Ada empat nilainya: off, on, retain-on-failure, dan on-first-retry [5]. Setup yang paling sering saya temui memakai retain-on-failure, dan itu mencerminkan cara kebanyakan orang memandang video: barang bukti saat test rusak [5]. Video cuma muncul ketika ada yang gagal. Ketika semua hijau, tidak ada yang tersisa untuk ditonton.

Untuk debugging, default itu benar. Tapi ada pertanyaan yang tidak terjawab: kalau semua test lulus, bagaimana cara menunjukkan produknya?

Saya balik defaultnya.

Spec tur: video yang memang mau ditonton

Saya buat satu file spec khusus berisi tur. Isinya test yang memang selalu lulus, dan videonya adalah artefak utamanya, bukan sisa kegagalan. Tiap tur mengunjungi halaman-halaman satu kelompok fungsional, menunggu satu elemen kunci sampai ter-attach, lalu berhenti sekitar 900 ms per halaman supaya penonton sempat mengikuti.

import { test, expect } from "@playwright/test";

test.use({
  video: { mode: "on", size: { width: 1280, height: 720 } },
});

const tour = [
  { path: "/admin/posts", key: "Posts" },
  { path: "/admin/media", key: "Media Library" },
  { path: "/admin/settings", key: "Settings" },
];

test("tour: content group", async ({ page }) => {
  for (const step of tour) {
    await page.goto(step.path);
    await expect(page.getByRole("heading", { name: step.key })).toBeAttached();
    await page.waitForTimeout(900);
  }
});

Jeda 900 ms itu bukan untuk stabilitas. Itu untuk mata manusia.

Ukuran rekaman sengaja saya set ke 1280x720, karena default ukuran video Playwright adalah viewport yang diskalakan supaya muat di 800x800 [5]. Layar lebar akan menghasilkan video 800x450: cukup untuk ditonton di laptop, buram saat diputar di ruang rapat. Set ukurannya, dapat rekaman yang tajam.

File videonya tidak perlu disusun sendiri. Video masuk ke folder test-results secara otomatis dan disimpan saat browser context ditutup [5]. Tidak ada konfigurasi penempatan tambahan.

Yang membuat dokumentasi ini jujur

Karena tur tetap sebuah test, dia gagal keras ketika sebuah halaman hilang atau elemen kunci berpindah. Dokumentasi yang membusuk diam-diam tidak mungkin terjadi di sini.

Saya pernah kena ini di dropdown bertenaga Radix. Item pilihannya cuma ter-render di DOM saat dropdown terbuka, jadi testid yang menempel di item itu tidak bisa jadi jangkar. Kuncinya tombol trigger-nya, yang selalu ada dan punya aria-label sendiri. Pelajaran yang sama pindah ke tur: elemen yang dijadikan patokan harus yang selalu ada, bukan yang muncul sesekali.

Biayanya jujur juga saya akui. Mode on merekam setiap test, jadi disk bayar semuanya. Karena itu tur saya pisah ke satu file spec sendiri dengan tag terpisah, dan tidak ikut jalan di suite utama. Suite regresi tetap kembali ke retain-on-failure yang hemat.

Keputusan yang tersisa dari hari itu: setiap fitur penting sekarang punya tur rekamannya sendiri. Saat ada yang bertanya lagi produk bisa apa, saya tidak menjawab pakai centang. Saya kasih tautan video.

Sources

[5] Videos - Playwright