E2E Testing dengan Claude Code: Panduan Praktis Playwright/Cypress

Bikin E2E Testing Lebih Efisien dengan Claude Code

E2E (End-to-End) testing adalah metode test penting yang memverifikasi alur operasi pengguna secara otomatis. Pakai Claude Code, kamu bisa generate kode test Playwright atau Cypress dengan cepat, dan langsung integrasi sampai CI environment sekaligus.

Implementasi Test di Playwright

Test Alur Login

> Buat E2E test untuk alur dari login sampai tampilan dashboard pakai Playwright.
> Gunakan pola Page Object.

// tests/pages/LoginPage.ts
import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly errorMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Alamat email');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Login' });
    this.errorMessage = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

// tests/e2e/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test.describe('Fitur login', () => {
  test('Bisa login dengan credential yang benar', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'password123');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Dashboard')).toBeVisible();
  });

  test('Muncul error saat credential salah', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('user@example.com', 'wrongpassword');

    await expect(loginPage.errorMessage).toBeVisible();
    await expect(loginPage.errorMessage).toContainText('Autentikasi gagal');
  });
});

Implementasi Test di Cypress

Alur Pembelian di Situs E-commerce

> Buat alur dari pilih produk, tambah ke keranjang, sampai selesai checkout
> pakai Cypress. Tambahin juga custom command.

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// cypress/e2e/purchase.cy.ts
describe('Alur pembelian', () => {
  beforeEach(() => {
    cy.login('buyer@example.com', 'password123');
  });

  it('Bisa tambahin produk ke keranjang dan menyelesaikan pembelian', () => {
    cy.visit('/products');
    cy.get('[data-cy="product-card"]').first().click();
    cy.get('[data-cy="add-to-cart"]').click();
    cy.get('[data-cy="cart-badge"]').should('contain', '1');

    cy.visit('/cart');
    cy.get('[data-cy="checkout-button"]').click();

    cy.get('[data-cy="confirm-order"]').click();
    cy.get('[data-cy="order-complete"]').should('be.visible');
    cy.get('[data-cy="order-number"]').should('exist');
  });
});

Kapan Pakai Playwright vs Cypress

Item	Playwright	Cypress
Multi-browser	Chromium/Firefox/WebKit	Chrome/Firefox/Edge
Eksekusi paralel	Dukungan native	Lewat Dashboard
Multi tab	Didukung	Tidak didukung
Test API	Didukung	Didukung
Learning curve	Agak tinggi	Rendah

Visual Regression Testing

Pakai fitur screenshot comparison Playwright, kamu bisa mendeteksi perubahan UI yang nggak disengaja.

test('Konfirmasi tampilan header nggak berubah', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('header')).toHaveScreenshot('header.png');
});

Summary

Dengan Claude Code, kamu bisa implement E2E test Playwright atau Cypress dengan efisien dan membangun test suite berkualitas tinggi. Baca juga otomatisasi API testing dan panduan strategi testing.

Untuk detail lebih lanjut, lihat dokumentasi resmi Playwright dan dokumentasi resmi Cypress.