Apa itu E2E Testing?

End-to-End (E2E) testing menguji aplikasi dari sudut pandang user. Test membuka browser sungguhan, mengklik tombol, mengisi form, dan memverifikasi hasilnya — persis seperti yang dilakukan user.

Kapan Menggunakan E2E?

• Alur kritis: login, registrasi, checkout
• Integrasi antar halaman yang kompleks
• Memverifikasi bahwa frontend dan backend bekerja bersama

Setup Playwright

# Instalasi
npm init playwright@latest

# Struktur yang dibuat:
# tests/          — folder test
# playwright.config.ts — konfigurasi
# package.json    — scripts ditambahkan

Konfigurasi Dasar

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./tests",
  timeout: 30000,
  use: {
    baseURL: "http://localhost:3000",
    screenshot: "only-on-failure",
  },
  projects: [
    { name: "chromium", use: { browserName: "chromium" } },
    { name: "firefox", use: { browserName: "firefox" } },
    { name: "webkit", use: { browserName: "webkit" } },
  ],
});

Locators — Menemukan Elemen

Playwright menggunakan locator yang mengikuti best practice aksesibilitas:

import { test, expect } from "@playwright/test";

test("menemukan elemen di halaman", async ({ page }) => {
  await page.goto("/");

  // Berdasarkan role (DIREKOMENDASIKAN)
  page.getByRole("button", { name: "Submit" });
  page.getByRole("heading", { name: "Selamat Datang" });
  page.getByRole("link", { name: "Masuk" });

  // Berdasarkan teks
  page.getByText("Halo Dunia");

  // Berdasarkan label form
  page.getByLabel("Email");

  // Berdasarkan placeholder
  page.getByPlaceholder("Masukkan email");

  // Berdasarkan test-id (last resort)
  page.getByTestId("submit-button");
});

Actions — Interaksi dengan Halaman

test("mengisi dan submit form login", async ({ page }) => {
  await page.goto("/login");

  // Mengisi input
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Password").fill("rahasia123");

  // Klik tombol
  await page.getByRole("button", { name: "Masuk" }).click();

  // Select dropdown
  await page.getByLabel("Kota").selectOption("jakarta");

  // Checkbox
  await page.getByLabel("Ingat saya").check();
});

Assertions — Verifikasi

test("halaman dashboard setelah login", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Password").fill("password");
  await page.getByRole("button", { name: "Masuk" }).click();

  // Verifikasi URL
  await expect(page).toHaveURL("/dashboard");

  // Verifikasi elemen terlihat
  await expect(page.getByText("Selamat datang, Budi")).toBeVisible();

  // Verifikasi teks
  await expect(page.getByRole("heading")).toHaveText("Dashboard");

  // Verifikasi elemen tidak ada
  await expect(page.getByText("Error")).not.toBeVisible();
});

Test Generator (Codegen)

Playwright punya fitur yang merekam interaksi browser dan menghasilkan kode test secara otomatis:

# Buka codegen tool
npx playwright codegen http://localhost:3000

# Hasilnya bisa langsung di-copy ke file test

Cross-browser Testing

Playwright mendukung Chromium, Firefox, dan WebKit (Safari) dalam satu konfigurasi. Jalankan semua browser sekaligus:

# Jalankan semua browser
npx playwright test

# Jalankan browser tertentu
npx playwright test --project=chromium

# Lihat report HTML
npx playwright show-report