Advanced · Level 13: TestingAdvanced75 menitBahasa Indonesia

Flaky Test Causes

Mengenali locator, waiting, data, dan dependency luar yang membuat E2E test kadang gagal tanpa perubahan feature.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengenali sinyal flaky test dan membedakannya dari regression nyata
Memilih locator yang lebih stabil daripada selector implementation detail
Mengandalkan action dan web-first assertion sebelum menambah manual wait
Mendiagnosis dependency data serta service luar yang tidak deterministik

Flaky TestsPlaywrightLocatorsDebuggingReliability

Isi lesson

6 blok

1.
Flaky berarti hasil test tidak dapat dipercayaBelum selesaiWajib
2.
Ganti locator rapuh dengan contract user-facingBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Retry bukan perbaikan pertamaBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Flaky berarti hasil test tidak dapat dipercaya

Wajib

Test disebut flaky ketika ia kadang lulus dan kadang gagal tanpa perubahan behavior yang diuji. Penyebab umum adalah locator yang bergantung pada urutan atau class internal, timeout manual, data test yang tidak tetap, network atau service luar, serta action yang berjalan sebelum UI benar-benar dapat digunakan. Jangan langsung menambah retry atau timeout besar. Mulai dari failure output: apakah locator menemukan element yang benar, apakah route serta data test tersedia, dan apakah assertion menunggu kondisi user-visible yang tepat?

Bagian ini memengaruhi progres lesson.

Ganti locator rapuh dengan contract user-facing

Wajib

// Rapuh: bergantung pada class dan urutan implementation.
await page.getByText("Simpan course").click();

// Lebih jelas: button yang dapat ditemukan user.
await page.getByRole("button", { name: "Simpan course" }).click();

await expect(
  page.getByRole("status", { name: "Course tersimpan" }),
).toBeVisible();

Text query dapat ambigu bila label yang sama muncul di tempat lain. Role dengan accessible name menyatakan control yang dituju. Assertion visible menunggu feedback yang benar-benar muncul, sehingga kamu tidak perlu menambah sleep tetap hanya untuk mengejar perubahan UI.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fix flaky course save test

Ganti action dan assertion rapuh dengan locator role serta feedback user-visible. Preview tidak menjalankan browser atau retry.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Apa langkah pertama yang paling tepat ketika E2E test kadang gagal?

Progres lesson naik setelah jawaban benar.

Peringatan

Wajib

Retry bukan perbaikan pertama

Retry dapat berguna sebagai sinyal bahwa suite perlu perhatian, terutama pada CI, tetapi tidak membuat locator atau dependency rapuh menjadi benar. Catat test yang flake, ambil trace atau report bila tersedia, dan perbaiki kondisi yang tidak deterministik. Hindari sleep tetap sebagai solusi default.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Flaky test melemahkan confidence karena hasilnya tidak konsisten.
Locator user-facing lebih stabil daripada class, index, atau selector implementation detail.
Action dan assertion Playwright sudah menunggu kondisi yang relevan; jangan mulai dari manual sleep.
Data test, route, network, dan external dependency perlu dibuat deterministik.
Berikutnya, Uji Kompetensi menyatukan pemilihan journey, locator, assertion, dan diagnosis failure.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Flaky berarti hasil test tidak dapat dipercaya.

Memuat progres Review module