// Playwright E2E Test Template import { test, expect } from '@playwright/test' test.describe('User Journey - Feature Name', () => { test.beforeEach(async ({ page }) => { // Navigate to starting page await page.goto('/dashboard') // Wait for page to be ready await page.waitForLoadState('networkidle') }) test.describe('Happy Path Scenarios', () => { test('should complete main user workflow', async ({ page }) => { // Step 1: Initial state verification await expect(page.locator('[data-testid="welcome-message"]')).toBeVisible() await expect(page).toHaveTitle(/Dashboard/) // Step 2: Navigate to feature await page.click('[data-testid="feature-nav-link"]') await page.waitForURL('**/feature') // Step 3: Interact with main feature await page.fill('[data-testid="input-field"]', 'test data') await page.click('[data-testid="submit-button"]') // Step 4: Verify success state await expect(page.locator('[data-testid="success-message"]')).toBeVisible() await expect(page.locator('[data-testid="result-display"]')).toContainText('Success') }) test('should handle form submission with valid data', async ({ page }) => { await page.goto('/form') // Fill form with valid data await page.fill('[name="email"]', 'test@example.com') await page.fill('[name="password"]', 'SecurePass123!') await page.check('[name="agree-terms"]') // Submit form await page.click('[type="submit"]') // Verify successful submission await expect(page.locator('.success-notification')).toBeVisible() await expect(page).toHaveURL('**/success') }) }) test.describe('Error Scenarios', () => { test('should handle network errors gracefully', async ({ page }) => { // Simulate network failure await page.route('**/api/data', (route) => { route.abort('internetdisconnected') }) await page.goto('/dashboard') await page.click('[data-testid="load-data-button"]') // Verify error handling await expect(page.locator('[data-testid="error-message"]')).toBeVisible() await expect(page.locator('[data-testid="retry-button"]')).toBeVisible() }) test('should validate required form fields', async ({ page }) => { await page.goto('/form') // Try to submit without filling required fields await page.click('[type="submit"]') // Verify validation errors await expect(page.locator('[data-testid="email-error"]')).toBeVisible() await expect(page.locator('[data-testid="password-error"]')).toBeVisible() // Form should not submit await expect(page).toHaveURL('**/form') }) }) test.describe('Accessibility Testing', () => { test('should be keyboard navigable', async ({ page }) => { await page.goto('/dashboard') // Tab through interactive elements await page.keyboard.press('Tab') await expect(page.locator('[data-testid="first-button"]')).toBeFocused() await page.keyboard.press('Tab') await expect(page.locator('[data-testid="second-button"]')).toBeFocused() // Test Enter key activation await page.keyboard.press('Enter') await expect(page.locator('[data-testid="modal"]')).toBeVisible() }) test('should have proper ARIA labels and roles', async ({ page }) => { await page.goto('/dashboard') // Check main landmark await expect(page.locator('main')).toHaveAttribute('role', 'main') // Check button accessibility const actionButton = page.locator('[data-testid="action-button"]') await expect(actionButton).toHaveAttribute('aria-label') await expect(actionButton).toHaveAttribute('role', 'button') // Check form accessibility await expect(page.locator('[name="email"]')).toHaveAttribute('aria-required', 'true') }) test('should announce important state changes', async ({ page }) => { await page.goto('/form') // Submit form to trigger state change await page.fill('[name="email"]', 'test@example.com') await page.click('[type="submit"]') // Verify live region announcement await expect(page.locator('[aria-live="polite"]')).toContainText('Form submitted successfully') }) }) test.describe('Mobile Responsiveness', () => { test('should work on mobile devices', async ({ page }) => { // Set mobile viewport await page.setViewportSize({ width: 375, height: 667 }) await page.goto('/dashboard') // Verify mobile-specific elements await expect(page.locator('[data-testid="mobile-menu-button"]')).toBeVisible() // Test mobile navigation await page.click('[data-testid="mobile-menu-button"]') await expect(page.locator('[data-testid="mobile-nav-menu"]')).toBeVisible() // Test touch interactions await page.tap('[data-testid="feature-card"]') await expect(page).toHaveURL('**/feature') }) test('should handle touch gestures', async ({ page }) => { await page.setViewportSize({ width: 375, height: 667 }) await page.goto('/gallery') // Test swipe gesture (if implemented) const gallery = page.locator('[data-testid="image-gallery"]') await gallery.hover() await page.mouse.down() await page.mouse.move(100, 0) await page.mouse.up() // Verify swipe action await expect(page.locator('[data-testid="next-image"]')).toBeVisible() }) }) test.describe('Performance Testing', () => { test('should load page within acceptable time', async ({ page }) => { const startTime = Date.now() await page.goto('/dashboard') await page.waitForLoadState('networkidle') const loadTime = Date.now() - startTime expect(loadTime).toBeLessThan(3000) // 3 seconds max }) test('should handle large datasets efficiently', async ({ page }) => { await page.goto('/data-table') // Load large dataset await page.click('[data-testid="load-1000-items"]') // Verify virtual scrolling or pagination works await expect(page.locator('[data-testid="table-row"]').first()).toBeVisible() // Test scrolling performance await page.locator('[data-testid="table-container"]').scroll({ top: 1000 }) await expect(page.locator('[data-testid="table-row"]')).toHaveCountGreaterThan(10) }) }) test.describe('Integration Testing', () => { test('should integrate with external services', async ({ page }) => { // Mock external API await page.route('**/api/external-service', async (route) => { await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ success: true, data: 'mocked data' }) }) }) await page.goto('/integration-test') await page.click('[data-testid="call-external-api"]') await expect(page.locator('[data-testid="api-response"]')).toContainText('mocked data') }) test('should handle authentication flow', async ({ page }) => { // Start from login page await page.goto('/login') // Login with valid credentials await page.fill('[name="username"]', 'testuser') await page.fill('[name="password"]', 'password123') await page.click('[type="submit"]') // Verify redirect to dashboard await expect(page).toHaveURL('**/dashboard') // Verify authenticated state await expect(page.locator('[data-testid="user-menu"]')).toBeVisible() // Test logout await page.click('[data-testid="logout-button"]') await expect(page).toHaveURL('**/login') }) }) })