Advanced · Level 13: TestingAdvanced80 menitBahasa Indonesia

Critical User Journeys

Menyusun E2E flow yang menjelaskan tujuan user, action utama, dan hasil yang harus tercapai.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Mengubah user goal menjadi langkah E2E yang terukur
Memilih locator berdasarkan role, label, dan text yang stabil
Membuat assertion pada milestone penting journey
Menghindari journey yang bergantung pada data atau state acak

User JourneysPlaywrightNavigationStable Locators

Isi lesson

6 blok

1.
Journey yang baik memiliki tujuan dan titik selesai yang jelasBelum selesaiWajib
2.
Journey navigasi track dengan locator user-facingBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Simpan data test tetap kecil dan dapat diulangBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Journey yang baik memiliki tujuan dan titik selesai yang jelas

Wajib

Tulis journey dari alasan user memakai produk, bukan dari urutan DOM. Untuk FluentStack, satu flow bernilai adalah learner membuka halaman belajar, memilih track Frontend Engineering, lalu memastikan halaman track terbuka. Setiap langkah harus punya alasan: navigasi ke titik awal, action yang dapat dilakukan user, dan assertion pada perubahan yang membuktikan tujuan tercapai. Locator berdasarkan role dan nama membuat langkah itu lebih dekat dengan UI yang dipakai keyboard serta teknologi bantu.

Bagian ini memengaruhi progres lesson.

Journey navigasi track dengan locator user-facing

Wajib

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

test("learner opens the Frontend Engineering track", async ({ page }) => {
  await page.goto("/learn");

  await page.getByRole("link", { name: "Frontend Engineering" }).click();

  await expect(page).toHaveURL(/frontend-engineering/);
  await expect(
    page.getByRole("heading", { name: "Frontend Engineering" }),
  ).toBeVisible();
});

Journey ini tidak memeriksa animasi atau setiap card yang ada di halaman. Ia memastikan action link membawa learner ke tujuan yang benar dan halaman target memberi sinyal yang dapat dilihat user. URL assertion dan heading saling melengkapi tanpa membaca class CSS atau urutan element.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Test course navigation journey

Lengkapi journey learner dari halaman belajar ke track Frontend Engineering dengan locator stabil dan assertion milestone. Preview tidak menjalankan navigation browser.

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

Setelah learner menekan link ke track, assertion mana yang paling menunjukkan journey selesai?

Progres lesson naik setelah jawaban benar.

Tips

Wajib

Simpan data test tetap kecil dan dapat diulang

Gunakan data atau state yang membuat journey dapat diulang. Hindari test yang bergantung pada nama user production, data yang berubah setiap hari, atau urutan item dari API sungguhan. Bila journey membutuhkan data khusus, siapkan fixture atau environment test secara eksplisit saat local setup sudah siap.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

E2E journey dimulai dari user goal, bukan urutan DOM.
Setiap journey perlu start point, action utama, dan bukti tujuan tercapai.
Gunakan role, label, dan text stabil sebelum memakai locator implementation detail.
Pastikan data test dapat diulang dan tidak memakai state production acak.
Berikutnya, flaky test causes membantu mendiagnosis journey yang kadang lulus dan kadang gagal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Journey yang baik memiliki tujuan dan titik selesai yang jelas.

Memuat progres Review module