Memulai dengan Playwright untuk React

Apa Itu Playwright?

Instalasi

# npm init playwright@latest
# or
# npx playwright install

# playwright.config.ts is created automatically

Konfigurasi Playwright untuk React

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  use: { baseURL: 'http://localhost:5173' },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

Menulis Pengujian Pertama Anda

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

test('home page shows heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
});

Pencari Elemen

// By role
const button = page.getByRole('button', { name: 'Submit' });
// By label
const input = page.getByLabel('Email address');
// By text
const link = page.getByText('Sign in');
// By placeholder
const search = page.getByPlaceholder('Search products');

Mengeklik dan Mengetik

await page.getByLabel('Email').fill('user@example.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Log in' }).click();

Menunggu Navigasi

// Wait for URL to change after form submit
await page.waitForURL('/dashboard');

// Wait for a specific request
const [response] = await Promise.all([
  page.waitForResponse('/api/users'),
  page.click('button[type="submit"]'),
]);

Verifikasi

await expect(page.getByRole('heading')).toHaveText('Dashboard');
await expect(page.getByTestId('user-count')).toContainText('5 users');
await expect(page.getByRole('button', { name: 'Delete' })).toBeDisabled();
await expect(page).toHaveURL('/success');

Mengambil Tangkapan Layar saat Pengujian Gagal

use: {
  screenshot: 'only-on-failure',
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
}

Menjalankan Pengujian

# Run all tests
npx playwright test

# Run with UI mode
npx playwright test --ui

# Run a specific file
npx playwright test e2e/login.spec.ts

# Debug mode
npx playwright test --debug

Penampil Jejak Playwright

Integrasi CI

# .github/workflows/e2e.yml
- name: Install Playwright Browsers
  run: npx playwright install --with-deps
- name: Run Playwright tests
  run: npx playwright test

Cek Singkat

Ringkasan