End-to-End Testing

Overview

End-to-end testing validates complete user workflows in your application.

Using Playwright

Setup

# Install Playwright
npm install -D @playwright/test

# Initialize
npx playwright install

Configuration

playwright.config.js

import { defineConfig } from '@playwright/test'

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

Writing Tests

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')
})

Testing dialogs

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()
})

Testing Window Behaviour

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)
})

Best Practices

✅ Do

• Test critical user flows
• Use data-testid attributes
• Clean up test data
• Run tests in CI/CD
• Test error scenarios
• Keep tests independent

❌ Don’t

• Don’t test implementation details
• Don’t write brittle selectors
• Don’t skip cleanup
• Don’t ignore flaky tests
• Don’t test everything

Running E2E Tests

# 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

CI/CD Integration

.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

Next Steps

• Testing - Learn unit testing
• Building - Build your application