digiqagent 1.2.0

package/skills/playwright-test-generator/interaction-test-patterns.md

@@ -0,0 +1,987 @@
+# Interaction Test Patterns
+
+Comprehensive Playwright test code patterns organized by interaction type. Copy and adapt for generated test suites.
+
+## Forms — Fill, Submit, Validate
+
+### Positive — Valid Form Submission
+
+```typescript
+test('should create user with valid data', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillAndSubmit({
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    role: 'User',
+  });
+
+  await expect(page).toHaveURL(/\/users$/);
+  await expect(page.getByRole('alert')).toContainText(/created|success/i);
+});
+```
+
+### Negative — Missing Required Fields (One at a Time)
+
+```typescript
+test('should show error when name is empty', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillEmail('jane@example.com');
+  await formPage.clickSubmit();
+
+  await expect(formPage.nameError).toBeVisible();
+  await expect(formPage.nameError).toContainText(/required|name/i);
+});
+
+test('should show error when email is empty', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+  await formPage.clickSubmit();
+
+  await expect(formPage.emailError).toBeVisible();
+  await expect(formPage.emailError).toContainText(/required|email/i);
+});
+```
+
+### Negative — Invalid Formats
+
+```typescript
+test('should show error for invalid email format', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+  await formPage.fillEmail('not-an-email');
+  await formPage.clickSubmit();
+
+  await expect(formPage.emailError).toBeVisible();
+  await expect(formPage.emailError).toContainText(/valid|format|email/i);
+});
+
+test('should show error for invalid phone format', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+  await formPage.fillEmail('jane@example.com');
+  await formPage.fillPhone('abc');
+  await formPage.clickSubmit();
+
+  await expect(formPage.phoneError).toBeVisible();
+});
+```
+
+### Negative — Boundary Values
+
+```typescript
+test('should show error when name is too short', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('A');
+  await formPage.fillEmail('jane@example.com');
+  await formPage.clickSubmit();
+
+  await expect(formPage.nameError).toBeVisible();
+  await expect(formPage.nameError).toContainText(/minimum|at least|characters/i);
+});
+
+test('should show error when name exceeds max length', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('A'.repeat(256));
+  await formPage.fillEmail('jane@example.com');
+  await formPage.clickSubmit();
+
+  await expect(formPage.nameError).toBeVisible();
+});
+```
+
+### Form Reset and Dirty State
+
+```typescript
+test('should clear form on cancel', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+  await formPage.fillEmail('jane@example.com');
+  await formPage.clickCancel();
+
+  await expect(page).toHaveURL(/\/users$/);
+});
+
+test('should warn before leaving dirty form', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+
+  // Try to navigate away
+  page.on('dialog', dialog => dialog.dismiss());
+  await page.getByRole('link', { name: /dashboard/i }).click();
+
+  // Should stay on form page
+  await expect(page).toHaveURL(/\/users\/new/);
+});
+```
+
+### Inline Validation (Blur Trigger)
+
+```typescript
+test('should show validation on field blur (Angular)', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.emailInput.focus();
+  await formPage.emailInput.blur();
+
+  await expect(formPage.emailError).toBeVisible();
+});
+
+test('should clear validation when valid input entered', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.emailInput.focus();
+  await formPage.emailInput.blur();
+  await expect(formPage.emailError).toBeVisible();
+
+  await formPage.fillEmail('jane@example.com');
+  await expect(formPage.emailError).not.toBeVisible();
+});
+```
+
+## Click Events
+
+### Button Click
+
+```typescript
+test('should navigate to create form on Add button click', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickAdd();
+
+  await expect(page).toHaveURL(/\/users\/new/);
+});
+```
+
+### Toggle Switch
+
+```typescript
+test('should toggle active status', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoEdit('123');
+
+  const toggle = page.getByRole('switch', { name: /active/i });
+  await expect(toggle).toBeChecked();
+
+  await toggle.click();
+  await expect(toggle).not.toBeChecked();
+
+  await toggle.click();
+  await expect(toggle).toBeChecked();
+});
+```
+
+### Double-Click Prevention
+
+```typescript
+test('should not submit form twice on rapid double-click', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillName('Jane Smith');
+  await formPage.fillEmail('jane@example.com');
+
+  await formPage.submitButton.dblclick();
+
+  // Should navigate once, not show duplicate error
+  await expect(page).toHaveURL(/\/users$/);
+
+  // Verify submit button was disabled after first click
+  // or only one success toast appeared
+  const toasts = page.getByRole('alert');
+  await expect(toasts).toHaveCount(1);
+});
+```
+
+### Icon Button Actions
+
+```typescript
+test('should open edit form on row edit icon click', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickEditRow(0);
+
+  await expect(page).toHaveURL(/\/users\/[^/]+\/edit/);
+});
+```
+
+## Navigation
+
+### Route Transitions
+
+```typescript
+test('should navigate between pages via sidebar', async ({ page }) => {
+  await page.goto('/dashboard');
+  const nav = new NavigationComponent(page);
+
+  await nav.navigateTo('Users');
+  await expect(page).toHaveURL(/\/users/);
+  await expect(page.getByRole('heading', { name: /users/i })).toBeVisible();
+
+  await nav.navigateTo('Settings');
+  await expect(page).toHaveURL(/\/settings/);
+});
+```
+
+### Browser Back/Forward
+
+```typescript
+test('should support browser back and forward navigation', async ({ page }) => {
+  await page.goto('/dashboard');
+  await page.getByRole('link', { name: /users/i }).click();
+  await expect(page).toHaveURL(/\/users/);
+
+  await page.goBack();
+  await expect(page).toHaveURL(/\/dashboard/);
+
+  await page.goForward();
+  await expect(page).toHaveURL(/\/users/);
+});
+```
+
+### Deep Linking
+
+```typescript
+test('should load correct page from direct URL', async ({ page }) => {
+  await page.goto('/users');
+  await expect(page.getByRole('heading', { name: /users/i })).toBeVisible();
+  await expect(page.locator('mat-table, table')).toBeVisible();
+});
+```
+
+### Protected Routes
+
+```typescript
+test('should redirect to login when accessing protected route without auth', async ({ browser }) => {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  await page.goto('/dashboard');
+
+  await expect(page).toHaveURL(/\/login/);
+  await context.close();
+});
+
+test('should redirect back to intended page after login', async ({ browser }) => {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  await page.goto('/users');
+  await expect(page).toHaveURL(/\/login/);
+
+  await page.getByLabel('Email').fill('admin@example.com');
+  await page.getByLabel('Password').fill('SecureP@ss123');
+  await page.getByRole('button', { name: /login/i }).click();
+
+  await expect(page).toHaveURL(/\/users/);
+  await context.close();
+});
+```
+
+### 404 Page
+
+```typescript
+test('should display 404 page for unknown routes', async ({ page }) => {
+  await page.goto('/nonexistent-route');
+  await expect(page.getByText(/404|not found|page.*exist/i)).toBeVisible();
+});
+```
+
+## Modals and Dialogs
+
+### Open, Verify Content, Close
+
+```typescript
+test('should open delete confirmation dialog', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickDeleteRow(0);
+
+  const dialog = new ConfirmDialogComponent(page);
+  await expect(dialog.dialog).toBeVisible();
+  await expect(dialog.title).toContainText(/delete|confirm/i);
+  await expect(dialog.message).toContainText(/sure|permanently/i);
+});
+
+test('should close dialog on cancel', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickDeleteRow(0);
+  const dialog = new ConfirmDialogComponent(page);
+  await dialog.cancel();
+
+  await expect(dialog.dialog).not.toBeVisible();
+  // Row should still be present
+  await expect(listPage.tableRows).toHaveCount(await listPage.getRowCount());
+});
+
+test('should delete item on confirm', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+  const initialCount = await listPage.getRowCount();
+
+  await listPage.clickDeleteRow(0);
+  const dialog = new ConfirmDialogComponent(page);
+  await dialog.confirm();
+
+  await expect(dialog.dialog).not.toBeVisible();
+  await expect(page.getByRole('alert')).toContainText(/deleted|removed|success/i);
+});
+```
+
+### Close via Escape Key
+
+```typescript
+test('should close dialog with Escape key', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickDeleteRow(0);
+  const dialog = new ConfirmDialogComponent(page);
+  await expect(dialog.dialog).toBeVisible();
+
+  await dialog.closeWithEscape();
+
+  await expect(dialog.dialog).not.toBeVisible();
+});
+```
+
+### Close via Overlay Click
+
+```typescript
+test('should close dialog on backdrop click', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.clickDeleteRow(0);
+  const dialog = new ConfirmDialogComponent(page);
+  await expect(dialog.dialog).toBeVisible();
+
+  await dialog.closeWithOverlayClick();
+
+  await expect(dialog.dialog).not.toBeVisible();
+});
+```
+
+## Dropdowns and Select
+
+### Open and Select Option
+
+```typescript
+test('should select role from dropdown', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.selectRole('Admin');
+
+  // Verify selection (Angular Material)
+  await expect(formPage.roleSelect).toContainText('Admin');
+});
+```
+
+### Multi-Select
+
+```typescript
+test('should select multiple tags', async ({ page }) => {
+  await page.goto('/products/new');
+
+  const tagSelect = page.getByLabel('Tags');
+  await tagSelect.click();
+  await page.getByRole('option', { name: 'Electronics' }).click();
+  await page.getByRole('option', { name: 'Featured' }).click();
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByText('Electronics')).toBeVisible();
+  await expect(page.getByText('Featured')).toBeVisible();
+});
+```
+
+### Searchable Select / Autocomplete
+
+```typescript
+test('should filter and select from autocomplete', async ({ page }) => {
+  await page.goto('/users/new');
+
+  const cityInput = page.getByLabel('City');
+  await cityInput.fill('New');
+
+  const options = page.getByRole('option');
+  await expect(options).toHaveCount(3); // New York, New Delhi, New Orleans
+  await page.getByRole('option', { name: 'New York' }).click();
+
+  await expect(cityInput).toHaveValue('New York');
+});
+```
+
+## Tables
+
+### Sort Column
+
+```typescript
+test('should sort table by name column', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.sortByColumn('Name');
+
+  const firstCell = listPage.cellInRow(0, 'name');
+  const firstName = await firstCell.textContent();
+
+  await listPage.sortByColumn('Name'); // Sort descending
+
+  const firstCellDesc = listPage.cellInRow(0, 'name');
+  const firstNameDesc = await firstCellDesc.textContent();
+
+  expect(firstName).not.toEqual(firstNameDesc);
+});
+```
+
+### Pagination
+
+```typescript
+test('should navigate between pages', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  const firstPageLabel = await listPage.paginatorLabel.textContent();
+  await listPage.goToNextPage();
+
+  const secondPageLabel = await listPage.paginatorLabel.textContent();
+  expect(firstPageLabel).not.toEqual(secondPageLabel);
+
+  await listPage.goToPreviousPage();
+  const backToFirstLabel = await listPage.paginatorLabel.textContent();
+  expect(backToFirstLabel).toEqual(firstPageLabel);
+});
+
+test('should change page size', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.changePageSize('50');
+  const rowCount = await listPage.getRowCount();
+  expect(rowCount).toBeLessThanOrEqual(50);
+});
+```
+
+### Empty State
+
+```typescript
+test('should display empty state when no results', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.search('xyznonexistentzyx');
+
+  await expect(listPage.emptyState).toBeVisible();
+  await expect(listPage.tableRows).toHaveCount(0);
+});
+```
+
+### Loading State
+
+```typescript
+test('should show loading indicator during data fetch', async ({ page }) => {
+  const listPage = new UserListPage(page);
+
+  // Slow down API response to catch loading state
+  await page.route('**/api/users*', async route => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    await route.continue();
+  });
+
+  await listPage.goto();
+  await expect(listPage.loadingSpinner).toBeVisible();
+  await expect(listPage.loadingSpinner).not.toBeVisible({ timeout: 10000 });
+  await expect(listPage.tableRows.first()).toBeVisible();
+});
+```
+
+### Row Click
+
+```typescript
+test('should navigate to detail on row click', async ({ page }) => {
+  const listPage = new UserListPage(page);
+  await listPage.goto();
+
+  await listPage.rowByIndex(0).click();
+
+  await expect(page).toHaveURL(/\/users\/[^/]+$/);
+});
+```
+
+## Responsive
+
+### Mobile Layout
+
+```typescript
+import { test, expect, devices } from '@playwright/test';
+
+test.describe('Mobile Layout', () => {
+  test.use({ ...devices['iPhone 13'] });
+
+  test('should show hamburger menu on mobile', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    const nav = new NavigationComponent(page);
+    await expect(nav.hamburgerMenu).toBeVisible();
+    await expect(nav.sidebar).not.toBeVisible();
+  });
+
+  test('should open navigation drawer on hamburger click', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    const nav = new NavigationComponent(page);
+    await nav.toggleSidebar();
+    await expect(nav.sidebar).toBeVisible();
+  });
+
+  test('should close drawer after navigation', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    const nav = new NavigationComponent(page);
+    await nav.toggleSidebar();
+    await nav.navigateTo('Users');
+
+    await expect(page).toHaveURL(/\/users/);
+    await expect(nav.sidebar).not.toBeVisible();
+  });
+
+  test('should stack form fields vertically on mobile', async ({ page }) => {
+    await page.goto('/users/new');
+
+    const nameInput = page.getByLabel('Name');
+    const emailInput = page.getByLabel('Email');
+
+    const nameBox = await nameInput.boundingBox();
+    const emailBox = await emailInput.boundingBox();
+
+    // Fields should be stacked (email below name)
+    expect(emailBox!.y).toBeGreaterThan(nameBox!.y);
+  });
+});
+```
+
+### Tablet Layout
+
+```typescript
+test.describe('Tablet Layout', () => {
+  test.use({ viewport: { width: 768, height: 1024 } });
+
+  test('should show collapsed sidebar on tablet', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    const nav = new NavigationComponent(page);
+    const sidebarBox = await nav.sidebar.boundingBox();
+
+    // Collapsed sidebar should be narrow (icons only)
+    expect(sidebarBox!.width).toBeLessThan(100);
+  });
+});
+```
+
+## Accessibility
+
+### Keyboard Navigation
+
+```typescript
+test('should navigate form fields with Tab', async ({ page }) => {
+  await page.goto('/users/new');
+
+  await page.keyboard.press('Tab');
+  await expect(page.getByLabel('Name')).toBeFocused();
+
+  await page.keyboard.press('Tab');
+  await expect(page.getByLabel('Email')).toBeFocused();
+
+  await page.keyboard.press('Tab');
+  await expect(page.getByLabel('Phone')).toBeFocused();
+});
+
+test('should submit form with Enter key', async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  await loginPage.goto();
+
+  await loginPage.fillEmail('admin@example.com');
+  await loginPage.fillPassword('SecureP@ss123');
+  await page.keyboard.press('Enter');
+
+  await expect(page).toHaveURL(/\/dashboard/);
+});
+```
+
+### ARIA Labels
+
+```typescript
+test('should have proper ARIA labels on interactive elements', async ({ page }) => {
+  await page.goto('/users');
+
+  // Buttons should have accessible names
+  const addButton = page.getByRole('button', { name: /add|create/i });
+  await expect(addButton).toBeVisible();
+
+  // Table should have proper role
+  await expect(page.getByRole('table')).toBeVisible();
+
+  // Column headers should have sort indicators
+  const sortableHeader = page.getByRole('columnheader', { name: /name/i });
+  await expect(sortableHeader).toHaveAttribute('aria-sort', /(ascending|descending|none)/);
+});
+```
+
+### Axe Accessibility Audit
+
+```typescript
+import AxeBuilder from '@axe-core/playwright';
+
+test('should have no accessibility violations on user list page', async ({ page }) => {
+  await page.goto('/users');
+
+  const results = await new AxeBuilder({ page })
+    .withTags(['wcag2a', 'wcag2aa'])
+    .analyze();
+
+  expect(results.violations).toEqual([]);
+});
+
+test('should have no accessibility violations on form page', async ({ page }) => {
+  await page.goto('/users/new');
+
+  const results = await new AxeBuilder({ page })
+    .withTags(['wcag2a', 'wcag2aa'])
+    .exclude('.third-party-widget') // Exclude elements you can't control
+    .analyze();
+
+  expect(results.violations).toEqual([]);
+});
+```
+
+### Focus Management
+
+```typescript
+test('should return focus to trigger element after dialog closes', async ({ page }) => {
+  await page.goto('/users');
+
+  const deleteButton = page.getByRole('button', { name: /delete/i }).first();
+  await deleteButton.click();
+
+  const dialog = new ConfirmDialogComponent(page);
+  await dialog.cancel();
+
+  await expect(deleteButton).toBeFocused();
+});
+
+test('should trap focus inside open modal', async ({ page }) => {
+  await page.goto('/users');
+
+  await page.getByRole('button', { name: /delete/i }).first().click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+
+  // Tab through all focusable elements in dialog
+  await page.keyboard.press('Tab');
+  const focused1 = await page.evaluate(() => document.activeElement?.closest('[role="dialog"]'));
+  expect(focused1).not.toBeNull();
+
+  await page.keyboard.press('Tab');
+  const focused2 = await page.evaluate(() => document.activeElement?.closest('[role="dialog"]'));
+  expect(focused2).not.toBeNull();
+});
+```
+
+## Auth Flows
+
+### Login
+
+```typescript
+test.describe('Login Flow', () => {
+  test('should login and redirect to dashboard', async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    await loginPage.login('admin@example.com', 'SecureP@ss123');
+
+    await expect(page).toHaveURL(/\/dashboard/);
+    await expect(page.getByText(/welcome|dashboard/i)).toBeVisible();
+  });
+
+  test('should show error for invalid credentials', async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    await loginPage.goto();
+
+    await loginPage.login('wrong@example.com', 'WrongPass');
+
+    await expect(page).toHaveURL(/\/login/);
+    await expect(loginPage.generalError).toBeVisible();
+  });
+});
+```
+
+### Logout
+
+```typescript
+test('should logout and redirect to login', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  const nav = new NavigationComponent(page);
+  await nav.logout();
+
+  await expect(page).toHaveURL(/\/login/);
+});
+
+test('should not access protected routes after logout', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  const nav = new NavigationComponent(page);
+  await nav.logout();
+
+  await page.goto('/users');
+  await expect(page).toHaveURL(/\/login/);
+});
+```
+
+### Session Expiry
+
+```typescript
+test('should handle expired session gracefully', async ({ page }) => {
+  await page.goto('/dashboard');
+
+  // Clear auth tokens to simulate session expiry
+  await page.evaluate(() => {
+    localStorage.removeItem('authToken');
+    sessionStorage.removeItem('authToken');
+  });
+
+  // Next API call should trigger redirect
+  await page.goto('/users');
+  await expect(page).toHaveURL(/\/login/);
+});
+```
+
+### Role-Based Visibility
+
+```typescript
+test('should hide admin-only elements for regular users', async ({ page }) => {
+  // Login as regular user
+  await page.goto('/login');
+  await page.getByLabel('Email').fill('user@example.com');
+  await page.getByLabel('Password').fill('UserP@ss123');
+  await page.getByRole('button', { name: /login/i }).click();
+
+  await page.goto('/users');
+
+  // Delete button should not be visible for regular users
+  await expect(page.getByRole('button', { name: /delete/i })).not.toBeVisible();
+
+  // Settings link should not be in nav
+  const nav = new NavigationComponent(page);
+  await expect(nav.navLink('Settings')).not.toBeVisible();
+});
+```
+
+## Error Handling
+
+### API Failure
+
+```typescript
+test('should display error message when API fails', async ({ page }) => {
+  // Mock API failure
+  await page.route('**/api/users*', route => {
+    route.fulfill({
+      status: 500,
+      contentType: 'application/json',
+      body: JSON.stringify({ message: 'Internal Server Error' }),
+    });
+  });
+
+  await page.goto('/users');
+
+  await expect(page.getByText(/error|failed|something went wrong/i)).toBeVisible();
+});
+
+test('should offer retry option on API failure', async ({ page }) => {
+  let callCount = 0;
+
+  await page.route('**/api/users*', route => {
+    callCount++;
+    if (callCount === 1) {
+      route.fulfill({ status: 500, body: '{}' });
+    } else {
+      route.continue();
+    }
+  });
+
+  await page.goto('/users');
+  await expect(page.getByText(/error|failed/i)).toBeVisible();
+
+  await page.getByRole('button', { name: /retry|try again/i }).click();
+  await expect(page.locator('mat-table, table')).toBeVisible();
+});
+```
+
+### Network Offline
+
+```typescript
+test('should show offline indicator when network is down', async ({ page, context }) => {
+  await page.goto('/dashboard');
+
+  await context.setOffline(true);
+
+  // Trigger a navigation or action that needs network
+  await page.getByRole('link', { name: /users/i }).click();
+
+  await expect(page.getByText(/offline|network|connection/i)).toBeVisible();
+
+  await context.setOffline(false);
+});
+```
+
+### Form Submit API Error
+
+```typescript
+test('should display server error on form submit failure', async ({ page }) => {
+  await page.route('**/api/users', route => {
+    if (route.request().method() === 'POST') {
+      route.fulfill({
+        status: 422,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          message: 'A user with this email already exists',
+        }),
+      });
+    } else {
+      route.continue();
+    }
+  });
+
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillAndSubmit({
+    name: 'Jane Smith',
+    email: 'existing@example.com',
+  });
+
+  await expect(page.getByRole('alert')).toContainText(/already exists|duplicate/i);
+  // Should stay on form page, not navigate away
+  await expect(page).toHaveURL(/\/users\/new/);
+});
+```
+
+## File Upload
+
+```typescript
+test('should upload avatar image', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoEdit('123');
+
+  const fileChooserPromise = page.waitForEvent('filechooser');
+  await page.getByRole('button', { name: /upload|choose.*file/i }).click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles('e2e/fixtures/avatar.png');
+
+  await expect(page.getByRole('img', { name: /avatar|preview/i })).toBeVisible();
+});
+
+test('should reject files exceeding size limit', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoEdit('123');
+
+  // Use setInputFiles directly for input[type="file"]
+  await formPage.avatarFileInput.setInputFiles('e2e/fixtures/large-file.png');
+
+  await expect(page.getByText(/too large|max.*size|exceeds/i)).toBeVisible();
+});
+
+test('should reject unsupported file types', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoEdit('123');
+
+  await formPage.avatarFileInput.setInputFiles('e2e/fixtures/document.exe');
+
+  await expect(page.getByText(/unsupported|invalid.*type|allowed/i)).toBeVisible();
+});
+```
+
+## Tabs
+
+```typescript
+test('should switch between tabs', async ({ page }) => {
+  await page.goto('/users/123');
+
+  await page.getByRole('tab', { name: /profile/i }).click();
+  await expect(page.getByRole('tabpanel')).toContainText(/name|email/i);
+
+  await page.getByRole('tab', { name: /activity/i }).click();
+  await expect(page.getByRole('tabpanel')).toContainText(/log|history/i);
+
+  await page.getByRole('tab', { name: /settings/i }).click();
+  await expect(page.getByRole('tabpanel')).toContainText(/preferences|notification/i);
+});
+
+test('should navigate tabs with keyboard', async ({ page }) => {
+  await page.goto('/users/123');
+
+  await page.getByRole('tab', { name: /profile/i }).focus();
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('tab', { name: /activity/i })).toBeFocused();
+
+  await page.keyboard.press('ArrowRight');
+  await expect(page.getByRole('tab', { name: /settings/i })).toBeFocused();
+});
+```
+
+## Notifications / Toasts
+
+```typescript
+test('should show success toast after save', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillAndSubmit({
+    name: 'Jane Smith',
+    email: 'jane@example.com',
+  });
+
+  const toast = page.getByRole('alert');
+  await expect(toast).toBeVisible();
+  await expect(toast).toContainText(/success|created|saved/i);
+});
+
+test('should auto-dismiss toast after timeout', async ({ page }) => {
+  const formPage = new UserFormPage(page);
+  await formPage.gotoCreate();
+
+  await formPage.fillAndSubmit({
+    name: 'Jane Smith',
+    email: 'jane@example.com',
+  });
+
+  const toast = page.getByRole('alert');
+  await expect(toast).toBeVisible();
+  await expect(toast).not.toBeVisible({ timeout: 10000 });
+});
+```