173 lines
3.2 KiB
Text
173 lines
3.2 KiB
Text
---
|
|
title: End-to-End Testing
|
|
description: Test complete user workflows
|
|
sidebar:
|
|
order: 6
|
|
---
|
|
|
|
## Overview
|
|
|
|
End-to-end testing validates complete user workflows in your application.
|
|
|
|
## Using Playwright
|
|
|
|
### Setup
|
|
|
|
```bash
|
|
# Install Playwright
|
|
npm install -D @playwright/test
|
|
|
|
# Initialize
|
|
npx playwright install
|
|
```
|
|
|
|
### Configuration
|
|
|
|
```javascript
|
|
// playwright.config.js
|
|
import { defineConfig } from '@playwright/test'
|
|
|
|
export default defineConfig({
|
|
testDir: './e2e',
|
|
use: {
|
|
baseURL: 'http://localhost:34115', // Wails dev server
|
|
},
|
|
})
|
|
```
|
|
|
|
### Writing Tests
|
|
|
|
```javascript
|
|
// 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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
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
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```yaml
|
|
# .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](/guides/testing) - Learn unit testing
|
|
- [Building](/guides/building) - Build your application
|