Pengantar Cypress
Pengantar Cypress
Dalam dunia software testing modern, kecepatan dan efisiensi pengujian menjadi kunci utama keberhasilan. Salah satu alat yang kini semakin populer di kalangan QA engineer dan developer adalah Cypress — framework modern untuk melakukan pengujian end-to-end (E2E) pada aplikasi web.
Apa Itu Cypress?
Cypress adalah framework end-to-end testing untuk aplikasi web modern seperti React, Vue, dan Angular. Berbeda dengan alat pengujian tradisional seperti Selenium, Cypress bekerja langsung di dalam browser sehingga memberikan hasil yang lebih cepat, stabil, dan real-time.
Cypress dapat digunakan di berbagai level pengujian:
- Unit Testing
- Integration Testing
- End-to-End Testing (utama)
Meskipun berfokus pada end-to-end testing, Cypress juga mampu menangani component dan integration testing dengan mudah.
Keunggulan Cypress Dibanding Selenium atau Playwright
| Fitur | Penjelasan |
|---|---|
| Arsitektur Modern | Cypress dibangun dengan JavaScript dan berjalan langsung di browser, memberikan kecepatan eksekusi tinggi. |
| Test Runner Interaktif | Menampilkan hasil tes secara visual dan real-time di browser. |
| Time Travel | Melihat langkah-langkah tes secara step-by-step untuk debugging lebih mudah. |
| Automatic Waits | Tidak perlu menulis sleep atau wait manual — Cypress otomatis menunggu elemen muncul sebelum lanjut ke langkah berikutnya. |
| Kemudahan Setup | Instalasi cepat dan sederhana melalui npm. |
Instalasi dan Setup Cypress
Sebelum mulai, pastikan Node.js sudah terinstal di komputer.
1. Inisialisasi Project
1
npm init -y
2. Instal Cypress
1
npm install cypress --save-dev
3. Membuka Cypress
1
npx cypress open
4. Menjalankan Tes di Browser Pilihan
1
2
3
npx cypress run --browser chrome
npx cypress run --browser firefox
npx cypress run --browser edge
Perintah Dasar Cypress
Cypress menggunakan perintah yang sederhana dan mudah diingat, menyerupai perilaku pengguna nyata di browser.
| Perintah | Fungsi |
|---|---|
cy.visit('URL') | Membuka halaman web tertentu |
cy.get('selector') | Mengambil elemen HTML berdasarkan selector |
cy.type('text') | Mengetik ke dalam input field |
cy.click() | Menekan tombol atau link |
cy.contains('text') | Mencari elemen berdasarkan teks yang ditampilkan |
cy.url() | Mengambil URL aktif dari browser |
Contoh sederhana:
1
2
3
4
5
cy.visit('https://www.saucedemo.com')
cy.get('#user-name').type('standard_user')
cy.get('#password').type('secret_sauce')
cy.get('#login-button').click()
cy.url().should('include', '/inventory')
Studi Kasus: Pengujian Login di SauceDemo
Berikut contoh struktur pengujian menggunakan Cypress untuk skenario login di situs SauceDemo.
Test Scenario
| ID | Deskripsi |
|---|---|
| TS-001 | Login berhasil ke halaman utama |
| TS-002 | Login gagal dengan kredensial salah |
| TS-003 | Menambahkan produk ke keranjang |
Test Case Detail
| ID | Deskripsi | Steps | Expected Result |
|---|---|---|---|
| TC-001 | Login sukses | Input username dan password valid → Klik Login | Masuk ke halaman inventory |
| TC-002 | Login gagal | Input username atau password salah → Klik Login | Muncul pesan error |
| TC-003 | Tambah produk ke keranjang | Login sukses → Klik “Add to cart” | Item bertambah di keranjang |
Kesimpulan
Cypress adalah framework pengujian modern dan efisien untuk memastikan kualitas aplikasi web melalui otomatisasi pengujian berbasis UI.
Dengan fitur seperti:
- Interactive Test Runner
- Time Travel
- Automatic Waits
…Cypress mempermudah pengujian aplikasi secara realistis dan cepat.
Melalui studi kasus SauceDemo, terbukti Cypress efektif menangani berbagai skenario — baik positif maupun negatif.
Secara keseluruhan, Cypress adalah alat yang andalan untuk pengujian aplikasi web modern — cepat, intuitif, dan mudah digunakan oleh pengembang maupun QA engineer.