FluentStack

What E2E Should Cover

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 13: TestingAdvanced60 menitBahasa Indonesia

What E2E Should Cover

Memilih perjalanan user yang paling penting untuk diuji di browser tanpa membuat suite E2E terlalu besar.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menjelaskan peran E2E test dalam strategi quality frontend
  • Membedakan critical journey dari detail UI kecil
  • Memilih journey berdasarkan risiko dan nilai bagi user
  • Menentukan test yang lebih tepat ditaruh di unit atau integration layer
E2E StrategyUser JourneysRiskTest Pyramid

Isi lesson

6 blok
  1. 1.
    E2E membuktikan perjalanan penting, bukan setiap detail halamanBelum selesaiWajib
  2. 2.
    Peta sederhana untuk memilih layer testBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Jangan membuat semua test menjadi E2EBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

E2E membuktikan perjalanan penting, bukan setiap detail halaman

Wajib

End-to-end atau E2E test membuka aplikasi seperti user, melakukan action melalui browser, lalu memeriksa hasil perjalanan itu. Karena browser test lebih lambat dan membawa lebih banyak dependency, pilih hanya journey yang kegagalannya benar-benar merusak nilai produk. Contohnya learner dapat membuka track, masuk ke lesson, mengerjakan action penting, dan mendapat hasil yang benar. Sebaliknya, format satu label, mapper data kecil, atau satu error state component biasanya lebih cepat dan lebih jelas diuji lewat unit atau integration test.

Bagian ini memengaruhi progres lesson.

Peta sederhana untuk memilih layer test

Wajib
ts
Unit
formatDuration(24) memberi "24 menit"

Integration
CourseCatalog menampilkan loading lalu course dari mocked API

E2E
Learner membuka track, memilih lesson, lalu melihat lesson yang dituju

Ketiga test sama-sama penting, tetapi pertanyaannya berbeda. E2E tidak perlu mengulang semua detail yang sudah dilindungi test di bawahnya. Gunakan ia untuk menghubungkan bagian-bagian yang paling penting dari sudut pandang perjalanan user.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Choose a track navigation E2E journey

Susun satu journey browser bernilai: learner membuka halaman belajar, memilih track, lalu mencapai tujuan. Preview tidak menjalankan Playwright.

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.

5 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah kandidat E2E test yang paling bernilai untuk aplikasi belajar?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

Jangan membuat semua test menjadi E2E

Bila semua assertion dijalankan dari browser, feedback menjadi lambat dan penyebab failure makin sulit dibaca. E2E memberi confidence yang luas, bukan detail diagnosis terbaik. Biarkan unit dan integration test menjaga behavior kecil serta response feature; simpan E2E untuk beberapa jalur produk yang paling bernilai.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • E2E test mengikuti perjalanan user di browser sungguhan.
  • Pilih journey berdasarkan risiko, nilai user, dan dampak ketika gagal.
  • Jangan mengulang semua unit atau integration assertion di E2E.
  • Test kecil tetap lebih cepat dan lebih mudah didiagnosis di layer bawah.
  • Berikutnya, Playwright memberi runner, browser, locator, dan assertion untuk menjalankan journey ini secara lokal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: E2E membuktikan perjalanan penting, bukan setiap detail halaman.