Playwright Academy
0 dari 17
Fase 3 · Dunia NyataModul 12 dari 17

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.

Di dunia QA

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 munculBiasanya artinya
Timeout ... waiting for locator(...)Elemennya tidak pernah muncul: locator salah, halamannya beda, atau elemennya ada di iframe
strict mode violation ... resolved to N elementsLocator-nya terlalu umum, jadi perlu dipersempit
element is not visible / not enabledElemennya ada tapi belum siap: tertutup lapisan lain, tidak bisa diklik, atau tersembunyi
element is outside of the viewportElemennya berada di luar layar dan tidak bisa digulir ke sana, misalnya di dalam kotak yang terpotong
... intercepts pointer eventsAda elemen lain yang menutupi (pop-up, header yang menempel di atas)
Target page, context or browser has been closedTest sudah selesai atau ditutup sebelum aksinya jalan. (TS) Sering karena lupa await
net::ERR_CONNECTION_REFUSEDServer 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 on

File 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 gagal
page.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 gagal

Reporting

# 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,html

Allure 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:

Jalankan test
hasil mentah ke allure-results/
allure generate
ubah jadi halaman HTML
allure open
buka laporannya di browser

Install sekali

Install plugin Allure di project-mu:

uv add --dev allure-pytest          # plugin pytest yang mencatat hasil untuk Allure
npm i -D allure-playwright allure-js-commons allure   # reporter, API untuk langkah/lampiran, dan CLI

CLI 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 browser

Tambahkan 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.

tests/academy/test_m12_allure.pytests/academy/m12-allure.spec.tsLulus test
Memuat tests/academy/test_m12_allure.py…
uv run pytest tests/academy/test_m12_allure.py --alluredir=allure-results
Memuat tests/academy/m12-allure.spec.ts…
npx playwright test m12-allure --project=chromium --reporter=line,allure-playwright

Di 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:

PenyebabGejalaObat
Menunggu dengan waktu tetap (sleep)Kadang belum siap saat dicekTunggu kondisinya dengan expect
Assertion yang hanya mengecek sekaliGagal kalau data datang agak lambatWeb-first assertion
Test saling bergantungGagal kalau urutannya berubah atau jalan paralelSetiap test menyiapkan datanya sendiri
Data dipakai bersamaTest A mengubah data milik test BData unik per test, atau reset lewat API
Locator yang gampang rusak (nth, CSS panjang)Gagal setelah tampilan berubah sedikitRole, label, test id + filter
Animasi atau transisiKlik melesetBiasanya auto-wait sudah cukup. Cek apakah ada lapisan yang menutupi
Jam dan zona waktuGagal di jam atau tanggal tertentuAtur 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

Latihan 1

Kasus misteri pertamamu

  1. Buka tests/academy/test_m10_pom.py (Python) atau tests/academy/m10-pom.spec.ts (TypeScript), lalu cari assertion sapaan di test login berhasil.
  2. Ganti sementara nilai expected-nya dari Halo, Rina Wulandari menjadi Halo, Admin. Ini sengaja salah, karena yang login adalah customer Rina.
  3. Jalankan test-nya, lalu baca bagian Expected dan Received di pesan error.
  4. 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:

tests/academy/test_m10_pom.pytests/academy/m10-pom.spec.ts
# 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

Latihan 2

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

Latihan 3

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

Latihan 4

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