Pengujian End-to-End

Ringkasan

Pengujian end-to-end memvalidasi alur kerja pengguna secara lengkap di aplikasi Anda.

Menggunakan Playwright

Penyiapan

# Install Playwright
npm install -D @playwright/test

# Inisialisasi
npx playwright install

Konfigurasi

playwright.config.js

import { defineConfig } from '@playwright/test'

export default defineConfig({
  testDir: './e2e',
  use: {
    baseURL: 'http://localhost:9245', // Wails v3 dev server (default port)
  },
})

Menulis Tes

e2e/app.spec.js

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

test('create note', async ({ page }) => {
  await page.goto('/')

  // Click new note button
  await page.click('#new-note-btn')

  // Fill in title
  await page.fill('#note-title', 'Test Note')

  // Fill in content
  await page.fill('#note-content', 'Test content')

  // Verify note appears in list
  await expect(page.locator('.note-item')).toContainText('Test Note')
})

test('delete note', async ({ page }) => {
  await page.goto('/')

  // Create a note first
  await page.click('#new-note-btn')
  await page.fill('#note-title', 'To Delete')

  // Delete it
  await page.click('#delete-btn')

  // Confirm dialog
  page.on('dialog', dialog => dialog.accept())

  // Verify it's gone
  await expect(page.locator('.note-item')).not.toContainText('To Delete')
})

Menguji dialog

test('file save dialog', async ({ page }) => {
  await page.goto('/')

  // Intercept file dialog
  page.on('filechooser', async (fileChooser) => {
    await fileChooser.setFiles('/path/to/test/file.json')
  })

  // Trigger save
  await page.click('#save-btn')

  // Verify success message
  await expect(page.locator('.success-message')).toBeVisible()
})

Menguji Perilaku Window

test('window state', async ({ page }) => {
  await page.goto('/')

  // Test window title
  await expect(page).toHaveTitle('My App')

  // Test window size
  const size = await page.viewportSize()
  expect(size.width).toBe(800)
  expect(size.height).toBe(600)
})

Praktik Terbaik

✅ Lakukan

• Uji alur pengguna yang kritis
• Gunakan atribut data-testid
• Bersihkan data tes
• Jalankan tes di CI/CD
• Uji skenario error
• Jaga agar tes tetap independen

❌ Jangan

• Jangan uji detail implementasi
• Jangan tulis selector yang rapuh
• Jangan lewati pembersihan
• Jangan abaikan tes yang tidak stabil
• Jangan uji semuanya

Menjalankan Tes E2E

# Run all tests
npx playwright test

# Run in headed mode
npx playwright test --headed

# Run specific test
npx playwright test e2e/app.spec.js

# Debug mode
npx playwright test --debug

Integrasi CI/CD

.github/workflows/e2e.yml

name: E2E Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run tests
        run: npx playwright test

Langkah Selanjutnya

• Testing - Pelajari unit testing
• Building - Build aplikasi Anda