Pengantar Cypress (dengan Contoh SauceDemo)

Apa itu Cypress?

Cypress adalah framework pengujian end-to-end modern untuk aplikasi web yang berjalan di browser dengan DX yang baik dan kecepatan tinggi.

Kapan Menggunakannya

• Validasi flow UI kritikal, cepat dieksekusi dan mudah diparalelisasi.

Contoh: Login dan Verifikasi Produk di SauceDemo

Target situs: https://www.saucedemo.com/.

cypress/e2e/saucedemo.cy.js

describe('SauceDemo - Login', () => {
  it('should login and see inventory list', () => {
    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.get('.inventory_list').should('be.visible');
    cy.contains('.inventory_item_name', 'Sauce Labs Backpack').should('be.visible');
  });
});

Menjalankan Tes

• Instal: npm i -D cypress
• Buka UI: npx cypress open
• Headless: npx cypress run

Tips Stabilitas

• Gunakan selector yang stabil (data-test) bila tersedia.
• Hindari wait statis; manfaatkan assertion bawaan Cypress yang retry-able.

Sumber situs uji: SauceDemo.

Custom Commands dan Fixtures

// cypress/support/commands.js
Cypress.Commands.add('loginSauce', (user = 'standard_user', pass = 'secret_sauce') => {
  cy.visit('https://www.saucedemo.com/');
  cy.get('#user-name').type(user);
  cy.get('#password').type(pass);
  cy.get('#login-button').click();
  cy.get('.inventory_list').should('be.visible');
});

// cypress/e2e/cart.cy.js
describe('Cart flow', () => {
  it('adds product to cart', () => {
    cy.loginSauce();
    cy.contains('.inventory_item', 'Sauce Labs Backpack').contains('Add to cart').click();
    cy.get('.shopping_cart_badge').should('contain', '1');
  });
});

CI Contoh (GitHub Actions)

name: cypress
on: [push]
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npx cypress run