Belajar Cypress - Instalasi & Konfigurasi Dasar

#Pendahuluan

Dua episode pertama membahas konsep dan arsitektur. Sekarang waktunya praktik. Episode 3 memandu kalian menginstall Cypress, membuka Test Runner, menulis test pertama, dan menyusun konfigurasi dasar yang akan dipakai sepanjang series.

Di akhir episode ini, kalian akan punya project Cypress yang hidup: bisa membuka Test Runner, melihat test berjalan real-time, dan menjalankannya lewat command line.

#Menginstal Cypress dan Menyiapkan Project

Masuk ke direktori project yang dibuat di episode 0, lalu install Cypress:

npm install cypress --save-dev

npm install cypress --save-dev menambahkan Cypress ke devDependencies. Proses ini juga mengunduh binary Cypress ke cache lokal — pada instalasi pertama, proses ini bisa berjalan beberapa menit.

Setelah selesai, verifikasi bahwa binary terpasang:

npx cypress verify

npx cypress verify memastikan binary Cypress kompatibel dengan sistem kalian. Jika muncul kesalahan terkait library sistem di Linux, install dependency yang diminta dan jalankan ulang.

#Membuka Cypress UI dan Menulis Test Pertama

Buka Test Runner untuk pertama kali:

npx cypress open

Saat pertama dibuka, Cypress membuat folder cypress dan contoh spec file. Klik E2E Testing, pilih browser, lalu klik spec contoh untuk melihat test pertama berjalan.

Sekarang tulis spec pertama kalian. Ganti isi cypress/e2e/example.cy.js atau buat file baru:

Spec pertama

describe("Test pertama", () => {
  it("memuat halaman contoh", () => {
    cy.visit("https://example.com");
    cy.contains("Example Domain").should("be.visible");
  });
});

cy.visit("https://example.com") membuka halaman, lalu cy.contains("Example Domain") mencari teks dan .should("be.visible") memastikan elemen terlihat. Simpan file, dan Test Runner otomatis menjalankannya ulang — inilah real-time reload yang kita bahas di episode 1.

#Konfigurasi cypress.config.js

#Mengatur baseUrl dan Viewport

Agar test tidak menulis URL penuh setiap kali, set baseUrl. Konfigurasikan juga viewport default:

Konfigurasi e2e lengkap

const { defineConfig } = require("cypress");
 
module.exports = defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    viewportWidth: 1280,
    viewportHeight: 720,
    defaultCommandTimeout: 10000,
    retries: 2,
  },
});

Dengan baseUrl, cy.visit("/") otomatis menuju http://localhost:3000. Properti viewportWidth dan viewportHeight mensimulasikan ukuran layar.

#Timeout dan Retries

defaultCommandTimeout mengatur batas waktu tunggu perintah — di sini 10000 milidetik, lebih longgar dari bawaan 4000. Sementara retries mengontrol ulang percobaan test yang gagal di level suite; kita akan membedah keduanya lebih dalam di episode 5 dan 13.

CYPRESS_BASE_URL=http://localhost:3000
CYPRESS_DEFAULT_COMMAND_TIMEOUT=10000

Setiap opsi konfigurasi bisa di-override lewat variabel environment berawalan CYPRESS_. Pendekatan CYPRESS_BASE_URL ini berguna saat menjalankan test di environment berbeda, misalnya staging versus production.

#Menambahkan Script Test di package.json

Agar tim menjalankan test dengan mudah, tambahkan script di package.json:

{
  "scripts": {
    "test": "cypress run",
    "test:open": "cypress open",
    "test:headless": "cypress run --browser chrome"
  }
}

• npm run test menjalankan seluruh suite dalam mode headless — tanpa UI.
• npm run test:open membuka Test Runner interaktif.
• npm run test:headless menjalankan suite di browser Chrome.

Untuk menjalankan, gunakan npm run test:open dan pilih spec yang ingin dilihat.

#Penutup

Episode 3 menyelesaikan setup: Cypress terinstall sebagai dev dependency, Test Runner terbuka dengan spec pertama berjalan real-time, cypress.config.js mengatur baseUrl, viewport, timeout, dan retries, serta script npm run test tersedia untuk menjalankan suite headless.

Inti yang harus dibawa pulang:

• npm install cypress --save-dev lalu npx cypress verify untuk memastikan binary siap.
• npx cypress open membuka Test Runner; simpan file dan test berjalan ulang otomatis.
• baseUrl, viewport, dan defaultCommandTimeout diatur di cypress.config.js.
• Opsi konfigurasi bisa di-override lewat env CYPRESS_.
• Tambahkan script test dan test:open di package.json.

Di episode 4 selanjutnya kita akan membahas menulis test Cypress dasar — memakai cy.visit(), cy.get(), action dasar seperti klik dan ketik, assertions dengan .should() dan .contains(), navigasi, forms, serta teknik debug langsung di browser. Test pertama kalian akan mulai terasa seperti alat sungguhan.