Belajar QA Automation Engineer - Cypress & Alternatives

#Pendahuluan

Setelah di episode 5 kita menguasai Playwright, pada episode ini kita memahami alternatif terpopuler: Cypress. Kedua tool punya kelebihan masing-masing — memahami kapan pakai mana adalah skill penting QA automation engineer.

#Cypress Overview

#Kelebihan Cypress

text

Cypress Strengths:
├── Developer-friendly (time travel debugging)
├── Real-time reloads
├── Automatic waiting
├── Network traffic control (stubbing)
├── Dashboard untuk CI/CD
├── Ecosystem plugins yang kaya
└── Community yang besar

#Kekurangan Cypress

text

Cypress Limitations:
├── Single tab only (tidak bisa multi-tab)
├── Tidak bisa multi-origin (different domains)
├── Tidak mendukung Safari (Chrome/Edge/Firefox only)
├──iframe handling terbatas
├── Perlu server berjalan untuk testing
└── License fee untuk dashboard (CI parallelization)

#Basic Cypress Test

javascript

// cypress/e2e/login.cy.js
describe('Login', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/login');
  });
 
  it('should login with valid credentials', () => {
    cy.get('#email').type('user@test.com');
    cy.get('#password').type('password123');
    cy.get('#login-button').click();
    cy.url().should('include', '/dashboard');
    cy.get('.welcome').should('contain', 'Welcome');
  });
 
  it('should show error with invalid credentials', () => {
    cy.get('#email').type('wrong@test.com');
    cy.get('#password').type('wrongpass');
    cy.get('#login-button').click();
    cy.get('.error-message').should('be.visible');
  });
});

#Playwright vs Cypress

Aspek	Playwright	Cypress
Multi-browser	Chrome, Firefox, Safari, Edge	Chrome, Firefox, Edge
Multi-tab	Ya	Tidak
Multi-origin	Ya	Terbatas
Speed	Sangat cepat	Cepat
Debugging	Trace viewer, Inspector	Time travel, open browser
Parallelization	Gratis	Paid dashboard
Language	JS, TS, Python, Java, C#	JS, TS
API testing	Ya (built-in)	Terbatas
Mobile testing	Ya (emulation)	Tidak
Community	Besar, growing	Besar, mature

#Kapan Pakai Mana?

#Pilih Playwright Jika:

text

├── Butuh multi-tab testing
├── Butuh cross-origin testing
├── Butuh mobile emulation
├── Butuh parallelization gratis
├── Tim pakai multiple bahasa
├── Butuh API testing terintegrasi
└── Testing modern web apps (SPA, micro-frontends)

#Pilih Cypress Jika:

text

├── Tim sudah familiar dengan Cypress
├── Butuh time travel debugging
├── Aplikasi single-origin
├── Butuh network stubbing yang kuat
├── Butuh dashboard terintegrasi
└── Developer-centric workflow

#Migration Strategy

text

Jika migrasi Cypress → Playwright:
1. Install Playwright di samping Cypress
2. Tulis test baru di Playwright
3. Migrate test kritis dulu
4. Paralel run selama transisi
5. Hapus Cypress setelah migration lengkap

Note

Kedua tool bagus. Yang terbaik adalah yang sesuai dengan kebutuhan tim dan project. Playwright lebih fleksibel; Cypress lebih developer-friendly.

#Praktik: Cypress Test

bash

# Install Cypress
npm install cypress --save-dev
 
# Run Cypress
npx cypress open
 
# Atau headless
npx cypress run

#Penutup

Cypress: developer-friendly, time travel debugging, tapi terbatas (single tab, no Safari).
Playwright: lebih fleksibel, multi-browser, multi-tab, gratis parallelization.
Decision: pilih berdasarkan kebutuhan tim dan project, bukan popularitas.
Migration: bisa paralel selama transisi.

Di episode 7 selanjutnya kita akan membahas Page Object Model (POM) — abstraction, maintainability, dan best practices untuk mengorganisir test code. Sampai jumpa di episode 7!