Debugging
Test gagal, lalu mulai dari mana? Trace Viewer, Inspector, report HTML, Allure Report, dan test flaky.
Test yang gagal diselidiki dengan bukti: pesan error, screenshot, video, dan trace. Menambah sleep atau force sebelum tahu penyebabnya hampir selalu keliru.
Bug report yang baik selalu punya bukti: langkah, screenshot, log, dan rekaman. Trace Viewer memberikan semuanya untuk setiap test yang gagal, jadi kamu menyelidiki dari bukti, bukan menebak.
Kalau test gagal, mulai dari mana?
Baca pesan error pelan-pelan. Locator apa yang dicari? Apa yang diharapkan (Expected) dan apa yang didapat (Received)? Lihat juga Call log: langkah terakhir yang berhasil yang mana?
Lihat buktinya. Buka screenshot atau video saat gagal di folder test-results/, atau buka Trace Viewer.
Ulangi kejadiannya di laptopmu dengan --headed atau mode debug. Cukup jalankan test yang gagal saja.
Cari tersangkanya: bug di aplikasi, test yang keliru (locator atau nilai expected yang sudah tidak sesuai), datanya, atau lingkungannya?
Perbaiki sumber masalahnya, bukan cuma gejalanya. Menambah sleep atau force hampir tidak pernah jadi jawaban yang tepat.
Kalau ternyata bug aplikasi: laporkan dengan bukti (langkah, trace, screenshot). Tandai test-nya dengan xfail/test.fail plus nomor bug.
Membaca pesan error
Sebagai contoh, kita sengaja mengharapkan teks yang salah:
E AssertionError: Locator expected to have text 'Halo, Admin'
E Actual value: Halo, Rina Wulandari
E Call log:
E - Expect "to_have_text" with timeout 5000ms
E - waiting for get_by_test_id("greeting")
E 9 × locator resolved to <span id="greeting" data-testid="greeting">Halo, Rina Wulandari</span>
E - unexpected value "Halo, Rina Wulandari"Error: expect(locator).toHaveText(expected) failed
Locator: getByTestId('greeting')
Expected: "Halo, Admin"
Received: "Halo, Rina Wulandari"
Timeout: 5000ms
Call log:
- Expect "toHaveText" with timeout 5000ms
- waiting for getByTestId('greeting')
9 × locator resolved to <span id="greeting" data-testid="greeting">Halo, Rina Wulandari</span>
- unexpected value "Halo, Rina Wulandari"Elemennya ketemu, jadi locator-nya benar, tapi isinya beda. Kemungkinannya: login dengan user yang salah, atau nilai expected di test yang keliru.
| Pesan yang sering muncul | Biasanya artinya |
|---|---|
Timeout ... waiting for locator(...) | Elemennya tidak pernah muncul: locator salah, halamannya beda, atau elemennya ada di iframe |
strict mode violation ... resolved to N elements | Locator-nya terlalu umum, jadi perlu dipersempit |
element is not visible / not enabled | Elemennya ada tapi belum siap: tertutup lapisan lain, tidak bisa diklik, atau tersembunyi |
element is outside of the viewport | Elemennya berada di luar layar dan tidak bisa digulir ke sana, misalnya di dalam kotak yang terpotong |
... intercepts pointer events | Ada elemen lain yang menutupi (pop-up, header yang menempel di atas) |
Target page, context or browser has been closed | Test sudah selesai atau ditutup sebelum aksinya jalan. (TS) Sering karena lupa await |
net::ERR_CONNECTION_REFUSED | Server aplikasinya belum dinyalakan |
Trace Viewer
Trace merekam setiap langkah test: tampilan sebelum dan sesudah aksi, request jaringan, console log, dan baris kode yang sedang jalan. Project-mu dari Persiapan belum menyimpan trace setiap kali gagal (TypeScript masih on-first-retry). Ubah seperti di Modul 11, atau tambahkan --tracing on / --trace on saat menjalankan test.
# Trace tersimpan di test-results/<nama-test>/trace.zip
uv run playwright show-trace test-results/tests-academy-test-m10-pom-py-test-login-berhasil-chromium/trace.zip
# Paksa simpan trace untuk semua test (misal saat investigasi)
uv run pytest tests/academy/test_m10_pom.py --tracing on# Buka HTML report, lalu klik ikon trace di test yang gagal
npx playwright show-report
# Atau buka file trace-nya langsung
npx playwright show-trace test-results/<nama-test>/trace.zip
# Paksa simpan trace untuk semua test
npx playwright test m10-pom --trace onFile trace.zip juga bisa diseret ke trace.playwright.dev. Trace Viewer berjalan di browser dan file-nya tidak dikirim ke server mana pun.
Bagian Trace Viewer yang paling sering dipakai:
- Actions (kiri): daftar langkah. Klik salah satu untuk melihat kondisi halaman saat itu.
- Before / After: tampilan halaman sebelum dan sesudah aksi, bisa diperiksa seperti di DevTools.
- Network & Console: ada request API yang gagal, atau error JavaScript?
- Source: baris kode mana yang sedang dijalankan.
Debug langkah demi langkah
# Inspector terbuka, test berhenti di setiap langkah (PowerShell: $env:PWDEBUG=1; uv run pytest ...)
PWDEBUG=1 uv run pytest tests/academy/test_m07_runner.py -k berhasil
# Atau sisipkan breakpoint di kode test:
# page.pause()# Inspector terbuka, test berhenti di setiap langkah
npx playwright test m07-runner -g "berhasil" --debug
# UI Mode: daftar test, time-travel, watch mode, favorit banyak orang
npx playwright test --ui
# Atau sisipkan breakpoint di kode test:
# await page.pause();UI Mode (--ui) menjalankan test satu per satu, menampilkan langkahnya seperti trace, bisa memilih locator, dan punya watch mode yang mengulang test setiap kali file disimpan.
Mendengarkan browser
Kadang penyebabnya ada di aplikasi, misalnya error JavaScript atau API yang gagal. Dengarkan event berikut:
page.on("console", lambda msg: print(f"[console.{msg.type}] {msg.text}")) # tampilkan isi console browser di terminal
page.on("pageerror", lambda err: print(f"[JS error] {err}")) # tampilkan error JavaScript halaman
page.on("requestfailed", lambda req: print(f"[gagal] {req.url}")) # tampilkan request yang gagalpage.on('console', (msg) => console.log(`[console.${msg.type()}] ${msg.text()}`)); // tampilkan isi console browser di terminal
page.on('pageerror', (err) => console.log(`[JS error] ${err.message}`)); // tampilkan error JavaScript halaman
page.on('requestfailed', (req) => console.log(`[gagal] ${req.url()}`)); // tampilkan request yang gagalReporting
# Ringkasan per test di terminal
uv run pytest -v
# JUnit XML (dibaca hampir semua tool CI)
uv run pytest --junitxml=reports/junit.xml
# HTML report (plugin pytest-html)
uv add --dev pytest-html
uv run pytest --html=reports/report.html --self-contained-html # report HTML dalam satu file# HTML report bawaan (sudah aktif di config kamu)
npx playwright test
npx playwright show-report # buka report HTML bawaan
# Beberapa reporter sekaligus
npx playwright test --reporter=list,junit,htmlAllure Report: laporan untuk seluruh tim
Laporan test sering juga dibaca manajer, PO, atau tim lain. Banyak tim memakai Allure Report untuk itu: punya grafik ringkasan, bisa dikelompokkan per fitur, dan menyimpan riwayat dari run ke run.
Allure bekerja dalam dua langkah:
hasil mentah ke allure-results/
ubah jadi halaman HTML
buka laporannya di browser
Install sekali
Install plugin Allure di project-mu:
uv add --dev allure-pytest # plugin pytest yang mencatat hasil untuk Allurenpm i -D allure-playwright allure-js-commons allure # reporter, API untuk langkah/lampiran, dan CLICLI allure versi 3 berjalan di Node.js, tanpa Java. Banyak tutorial di internet masih memakai Allure 2 yang butuh Java. Project Python cukup memakai npx -y allure (Node.js harus sudah diinstall).
Buat laporannya
# 1. Jalankan test sambil menyimpan hasil mentah
uv run pytest tests/academy --alluredir=allure-results
# 2. Ubah jadi HTML report, lalu buka (butuh Node.js, npx mengunduh CLI Allure 3)
npx -y allure generate ./allure-results
npx -y allure open allure-report # buka report Allure di browser# 1. Jalankan test dengan reporter allure-playwright (boleh bersama reporter lain)
npx playwright test --reporter=line,allure-playwright
# 2. Ubah jadi HTML report, lalu buka
npx allure generate ./allure-results
npx allure open allure-report # buka report Allure di browserTambahkan allure-results/ dan allure-report/ ke .gitignore (di project contoh Academy sudah ada), karena keduanya dibuat ulang setiap kali test dijalankan.
Perkaya laporannya: label, langkah, dan lampiran
Beri test label (fitur, tingkat kepentingan), pecah jadi langkah bernama, dan lampirkan bukti seperti screenshot.
Memuat tests/academy/test_m12_allure.py…
uv run pytest tests/academy/test_m12_allure.py --alluredir=allure-resultsMemuat tests/academy/m12-allure.spec.ts…
npx playwright test m12-allure --project=chromium --reporter=line,allure-playwrightDi TypeScript, test.step() bawaan Playwright otomatis muncul sebagai langkah di Allure. Label dan lampiran memakai allure-js-commons. Kalau test dijalankan tanpa reporter Allure, panggilan itu diabaikan, jadi test tetap jalan normal.
Di Python, langkah ditulis dengan with allure.step("..."). Dekorator seperti @allure.feature dan @allure.severity mengelompokkan test di laporan. Tanpa --alluredir, semuanya diabaikan dan test tetap jalan normal.
Di GitHub Actions, tambahkan langkah npx allure generate ./allure-results, lalu unggah folder allure-report sebagai artefak (Modul 15).
Flaky test: penyebab dan obatnya
Flaky test kadang lulus, kadang gagal, padahal kodenya tidak berubah. Penyebabnya selalu ada:
| Penyebab | Gejala | Obat |
|---|---|---|
| Menunggu dengan waktu tetap (sleep) | Kadang belum siap saat dicek | Tunggu kondisinya dengan expect |
| Assertion yang hanya mengecek sekali | Gagal kalau data datang agak lambat | Web-first assertion |
| Test saling bergantung | Gagal kalau urutannya berubah atau jalan paralel | Setiap test menyiapkan datanya sendiri |
| Data dipakai bersama | Test A mengubah data milik test B | Data unik per test, atau reset lewat API |
| Locator yang gampang rusak (nth, CSS panjang) | Gagal setelah tampilan berubah sedikit | Role, label, test id + filter |
| Animasi atau transisi | Klik meleset | Biasanya auto-wait sudah cukup. Cek apakah ada lapisan yang menutupi |
| Jam dan zona waktu | Gagal di jam atau tanggal tertentu | Atur timezone_id atau kendalikan waktu dengan page.clock |
Lebih jauh (opsional)Trik komunitas
- "Copy prompt" (v1.51+) di HTML report dan Trace Viewer menyalin detail error yang siap ditempel ke asisten AI untuk dibantu analisis.
- Tab Speedboard (v1.57+) di HTML report mengurutkan test dari yang paling lambat. Pas untuk mencari test yang bikin semuanya lama.
- Mode Display Aria (v1.63+) di Trace Viewer: kalau trace merekam aria snapshot dan screenshot, keduanya tampil berdampingan, dan menyorot node aria akan menandai elemennya di screenshot.
- UI Mode + watch (
--ui) untuk TypeScript: test diulang otomatis setiap kali file disimpan. - Laporan untuk tim: Allure Report, ReportPortal, atau dashboard seperti Currents sering dipakai untuk melihat riwayat dan tren test flaky.
Latihan
Kasus misteri pertamamu
- Buka
tests/academy/test_m10_pom.py(Python) atautests/academy/m10-pom.spec.ts(TypeScript), lalu cari assertion sapaan di test login berhasil. - Ganti sementara nilai expected-nya dari
Halo, Rina WulandarimenjadiHalo, Admin. Ini sengaja salah, karena yang login adalah customer Rina. - Jalankan test-nya, lalu baca bagian Expected dan Received di pesan error.
- Cari screenshot dan video kegagalannya di folder
test-results/(muncul kalau screenshot dan video sudah diaktifkan seperti di Modul 11).
Baris yang diubah di langkah 2:
# sebelum
expect(shop_page.greeting).to_have_text("Halo, Rina Wulandari")
# sesudah (sengaja salah)
expect(shop_page.greeting).to_have_text("Halo, Admin")// sebelum
await expect(shopPage.greeting).toHaveText('Halo, Rina Wulandari');
// sesudah (sengaja salah)
await expect(shopPage.greeting).toHaveText('Halo, Admin');Hasilkamu bisa menjelaskan kenapa test gagal hanya dari pesan errornya
Pesan errornya menunjukkan bahwa elemen sapaan ketemu, tapi isinya Halo, Rina Wulandari, bukan Halo, Admin. Jadi locator-nya benar, dan yang salah adalah nilai expected di test-nya.
Kalau screenshot dan video sudah diaktifkan, file-nya ada di subfolder test-results/ yang namanya mirip nama test-nya. Jangan lupa kembalikan nilai expected-nya ke Halo, Rina Wulandari.
Jelajahi Trace Viewer
Jalankan test Modul 10 dengan trace selalu disimpan, buka trace-nya, lalu klik setiap langkah dan lihat Before/After, Network, dan Console.
Hasilkamu bisa melihat kondisi halaman sebelum dan sesudah setiap klik
uv run pytest tests/academy/test_m10_pom.py --tracing on # selalu rekam trace
uv run playwright show-trace test-results/<nama-folder-test>/trace.zip # buka trace di Trace Viewernpx playwright test m10-pom --project=chromium --trace on # selalu rekam trace
npx playwright show-report # buka report, trace bisa dibuka dari sanaDi TypeScript, buka report HTML lalu klik ikon trace di test mana pun. File trace juga bisa diseret ke trace.playwright.dev.
Buat laporan Allure
Jalankan test Modul 7 dan file Allure Modul 12 sambil menyimpan hasil Allure, buat HTML report-nya, lalu cari test yang punya langkah dan lampiran screenshot.
Hasillaporan Allure terbuka di browser, lengkap dengan grafik dan detail setiap test
Ikuti langkah di bagian Allure Report di atas. Ringkasnya:
uv run pytest tests/academy/test_m07_runner.py tests/academy/test_m12_allure.py --alluredir=allure-results # jalankan test sambil menyimpan hasil untuk Allure
npx -y allure generate ./allure-results # susun report dari hasil itu
npx -y allure open allure-report # buka reportnpx playwright test m07-runner m12-allure --project=chromium --reporter=line,allure-playwright # jalankan test dengan reporter Allure
npx allure generate ./allure-results # susun report
npx allure open allure-report # buka reportTest dari file test_m12_allure / m12-allure punya langkah bernama dan lampiran screenshot, jadi bagian itulah yang paling menarik dilihat di laporan.
Debug langkah demi langkah
Jalankan satu test login dengan Inspector, maju dengan Step over, lalu cek locator tombol Masuk dengan Pick locator.
HasilInspector terbuka dan berhenti di setiap aksi
# PowerShell: $env:PWDEBUG=1; uv run pytest tests/academy/test_m07_runner.py -k berhasil
PWDEBUG=1 uv run pytest tests/academy/test_m07_runner.py -k berhasilnpx playwright test m07-runner -g "berhasil" --debug # jalankan satu test dengan Inspector, langkah demi langkahAlternatif yang lebih santai di TypeScript: npx playwright test --ui.