Belajar Cypress - Real-world Use Cases & Patterns

#Pendahuluan

Semua teknik yang sudah dipelajari kini diuji pada kasus nyata. Episode 20 membahas pola dari tiga jenis aplikasi yang paling umum: ecommerce, SaaS onboarding, dan dashboard flows, plus best practices perancangan test, keseimbangan lapis pengujian, dan pola reliabilitas end-to-end.

Ini adalah episode penerapan: bukan sintaks baru, melainkan cara menyusun suite yang masuk akal untuk produk sungguhan.

#Use Case: Ecommerce, SaaS Onboarding, dan Dashboard Flows

#Ecommerce: Alur Belanja

Ecommerce punya alur inti yang wajib diuji: katalog, keranjang, dan checkout. Prioritaskan alur yang menghasilkan pendapatan:

Alur inti ecommerce

it("menyelesaikan pembelian produk", () => {
  cy.intercept("GET", "/api/produk*").as("katalog");
 
  cy.visit("/katalog");
  cy.wait("@katalog");
  cy.get("[data-cy=produk]").first().click();
  cy.get("[data-cy=tambah-keranjang]").click();
  cy.get("[data-cy=keranjang]").should("contain.text", "1");
 
  cy.get("[data-cy=checkout]").click();
  cy.contains("Terima kasih").should("be.visible");
});

cy.intercept("GET", "/api/produk*").as("katalog") menunggu data katalog selesai dimuat sebelum interaksi. Alur ecommerce difokuskan pada jalur pembelian utama yang paling sering dipakai pengguna.

#SaaS Onboarding

Onboarding menentukan retensi. Uji alur pendaftaran sampai aktivasi akun:

Alur onboarding SaaS

it("pengguna baru menyelesaikan onboarding", () => {
  cy.visit("/daftar");
  cy.get("[data-cy=email]").type("user@example.com");
  cy.get("[data-cy=password]").type("rahasia123");
  cy.get("[data-cy=daftar]").click();
 
  cy.get("[data-cy=langkah-1]").should("be.visible");
  cy.get("[data-cy=pilih-peran]").select("engineering");
  cy.get("[data-cy=lanjut]").click();
 
  cy.contains("Workspace siap").should("be.visible");
});

cy.get("[data-cy=pilih-peran]").select("engineering") mengisi langkah onboarding. Setiap langkah diverifikasi sebelum lanjut, sehingga lokasi kegagalan mudah dilacak jika onboarding berubah.

#Dashboard Flows

Dashboard kaya data dan filter. Fokus test pada kebenaran filter dan data yang tampil:

Alur filter dashboard

it("memfilter laporan berdasarkan rentang tanggal", () => {
  cy.intercept("GET", "/api/laporan*").as("laporan");
 
  cy.visit("/dashboard");
  cy.get("[data-cy=rentang]").select("30h");
  cy.wait("@laporan");
 
  cy.get("[data-cy=total]").should("not.be.empty");
});

cy.get("[data-cy=rentang]").select("30h") mengganti filter rentang. cy.wait("@laporan") memastikan data baru dimuat sebelum memeriksa hasil — menghindari assertion terhadap data lama.

#Best Practices untuk Test Design dan Prioritas

#Mulai dari Alur Berisiko Tinggi

Prioritaskan test berdasarkan risiko dan frekuensi: alur yang dipakai jutaan pengguna, alur yang menyangkut uang, dan alur yang sering rusak. Gunakan matriks sederhana:

• Frekuensi tinggi + risiko tinggi: wajib E2E.
• Frekuensi tinggi + risiko rendah: cukup integration test.
• Risiko tinggi + frekuensi rendah: E2E dengan prioritas sedang.

Setiap test yang ditulis harus bisa menjawab pertanyaan: alur penting apa yang dilindungi, dan apa yang terjadi jika test ini gagal?

#Desain yang Membaca Seperti Skenario

Test terbaik terbaca seperti deskripsi alur, bukan implementasi. Jika nama test dan langkahnya berubah menjadi cerita yang jelas, perawatan jadi lebih mudah dan debugging lebih cepat.

#Menyeimbangkan Unit, Integration, dan E2E Tests

#Piramida yang Seimbang

Kembali ke episode 0: unit test paling banyak dan tercepat, integration test menengah, E2E paling sedikit dan paling mahal:

Unit: 70% - cepat, terisolasi, tanpa browser.
Integration: 20% - kerja sama modul, sebagian memakai browser.
E2E: 10% - alur pengguna penuh, paling mahal.

Proporsi Unit: 70% adalah panduan, bukan hukum. E2E harus menjawab pertanyaan yang tidak bisa dijawab lapis lain — alur pengguna utuh — dan bukan duplikasi assertion yang seharusnya di unit.

#Menghindari Duplikasi E2E

Jangan menguji di E2E apa yang sudah dijamin unit. E2E cukup memverifikasi bahwa unit yang sudah benar berintegrasi dengan benar. Ini menjaga suite tetap ramping dan berjalan cepat.

#End-to-End Reliability Patterns

#Pola yang Membuat E2E Andal

Beberapa pola yang menaikkan reliabilitas:

• Stub jaringan dengan cy.intercept() untuk data yang stabil.
• Tunggu kondisi akhir, bukan durasi.
• Gunakan data-cy untuk seluruh selector.
• Siapkan data di task API, bukan lewat UI.
• Jalankan test secara paralel dengan beban seimbang.

#Menjaga Alur Tetap Independen

Setiap test E2E sebaiknya bisa berjalan sendiri maupun bersama suite. Independensi berarti tidak ada urutan tersembunyi antar test — kunci suite yang bisa diparalelkan dan dipecah tanpa rasa takut.

#Penutup

Episode 20 menghubungkan teknik dengan praktik nyata: alur ecommerce, onboarding SaaS, dan filter dashboard, prioritas test berdasarkan risiko, keseimbangan piramida unit-integration-E2E, serta pola reliabilitas yang membuat alur tetap andal dan independen.

Inti yang harus dibawa pulang:

• Prioritaskan E2E untuk alur berisiko tinggi dan frekuensi tinggi.
• Stub data dinamis agar alur deterministik.
• Jangan duplikasi assertion unit di E2E.
• Pertahankan proporsi piramida: banyak unit, sedikit E2E.
• Setiap test harus independen dan bisa berjalan sendirian.

Di episode 21 selanjutnya kita akan membahas ekosistem dan tools — Cypress plugins, dashboard, dan community resources, tools pendukung seperti Testing Library, Storybook, dan Percy, dukungan cross-browser, serta learning resources dan dokumentasi.