Belajar Cypress - Sejarah, Latar Belakang & Mengapa Memilih Cypress

#Pendahuluan

Episode 0 sudah memastikan environment kalian siap. Sekarang saatnya memahami mengapa Cypress ada. Episode 1 menjawab tiga pertanyaan besar: dari mana Cypress berasal, keunggulan apa yang ditawarkannya, dan mengapa kalian memilihnya dibandingkan alat lain.

Banyak orang mulai memakai Cypress karena tutorial, padahal memahami latar belakangnya jauh lebih berharga. Dengan tahu masalah yang dipecahkan, kalian akan lebih mudah memutuskan kapan memakai Cypress, kapan memakai Playwright, dan bagaimana memposisikannya dalam strategi quality assurance tim.

#Asal-Usul Cypress

#Lahir dari Frustrasi Selenium

Cypress dikembangkan oleh Brian Mann pada sekitar tahun 2015. Latar belakangnya sederhana: frustrasi dengan keterbatasan Selenium — test yang lambat, flaky, dan sulit di-debug karena berjalan melalui WebDriver di luar browser. Brian memilih arsitektur berbeda: Cypress berjalan di dalam browser bersama aplikasi yang diuji.

Cypress versi 1.0 dirilis publik pada tahun 2017, dan sejak tahun 2019 proyek ini menjadi open-source di bawah lisensi MIT. Berbeda dari model lama, tidak ada server terpisah dan tidak ada WebDriver — dan hal ini mengubah cara engineer menulis serta men-debug test.

#Pertumbuhan Ekosistem

Arsitektur yang unik membawa pertumbuhan cepat. Komunitas, plugin, dan dukungan CI tumbuh bersamaan, dan Cypress menjadi salah satu framework E2E paling banyak dipakai di dunia. Per 2026, Cypress terus diperbarui dengan fitur seperti component testing, cross-origin testing lewat cy.origin(), serta eksperimen pada manajemen memori browser agar suite besar tidak membengkak.

npx cypress version

Perintah npx cypress version menampilkan versi yang terpasang. Biasakan cek ini rutin karena Cypress rilis beberapa kali dalam setahun.

#Tonggak Versi

Perjalanan versi Cypress menandai kematangan fitur yang terus bertambah:

• 2015: proyek dimulai oleh Brian Mann dari frustrasi terhadap keterbatasan Selenium.
• 2017: Cypress 1.0 dirilis publik sebagai versi open-source pertama.
• 2019: lisensi MIT resmi dan komunitas mulai berkembang pesat.
• 2020: Cypress 6.0 menghadirkan cy.intercept() yang menggantikan cy.route() untuk network stubbing.
• 2021: Cypress 9.0 memperkenalkan component testing untuk React, Vue, dan Angular.
• 2024: fokus pada cross-origin testing via cy.origin() dan peningkatan stabilitas untuk suite berskala besar.

Rilis terbaru juga membawa test retries bawaan dan integrasi yang lebih rapat dengan Git serta CI. Mengikuti changelog resmi menjadi kebiasaan yang baik sebelum memperbarui framework di project kalian.

#Keunggulan Cypress

#Real-Time Reload

Saat menulis test di Test Runner, Cypress me-reload test secara otomatis setiap file disimpan. Kalau kalian memperbaiki selector, hasil langsung terlihat tanpa menekan tombol. Pengalaman ini memperpendek feedback loop secara drastis — sesuatu yang tidak dimiliki Selenium klasik.

#Automatic Waiting

Cypress menunggu elemen secara otomatis sebelum menjalankan aksi. Perintah seperti cy.get() secara bawaan menunggu elemen muncul di DOM tanpa memerlukan sleep manual. Kita akan membedah mekanisme ini secara penuh di episode 5.

#Debuggability dan Dashboard

Setiap perintah Cypress mencatat snapshot: kalian bisa menghover perintah di Test Runner dan melihat kondisi halaman tepat pada titik tersebut. Ditambah Cypress Dashboard untuk merekam video, screenshot, dan analisis run di CI, debugging menjadi jauh lebih mudah. Kita akan mengupas dashboard di episode 11.

#Perbandingan dengan Selenium, Playwright, dan Jest

Perbedaan kunci: Selenium menekankan fleksibilitas bahasa dan browser, Playwright menawarkan kontrol halus atas browser via Chrome DevTools Protocol, sementara Jest dipakai untuk unit testing, bukan E2E. Cypress unggul di kemudahan debugging dan pengalaman developer, sedangkan Playwright unggul di kecepatan eksekusi multi-browser.

Kalian tidak wajib memilih satu saja. Banyak tim memakai Jest untuk unit, Cypress untuk E2E, dan mungkin Playwright untuk kebutuhan tertentu. Yang penting memahami kekuatan masing-masing.

Kapan memilih Cypress? Ketika prioritas kalian adalah developer experience, debugging visual, dan satu bahasa (JavaScript) untuk seluruh tim. Kapan memilih Playwright? Ketika kalian butuh kecepatan eksekusi paralel yang agresif dan dukungan lintas bahasa. Keduanya bukan musuh — banyak organisasi bahkan menjalankan keduanya dalam pipeline yang sama.

#Use Cases Cypress

#End-to-End Testing

Kasus utama Cypress: menguji alur lengkap dari UI ke backend. Login, checkout, pencarian, onboarding — semua yang dilakukan pengguna nyata bisa dipetakan menjadi test. Ini bagian inti dari fase 3 series ini.

Kerangka test E2E sederhana

describe("Alur checkout", () => {
  it("menyelesaikan pembelian dari keranjang", () => {
    cy.visit("/produk");
    cy.get("[data-cy=add-to-cart]").click();
    cy.get("[data-cy=checkout]").click();
    cy.url().should("include", "/checkout");
  });
});

cy.get("[data-cy=add-to-cart]") memilih tombol tambah ke keranjang lewat attribute data-cy, lalu .click() menirukan klik pengguna. Pola visit, get, action, assert seperti ini akan kita dalami di episode 4.

#Component Testing

Sejak Cypress 9, kalian bisa menguji komponen React, Vue, dan Angular secara terisolasi dengan kecepatan mendekati unit test, namun dengan rendering browser sungguhan. Kita akan membahas ini di episode 9.

#Integration Tests

Cypress juga cocok menguji kerja sama antar modul aplikasi, misalnya memastikan form frontend mengirim data yang benar ke API — baik API asli maupun hasil stub dengan cy.intercept(). Kita akan membedahnya di episode 12.

#Penutup

Episode 1 memberi kalian konteks: Cypress lahir sekitar 2015 dari frustrasi terhadap Selenium, dirilis publik pada 2017, dan open-source sejak 2019. Keunggulannya ada di real-time reload, automatic waiting, debuggability, dan dashboard. Dibandingkan Selenium, Playwright, dan Jest, Cypress menonjol di pengalaman developer serta fokus E2E dan component testing.

Inti yang harus dibawa pulang:

• Cypress berjalan di dalam browser, bukan lewat WebDriver.
• Real-time reload memperpendek feedback loop saat menulis test.
• Automatic waiting menghilangkan kebutuhan sleep manual.
• Selenium unggul di fleksibilitas, Playwright di kontrol browser, Jest di unit test.
• Cypress melayani end-to-end testing, component testing, dan integration tests.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur Cypress — komponen Test Runner, Dashboard, dan plugins, bagaimana Cypress berjalan di browser dan Node.js, test lifecycle dengan hooks, serta struktur project dan konfigurasi dasar. Ini adalah fondasi arsitektural yang akan menemani seluruh series.