Belajar Cypress - Menulis Test Cypress Dasar

#Pendahuluan

Konfigurasi sudah beres. Sekarang saatnya mempelajari bahasa utama Cypress: perintah dan assertion. Episode 4 membahas cy.visit(), cy.get(), action dasar, assertions dengan .should() dan .contains(), interaksi form, navigasi, serta teknik debug.

Perintah-perintah ini adalah kosakata yang akan kalian pakai di seluruh series. Setelah episode ini, kalian bisa menulis test sederhana untuk halaman nyata tanpa menyalin-menempel dari tutorial.

#Alur Dasar: visit, get, dan Action

Semua test E2E mengikuti pola yang sama: buka halaman, pilih elemen, lakukan aksi, lalu assert hasil. Lihat contoh lengkapnya:

Pola dasar visit-get-action

describe("Form login", () => {
  it("berhasil login dengan kredensial benar", () => {
    cy.visit("/login");
 
    cy.get("#email").type("user@example.com");
    cy.get("#password").type("rahasia123");
    cy.get("button[type=submit]").click();
 
    cy.url().should("include", "/dashboard");
  });
});

cy.visit("/login") membuka halaman memakai baseUrl. cy.get("#email") memilih elemen dengan selector CSS — di sini berdasarkan id. cy.type("...") mengetik teks ke input, dan cy.click() menekan tombol submit.

#Selector yang Tepat

Selector yang baik menentukan kestabilan test. Urutannya: prefer data-cy attribute yang memang disediakan untuk testing, lalu data-testid, lalu id, lalu class, lalu tekstual lewat contains. Contoh selector data-cy:

Memakai data-cy

cy.get("[data-cy=email-input]").type("user@example.com");

cy.get("[data-cy=email-input]") memilih elemen yang menempel pada attribute data-cy. Pendekatan ini jauh lebih stabil daripada bergantung pada teks atau struktur DOM yang sering berubah — kita akan membahas strategi selector stabil di episode 13.

#Assertions dengan should dan contains

Assertion adalah jantung test: tanpa assertion, test hanya menjalankan aksi tanpa membuktikan apa pun.

#Assertion Bawaan Chai

Cypress membawa assertion Chai yang bisa dipakai lewat .should():

Beragam assertion should

cy.get("h1").should("be.visible");
cy.get("h1").should("have.text", "Dashboard");
cy.get("li.item").should("have.length", 5);
cy.get("input").should("be.enabled");
cy.get("button").should("contain.text", "Simpan");

.should("be.visible") memeriksa visibilitas, .should("have.text", "Dashboard") memeriksa teks persis, dan .should("have.length", 5) memeriksa jumlah elemen. Perhatikan bahwa have.text mencocokkan seluruh teks, sedangkan contain.text hanya sebagian.

#Bekerja dengan cy.contains

cy.contains() memilih elemen berdasarkan teksnya — praktis untuk tombol dan judul yang berubah dinamis:

Memakai cy.contains

cy.contains("button", "Kirim").click();
cy.contains("Berhasil disimpan").should("be.visible");

cy.contains("button", "Kirim") mencari elemen button yang berisi teks "Kirim". Gunakan dengan hati-hati: jika teks muncul di banyak tempat, test bisa memilih elemen yang salah.

#Navigasi dan Interaksi Form

#Navigasi Antar Halaman

Kalian bisa pindah halaman dengan cy.visit, atau mengikuti link seperti pengguna:

Navigasi via link

cy.get("a[href=/produk]").click();
cy.url().should("include", "/produk");
cy.go("back");
cy.go("forward");

cy.go("back") kembali ke halaman sebelumnya, cy.go("forward") maju lagi. Berguna untuk menguji alur back-forward browser.

#Form dan Elemen Interaktif

Interaksi form lengkap

cy.get("[data-cy=quantity]").clear().type("3");
cy.get("[data-cy=select-tipe]").select("premium");
cy.get("[data-cy=checkbox-syarat]").check();
cy.get("[data-cy=submit]").click();

cy.clear() mengosongkan input sebelum mengetik, cy.select("premium") memilih opsi pada dropdown, dan cy.check() mencentang checkbox. Aksi-aksi ini meniru pengguna nyata sehingga event JavaScript di aplikasi tetap terpicu.

#Real-Time Reloading dan Debug in Browser

#.debug() dan cy.pause()

Saat test gagal atau berperilaku aneh, sisipkan titik debug:

Titik debug di tengah test

cy.get("[data-cy=email-input]")
  .type("user@example.com")
  .debug();
 
cy.pause();
cy.get("[data-cy=submit]").click();

.debug() menjeda eksekusi dan membuka console browser dengan snapshot elemen saat itu. cy.pause() menghentikan test sampai kalian menekan tombol lanjut di Test Runner — ideal untuk melangkah test perintah demi perintah.

#Memakai DevTools Browser

Cypress mencatat setiap perintah dengan snapshot DOM. Klik perintah di command log untuk melihat kondisi halaman persis di titik tersebut. Kombinasikan dengan DevTools browser untuk memeriksa network, console, dan elemen — inilah alur debugging yang membuat Cypress terasa seperti live tooling, bukan black box.

#Penutup

Episode 4 melengkapi kosakata inti Cypress: cy.visit untuk navigasi, cy.get dan cy.contains untuk memilih elemen, action seperti type, click, select, dan check, assertion .should() yang dibawa dari Chai, navigasi back-forward, serta debugging dengan .debug() dan cy.pause().

Inti yang harus dibawa pulang:

• Pola dasar test: visit, get, action, lalu assert.
• Selector data-cy adalah pilihan paling stabil.
• .should() mengekspos assertion Chai; bedakan have.text dan contain.text.
• type, select, dan check meniru pengguna nyata dan memicu event.
• .debug() dan cy.pause() untuk debugging; hapus sebelum CI.

Di episode 5 selanjutnya kita akan membahas automatic waiting dan retries — bagaimana Cypress menunggu elemen tanpa sleep, mengatasi timing issues, retry-ability pada commands dan assertions, serta best practices untuk test yang andal. Ini adalah kunci mengapa test Cypress jauh lebih jarang flaky.