openspec-playwright 0.1.72 → 0.1.74

package/.claude/skills/openspec-e2e/SKILL.md

@@ -16,7 +16,9 @@ metadata:
 
 ## Output
 
-- **Test file**: `tests/playwright/<name>.spec.ts` (e.g. `app-all.spec.ts` for "all")
+- **Test file**: `tests/playwright/<name>.spec.ts`
+- **Page Objects** (all mode): `tests/playwright/pages/<Route>Page.ts`
+- **Auth setup**: `tests/playwright/auth.setup.ts` (if auth required)
 - **Auth setup**: `tests/playwright/auth.setup.ts` (if auth required)
 - **Report**: `openspec/reports/playwright-e2e-<name>-<timestamp>.md`
 - **Test plan**: `openspec/changes/<name>/specs/playwright/test-plan.md` (change mode only)
@@ -25,20 +27,14 @@ metadata:
 
 Two modes, same pipeline:
 
-| Mode   | Command            | Route source             | Output            |
-| ------ | ------------------ | ------------------------ | ----------------- |
-| Change | `/opsx:e2e <name>` | OpenSpec specs           | `<name>.spec.ts`  |
-| All    | `/opsx:e2e all`    | sitemap + homepage crawl | `app-all.spec.ts` |
+| Mode   | Command            | Route source             | Output                         |
+| ------ | ------------------ | ------------------------ | ------------------------------- |
+| Change | `/opsx:e2e <name>` | OpenSpec specs           | `<name>.spec.ts`                |
+| All    | `/opsx:e2e all`    | sitemap + homepage crawl | `pages/*.ts` (Page Objects)     |
 
 Both modes update `app-knowledge.md` and `app-exploration.md`. All `.spec.ts` files run together as regression suite.
 
-**Role mapping** (Playwright Test Agents terminology):
-
-| Role      | This SKILL | What it does                                                 |
-| --------- | ---------- | ------------------------------------------------------------ |
-| Planner   | Step 4–5   | Explores app via Playwright MCP → produces test-plan.md      |
-| Generator | Step 6     | Transforms test-plan.md → `.spec.ts` with verified selectors |
-| Healer    | Step 9     | Executes tests, repairs failures via Playwright MCP          |
+> **Role mapping**: Planner (Step 4–5) → test-plan.md; Generator (Step 6) → `.spec.ts` + Page Objects; Healer (Step 9) → repairs failures via MCP.
 
 ## Testing principles
 
@@ -77,7 +73,8 @@ Can this be tested through the UI?
 
 **"all" mode** (`/opsx:e2e all` — no OpenSpec needed):
 
-- Announce: "Mode: full app exploration"
+- Announce: "Mode: full app exploration + Page Object discovery"
+- **Goal**: Discover new routes, extract selectors, and build `pages/*.ts` Page Objects — accumulated asset for future Change tests
 - Discover routes via:
   1. Navigate to `${BASE_URL}/sitemap.xml` (if exists)
   2. Navigate to `${BASE_URL}/` → extract all links from snapshot
@@ -144,6 +141,9 @@ browser_navigate → browser_console_messages → browser_snapshot → browser_t
 | JS error in console           | App runtime error                 | **STOP** — tell user: "Page has JS errors. Fix them, then re-run /opsx:e2e."                  |
 | HTTP 404                      | Route not in app (metadata issue) | Continue — mark `⚠️ route not found` in app-exploration.md                                    |
 | Auth required, no credentials | Missing auth setup                | Continue — skip protected routes, explore login page                                          |
+| Suspicious network request     | API returned 4xx/5xx             | Continue — mark `⚠️ API error: <endpoint> returned <code>` in app-exploration.md               |
+
+**Network monitoring**: After navigating, use `browser_network_requests` to check for failed API calls. Failed requests (status ≥ 400) on a route indicate an API/backend issue — record in `app-exploration.md` for reference.
 
 **For guest routes** (no auth):
 
@@ -184,6 +184,98 @@ From `browser_snapshot` output, extract **interactive elements** for each route:
 | **Headings**         | text content, selector               | for assertions                                             |
 | **Error messages**   | text patterns, selector              | for error path testing                                     |
 | **Dynamic content**  | structure — row counts, card layouts | for data-driven tests                                      |
+| **Special elements** | type, selector, dimensions           | for canvas/iframe/Shadow DOM test strategies               |
+
+#### 4.3.1. Detect special elements
+
+From `browser_snapshot` + `browser_evaluate`, identify these special elements per route:
+
+**Special element detection matrix:**
+
+| Element | Snapshot signal | Evaluate supplement                            | Exploration priority |
+| ------- | --------------- | ---------------------------------------------- | ------------------- |
+| `<canvas>` | `role="img"`, `tagName="CANVAS"` | `canvas.getContext('2d'/'webgl')`, `width`, `height` | High |
+| `<iframe>` | `role="iframe"`, `src` attribute | `frameLocator` available | High |
+| CAPTCHA | `.g-recaptcha`, `.h-captcha`, `[data-sitekey]`, canvas+slider | recaptcha score via API (if configured) | High |
+| OTP / SMS | 6-digit input, countdown timer | Check if dev bypass exists | High |
+| Shadow DOM | `role="generic"` with no children | Check `shadowRoot` via evaluate | Medium |
+| Rich text editor | `[contenteditable]`, `role="textbox"` | `innerHTML`, `getContent()` | Medium |
+| Video / Audio | `role="application"` or name contains "video"/"audio" | `evaluate` checks both `<video>` and `<audio>` tags | Medium |
+| File upload | `<input type="file">` | `accept` attribute, `multiple` flag | Medium |
+| Drag-and-drop | drag events in JS | Simulate DnD via coordinate clicks | Low |
+| Date picker | specific `data-testid` or class patterns | Click triggers → evaluate value | Low (skip unless specs mention) |
+| Infinite scroll | Dynamic row insertion | Count elements before/after scroll | Low |
+| WebSocket / SSE | No DOM signal | Check `browser_console_messages` for WS events | Low |
+
+**For each detected special element, capture:**
+
+```javascript
+// Canvas — get metadata (check WebGL first to avoid consuming 2D context)
+const canvasData = await browser_evaluate(() => {
+  const c = document.querySelector('canvas');
+  if (!c) return null;
+  // getContext consumes the context — check WebGL2 first, then WebGL1, then 2D
+  let context = 'unknown';
+  if (c.getContext('webgl2')) context = 'webgl2';
+  else if (c.getContext('webgl')) context = 'webgl';
+  else if (c.getContext('2d')) context = '2d';
+  return {
+    id: c.id || '',
+    context,
+    width: c.width,
+    height: c.height,
+  };
+});
+
+// Iframe — record frameLocator
+// Note: iframe has src or name attribute
+
+// Rich text editor — get content
+const editorContent = await browser_evaluate(() => {
+  const el = document.querySelector('[contenteditable]');
+  return el ? { tag: el.tagName, content: el.innerHTML, length: el.textContent.length } : null;
+});
+
+// Video / Audio — get state via evaluate (snapshot doesn't expose tagName)
+const mediaState = await browser_evaluate(() => {
+  const v = document.querySelector('video');
+  if (v) return { type: 'video', paused: v.paused, duration: v.duration };
+  const a = document.querySelector('audio');
+  if (a) return { type: 'audio', paused: a.paused, duration: a.duration };
+  return null;
+});
+
+// contenteditable — detect via evaluate
+const isContentEditable = await browser_evaluate(() => {
+  const el = document.querySelector('[contenteditable]');
+  return !!el;
+});
+
+// CAPTCHA — detect type
+const captchaInfo = await browser_evaluate(() => {
+  const recaptcha = document.querySelector('.g-recaptcha, [data-sitekey]');
+  if (recaptcha) return { type: 'recaptcha', sitekey: recaptcha.getAttribute('data-sitekey') };
+  const hcaptcha = document.querySelector('.h-captcha');
+  if (hcaptcha) return { type: 'hcaptcha', sitekey: hcaptcha.getAttribute('data-sitekey') };
+  const turnstile = document.querySelector('[data-sitekey*="cloudflare"]');
+  if (turnstile) return { type: 'turnstile' };
+  const canvas = document.querySelector('canvas[class*="captcha"]');
+  if (canvas) return { type: 'canvas-captcha' };
+  const slider = document.querySelector('[class*="slider"], [class*="drag"]');
+  if (slider) return { type: 'slider-captcha' };
+  return null;
+});
+
+// OTP input — detect
+const otpInfo = await browser_evaluate(() => {
+  const inputs = document.querySelectorAll('input');
+  const otpInputs = Array.from(inputs).filter(i => i.maxLength === 1 && i.type === 'text' || i.type === 'tel');
+  if (otpInputs.length >= 4) return { type: 'otp-sms', digits: otpInputs.length };
+  return null;
+});
+```
+
+Record findings in `app-exploration.md` → **Special Elements Detected** table.
 
 #### 4.4. Write app-exploration.md
 
@@ -237,7 +329,16 @@ Read `tests/playwright/app-knowledge.md` as context for cross-change patterns.
 
 ### 5. Generate test plan
 
-> **"all" mode: skip this step — go directly to Step 6.**
+> **"all" mode: skip this step.** No OpenSpec specs → no test-plan to generate. All mode skips test-plan verification — Page Objects are discovered incrementally from exploration, not from structured specs.
+
+**All mode — brief confirmation before Step 6:**
+```
+## All Mode: Page Object Discovery
+Discovered <N> routes (<M> guest, <K> protected)
+Special elements: <element summary>
+Ready to generate Page Objects for: <page-name>Page.ts, <page-name>Page.ts, ...
+Reply **yes** to proceed, or tell me to exclude routes or adjust strategies.
+```
 
 **Change mode — prerequisite**: If `openspec/changes/<name>/specs/playwright/app-exploration.md` does not exist → **STOP**. Run Step 4 (explore application) before generating tests. Without real DOM data from exploration, selectors are guesses and tests will be fragile.
 
@@ -251,13 +352,62 @@ Template: `templates/test-plan.md`
 
 **Idempotency**: If test-plan.md exists → read and use, do NOT regenerate.
 
+**⚠️ Human verification — STOP before generating code.**
+
+After creating (or reading existing) test-plan.md, **stop and display the test plan summary** for user confirmation:
+
+**Output format** — show the test plan in markdown directly in the conversation:
+
+````markdown
+## Test Plan Summary: `<change-name>`
+
+**Auth**: required / not required | Roles: ...
+
+### Test Cases
+- ✅ `<test-name>` — `<route>`, happy path
+- ✅ `<test-name>` — `<route>`, error path: `<error condition>`
+
+### Special Elements
+- ⚠️ **CAPTCHA** at `<route>` — strategy: `auth.setup bypass / skip / api-only`
+- ⚠️ **Canvas/WebGL** at `<route>` — strategy: screenshot + dimensions
+- ⚠️ **OTP** at `<route>` — strategy: test credentials / dev bypass
+- ⚠️ **Iframe** at `<route>` — strategy: frameLocator + assert inner content
+- ⚠️ **Video/Audio** at `<route>` — strategy: play() + assert !paused
+- ⚠️ **File Upload** at `<route>` — strategy: setInputFiles + assert upload
+- ⚠️ **Drag-and-Drop** at `<route>` — strategy: dragAndDrop or evaluate events
+- ⚠️ **WebSocket/SSE** at `<route>` — strategy: waitForResponse + waitForFunction
+
+### Not Covered
+- `<element or scenario not testable>`
+````
+
+Then ask: "Does this coverage match your intent? Reply **yes** to proceed, or tell me what to add/change."
+
+**Why this matters**: Step 5 is the last human-reviewable checkpoint before code generation. Once test code is written, fixes address *how* tests run, not *what* they verify. Reviewing the test plan takes seconds and catches logic errors that Healer cannot fix.
+
+**Confirmation criteria**:
+- All scenarios from OpenSpec specs are covered
+- Special elements (Canvas, Iframe, Video, Audio, CAPTCHA, OTP, File Upload, Drag-drop, WebSocket) have correct automation strategy
+- Auth states and roles are accurate
+- Nothing important is missing
+
+If the user requests changes → update test-plan.md → re-display summary → re-confirm → proceed.
+
 ### 6. Generate test file
 
-**"all" mode** → `tests/playwright/app-all.spec.ts` (smoke regression):
+**"all" mode**: Build and expand Page Objects for future Change tests.
 
-- For each discovered route: navigate → assert HTTP 200 → assert ready signal visible
-- No detailed assertions — just "this page loads without crashing"
-- This is a regression baseline — catches when existing pages break
+**Prerequisite**: If `app-exploration.md` does not exist → **STOP**. Run Step 4 first. All mode explores routes via browser MCP to build exploration data.
+
+For each discovered route:
+
+1. Read existing `pages/<Route>Page.ts` (if any — incremental, not overwrite)
+2. Navigate to route with correct auth state
+3. browser_snapshot to extract interactive elements (see 4.3 table)
+4. Write or update `pages/<Route>Page.ts` — extend with newly discovered elements
+5. Also write `tests/playwright/app-all.spec.ts` — smoke test (route loads without crash)
+
+**Output priority**: Page Objects (`pages/*.ts`) are the primary asset. Smoke test is secondary. Existing Page Objects are never overwritten — only extended.
 
 **Change mode** → `tests/playwright/<name>.spec.ts` (functional):
 
@@ -274,6 +424,124 @@ Template: `templates/test-plan.md`
 
 **Test coverage — empty states**: For list/detail pages, explore the empty state. If the app shows a "no data" UI when the list is empty, generate a test to verify it. Empty states are often missing from specs but are real user paths.
 
+**Test coverage — special elements**: Check `app-exploration.md` → **Special Elements Detected** table. For each special element:
+
+```typescript
+// Canvas — screenshot + dimensions
+test('canvas renders with correct dimensions', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const canvas = page.locator('canvas');
+  await expect(canvas).toBeVisible();
+  const box = await canvas.boundingBox();
+  expect(box.width).toBeGreaterThan(0);
+  await canvas.screenshot({ path: '__screenshots__/canvas.png' });
+});
+
+// Canvas — 2D pixel verification
+test('canvas 2D content is not blank', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const hasContent = await page.evaluate(() => {
+    const c = document.querySelector('canvas');
+    if (!c) return false;
+    const ctx = c.getContext('2d');
+    if (!ctx) return false;
+    const data = ctx.getImageData(0, 0, c.width, c.height).data;
+    return data.some((v, i) => i % 4 !== 3 && v !== 0); // non-transparent non-black pixel
+  });
+  expect(hasContent).toBe(true);
+});
+
+// Canvas — WebGL screenshot
+test('canvas WebGL renders', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const canvas = page.locator('canvas');
+  await expect(canvas).toBeVisible();
+  await canvas.screenshot({ path: '__screenshots__/webgl.png' });
+  // No pixel comparison — WebGL rendering may vary
+});
+
+// Iframe — switch context
+test('iframe content is accessible', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const frame = page.frameLocator('iframe[name="<name>"]');
+  await expect(frame.locator('<selector-inside-frame>')).toBeVisible();
+});
+
+// Rich text editor — evaluate content
+test('editor content persists', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const editor = page.locator('[contenteditable]');
+  await editor.click();
+  await page.keyboard.type('Hello E2E');
+  const content = await page.evaluate(() => {
+    const el = document.querySelector('[contenteditable]');
+    return el?.textContent;
+  });
+  expect(content).toContain('Hello E2E');
+});
+
+// Video — playback state
+test('video can be played', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const video = page.locator('video');
+  await expect(video).toBeVisible();
+  await video.evaluate((v: HTMLVideoElement) => { v.play(); });
+  const isPlaying = await video.evaluate((v: HTMLVideoElement) => !v.paused);
+  expect(isPlaying).toBe(true);
+});
+
+// Audio — playback state
+test('audio can be played', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  const audio = page.locator('audio');
+  await expect(audio).toBeVisible();
+  await audio.evaluate((a: HTMLAudioElement) => { a.play(); });
+  const isPlaying = await audio.evaluate((a: HTMLAudioElement) => !a.paused);
+  expect(isPlaying).toBe(true);
+});
+```
+
+See `templates/test-plan.md` → **Special Element Test Cases** for full templates including Canvas, Video, Audio, Iframe, and Rich Text Editor.
+
+**Test coverage — AI-opaque elements**: For CAPTCHA, OTP, slider CAPTCHA, file upload, and drag-drop — elements that Playwright cannot reliably automate:
+
+1. Mark the element in `app-exploration.md` → **Special Elements Detected** table with type and automation strategy
+2. Generate the test using the appropriate strategy from `templates/test-plan.md` → **AI-Opaque Elements** section:
+   - **CAPTCHA**: Bypass via `auth.setup.ts` storageState, or skip with `test.skip()`, or verify via API
+   - **OTP**: Use pre-verified test credentials (`E2E_OTP_CODE` env var), or development bypass flag
+   - **File upload**: Use `page.setInputFiles()` with fixture files
+   - **Drag-drop**: Use `page.dragAndDrop()` or `page.evaluate()` with custom event dispatching
+3. If the element is truly non-automatable, write `test.skip()` with a comment explaining why, and mark with `/handoff` for manual testing
+
+**Test coverage — performance**: Verify Core Web Vitals metrics. If the app specifies performance targets, generate a test:
+
+```typescript
+// Performance — Core Web Vitals
+test('page loads within performance budget', async ({ page }) => {
+  await page.goto(`${BASE_URL}/<route>`);
+  await expect(page.getByRole('heading')).toBeVisible();
+  const timings = await page.evaluate(() => {
+    const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+    return {
+      ttfb: nav.responseStart - nav.requestStart,
+      lcp: nav.loadEventEnd - nav.requestStart,
+    };
+  });
+  expect(timings.ttfb).toBeLessThan(500);
+  expect(timings.lcp).toBeLessThan(2500);
+});
+```
+
+```typescript
+// 🚫 Avoid for special elements:
+await canvas.screenshot() // screenshot alone — no dimension/size assertion
+await expect(canvas).toHaveScreenshot() // pixel-to-pixel comparison for WebGL
+
+// ✅ Always:
+const box = await canvas.boundingBox();
+expect(box.width).toBeGreaterThan(0);
+```
+
 **Output format**:
 
 - Follow `seed.spec.ts` structure
@@ -281,52 +549,110 @@ Template: `templates/test-plan.md`
 - Each test: `test('描述性名称', async ({ page }) => { ... })`
 - Prefer `data-testid` selectors (see 4.3 table)
 
+#### 6.1. Use BasePage for shared navigation and selectors
+
+Read `tests/playwright/pages/BasePage.ts` for shared utilities:
+- `goto(path)` — navigation with configurable `waitUntil`
+- `byTestId(id)`, `byRole(role, opts)`, `byLabel(label)`, `byText(text)`, `byPlaceholder(text)` — selector helpers in priority order
+- `click(locator)`, `fill(locator, value)` — safe interactions with built-in `scrollIntoViewIfNeeded`
+- `waitForToast(text?)`, `waitForLoad(spinnerSelector?)` — wait utilities
+- `reload()` — page reload with hydration
+
+**AppPage pattern** — extend BasePage for page-specific selectors:
+
+```typescript
+// tests/playwright/pages/LoginPage.ts
+import { BasePage } from './BasePage';
+import type { Page } from '@playwright/test';
+
+export class LoginPage extends BasePage {
+  get usernameInput() { return this.byLabel('用户名'); }
+  get passwordInput() { return this.byLabel('密码'); }
+  get submitBtn() { return this.byRole('button', { name: '登录' }); }
+
+  constructor(page: Page) { super(page); }
+
+  async login(user: string, pass: string) {
+    await this.goto('/login');
+    await this.usernameInput.fill(user);
+    await this.passwordInput.fill(pass);
+    await this.submitBtn.click();
+  }
+}
+```
+
+```typescript
+// tests/playwright/<name>.spec.ts
+import { LoginPage } from '../pages/LoginPage';
+
+test('user can login', async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  await loginPage.login('user@example.com', 'password123');
+  await loginPage.expectURL(/dashboard/);
+});
+```
+
+**If a shared page object doesn't exist yet**: define it inline in the spec AND write it to `tests/playwright/pages/<PageName>.ts` so future tests can reuse it.
+
+#### 6.2. Selector anti-patterns
+
+```typescript
+// 🚫 Fragile — CSS class selectors break on style refactors
+page.locator('.notification-bell')
+page.locator('.header-bar')
+page.locator('.skeleton-overlay')
+
+// ✅ Robust — semantic selectors survive style changes
+page.getByRole('button', { name: '通知' })
+page.getByTestId('header-bar')
+page.getByText('加载中')
+
+// 🚫 Fragile — CSS ID selectors can duplicate in React HMR
+page.locator('#avatarBtn')
+page.locator('#userAvatarBtn')
+
+// ✅ Robust — prefer role/label/testid over CSS ID
+page.getByTestId('user-avatar')
+page.getByRole('button', { name: '用户菜单' })
+
+// 🚫 Missing wait — leads to random CI failures
+await page.locator('.submit-btn').click();
+
+// ✅ Safe — scroll into view first
+await page.locator('.submit-btn').scrollIntoViewIfNeeded();
+await page.locator('.submit-btn').click();
+
+// ✅ Better — use BasePage click with built-in wait
+const app = new AppPage(page);
+await app.click(app.byRole('button', { name: '提交' }));
+```
+
 **Code examples — UI first:**
 
 ```typescript
-// ✅ UI 测试 — 用户在界面上的真实操作
+// ✅ UI 测试
 await page.goto(`${BASE_URL}/orders`);
 await page.getByRole("button", { name: "新建订单" }).click();
 await page.getByLabel("订单名称").fill("Test Order");
 await page.getByRole("button", { name: "提交" }).click();
 await expect(page.getByText("订单创建成功")).toBeVisible();
 
-// ✅ Error path — 通过 UI 触发错误
+// ✅ Error path
 await page.goto(`${BASE_URL}/orders`);
-await page.getByRole("button", { name: "新建订单" }).click();
 await page.getByRole("button", { name: "提交" }).click();
 await expect(page.getByRole("alert")).toContainText("名称不能为空");
 
-// ✅ API fallback — 仅在 UI 无法触发时使用
+// ✅ API fallback (only when UI cannot reach the scenario)
 const res = await page.request.get(`${BASE_URL}/api/orders/99999`);
 expect(res.status()).toBe(404);
-```
 
-```typescript
-// 🚫 False Pass — 元素不存在时静默跳过
-if (await btn.isVisible().catch(() => false)) { ... }
-
-// ✅ CORRECT
-await expect(page.getByRole('button', { name: '取消' })).toBeVisible();
-
-// 🚫 用 API 替代 UI — 失去了端到端的意义
-const res = await page.request.post(`${BASE_URL}/api/login`, { data: credentials });
-
-// ✅ CORRECT — 通过 UI 登录
-await page.goto(`${BASE_URL}/login`);
-await page.getByLabel('邮箱').fill(process.env.E2E_USERNAME);
-await page.getByLabel('密码').fill(process.env.E2E_PASSWORD);
-await page.getByRole('button', { name: '登录' }).click();
-await expect(page).toHaveURL(/dashboard/);
-```
-
-```typescript
-// ✅ Fresh browser context for auth guard
-test("unauthenticated user redirected to login", async ({ browser }) => {
+// ✅ Auth guard — fresh browser context (no cookies)
+test("redirects to login when unauthenticated", async ({ browser }) => {
   const freshPage = await browser.newContext().newPage();
   await freshPage.goto(`${BASE_URL}/dashboard`);
   await expect(freshPage).toHaveURL(/login|auth/);
 });
+
 // ✅ Session — logout clears protected state
 await page.getByRole("button", { name: "退出登录" }).click();
 await expect(page).toHaveURL(/login|auth/);
@@ -334,21 +660,17 @@ const freshPage2 = await browser.newContext().newPage();
 await freshPage2.goto(`${BASE_URL}/dashboard`);
 await expect(freshPage2).toHaveURL(/login|auth/); // session revoked
 
-// ✅ Browser history — SPA back/forward navigation
+// ✅ Browser history — SPA back/forward
 await page.goto(`${BASE_URL}/list`);
 await page.getByRole("link", { name: "详情" }).first().click();
 await expect(page).toHaveURL(/detail/);
 await page.goBack();
 await expect(page).toHaveURL(/list/);
-await page.goForward();
-await expect(page).toHaveURL(/detail/);
 
-// ✅ File uploads — UI 操作
+// ✅ File uploads
 await page.locator('input[type="file"]').setInputFiles("/path/to/file.pdf");
 ```
 
-Always include error path tests: UI validation messages, network failure, invalid input. Use `page.request` only for scenarios confirmed unreachable via UI.
-
 If the file exists → diff against test-plan, add only missing test cases.
 
 ### 7. Configure auth (if required)
@@ -406,13 +728,12 @@ If tests fail → use Playwright MCP tools to inspect UI, fix selectors, re-run.
 
 **Healer MCP tools** (in order of use):
 
-<!-- MCP_VERSION: 0.0.70 -->
-
 | Tool                       | Purpose                                         |
 | -------------------------- | ----------------------------------------------- |
 | `browser_navigate`         | Go to the failing test's page                   |
 | `browser_snapshot`         | Get page structure to find equivalent selectors |
 | `browser_console_messages` | Diagnose JS errors that may cause failures      |
+| `browser_network_requests` | Diagnose backend/API failures (4xx/5xx)          |
 | `browser_take_screenshot`  | Visually compare before/after fixes             |
 | `browser_run_code`         | Execute custom fix logic (optional)             |
 
@@ -423,7 +744,7 @@ If tests fail → use Playwright MCP tools to inspect UI, fix selectors, re-run.
 
 | Failure type                 | Signal                                  | Action                                                |
 | ---------------------------- | --------------------------------------- | ----------------------------------------------------- |
-| **Network/backend**          | `fetch failed`, `net::ERR`, 5xx         | `browser_console_messages` → `test.skip()`            |
+| **Network/backend**          | `fetch failed`, `net::ERR`, 4xx/5xx | `browser_network_requests` → `browser_console_messages` → `test.skip()` |
 | **Selector changed**         | Element not found                       | `browser_snapshot` → fix selector → re-run            |
 | **Assertion mismatch**       | Wrong content/value                     | `browser_snapshot` → compare → fix assertion → re-run |
 | **Timing issue**             | `waitFor`/`page.evaluate` timeout       | Switch to `request` API or add `waitFor` → re-run     |
@@ -434,14 +755,12 @@ If tests fail → use Playwright MCP tools to inspect UI, fix selectors, re-run.
 
 ### 10. False Pass Detection
 
-Run after test suite completes (even if all pass). Common patterns (see Step 6 Anti-Pattern Warnings for fixes):
+Run after test suite completes (even if all pass). Common patterns:
 
 - **Conditional visibility**: `if (locator.isVisible().catch(() => false))` — if test passes, locator may not exist
 - **Too fast**: < 200ms for a complex flow is suspicious
 - **No fresh auth context**: Protected routes without `browser.newContext()`
 
-Report any gaps in a **⚠️ Coverage Gap** section.
-
 ### 11. Report results
 
 Read report at `openspec/reports/playwright-e2e-<name>-<timestamp>.md`. Present:
@@ -460,22 +779,16 @@ Reference: `templates/report.md`
 
 ## Graceful Degradation
 
-| Scenario                                         | Behavior                                                                              |
-| ------------------------------------------------ | ------------------------------------------------------------------------------------- |
-| No specs (change mode)                           | Stop — E2E requires specs. Use "all" mode instead.                                    |
-| Sitemap discovery fails ("all" mode)             | Continue — use homepage links + common paths fallback                                 |
-| App has JS errors or HTTP 5xx during exploration | **STOP** — see app-knowledge.md → Architecture for restart instructions               |
-| app-all.spec.ts exists                           | Read and use (never regenerate — regression baseline)                                 |
-| app-exploration.md missing (change mode)         | **STOP** — Step 4 exploration is mandatory. Explore before generating tests.          |
-| app-exploration.md exists                        | Read and use (verify routes still match specs — re-explore if page structure changed) |
-| app-knowledge.md exists                          | Read and use (append new patterns only)                                               |
-| test-plan.md exists (change mode)                | Read and use (never regenerate)                                                       |
-| auth.setup.ts exists                             | Verify format (update only if stale)                                                  |
-| playwright.config.ts exists                      | Preserve all fields (add only missing)                                                |
-| Test fails (backend)                             | `test.skip()` + report                                                                |
-| Test fails (selector/assertion)                  | Healer: snapshot → fix → re-run (≤3)                                                  |
-| 3 heals failed                                   | Evidence checklist → app bug: `test.skip()`; unclear: report                          |
-| False pass detected                              | Add "⚠️ Coverage Gap" to report                                                       |
+| Scenario | Behavior |
+| ------- | ------- |
+| No specs / app-exploration.md missing (change mode) | **STOP** |
+| JS errors or HTTP 5xx during exploration | **STOP** |
+| Sitemap fails ("all" mode) | Continue with homepage links fallback |
+| File already exists (app-exploration, test-plan, app-all.spec.ts, Page Objects) | Read and use — never regenerate |
+| Test fails (backend) | `test.skip()` + report |
+| Test fails (selector/assertion) | Healer: snapshot → fix → re-run (≤3) |
+| 3 heals failed | `test.skip()` if app bug; report if unclear |
+| False pass detected | Add "⚠️ Coverage Gap" to report |
 
 ## Guardrails
 

package/dist/commands/init.js

@@ -103,6 +103,11 @@ export async function init(options) {
         console.log(chalk.blue("\n─── Generating Seed Test ───"));
         await generateSeedTest(projectRoot);
     }
+    // 6b. Generate shared pages directory
+    if (options.seed !== false) {
+        console.log(chalk.blue("\n─── Generating Shared Pages ───"));
+        await generateSharedPages(projectRoot);
+    }
     // 7. Generate app-knowledge.md
     console.log(chalk.blue("\n─── Generating App Knowledge ───"));
     await generateAppKnowledge(projectRoot);
@@ -120,12 +125,13 @@ export async function init(options) {
     console.log(chalk.gray("  2. Customize tests/playwright/credentials.yaml with your test user"));
     console.log(chalk.gray("  3. Set credentials: export E2E_USERNAME=xxx E2E_PASSWORD=yyy"));
     console.log(chalk.gray("  4. Run auth setup: npx playwright test --project=setup"));
+    console.log(chalk.gray("  5. Page objects: extend tests/playwright/pages/BasePage.ts for shared selectors"));
     const hasClaude = existsSync(join(projectRoot, ".claude"));
     if (hasClaude) {
-        console.log(chalk.gray("  5. In Claude Code, run: /opsx:e2e <change-name>"));
+        console.log(chalk.gray("  6. In Claude Code, run: /opsx:e2e <change-name>"));
     }
-    console.log(chalk.gray(`  ${hasClaude ? "6." : "5."} Or: openspec-pw run <change-name>`));
-    console.log(chalk.gray(`  ${hasClaude ? "6." : "5."} Or: openspec-pw doctor to verify setup\n`));
+    console.log(chalk.gray(`  ${hasClaude ? "7." : "6."} Or: openspec-pw run <change-name>`));
+    console.log(chalk.gray(`  ${hasClaude ? "8." : "7."} Or: openspec-pw doctor to verify setup\n`));
     console.log(chalk.bold("How it works:"));
     console.log(chalk.gray("  /opsx:e2e reads your OpenSpec specs and runs Playwright"));
     console.log(chalk.gray("  E2E tests through a three-agent pipeline:"));
@@ -177,6 +183,20 @@ async function generateAppKnowledge(projectRoot) {
         console.log(chalk.green("  ✓ Generated: tests/playwright/app-knowledge.md"));
     }
 }
+async function generateSharedPages(projectRoot) {
+    const pagesDir = join(projectRoot, "tests", "playwright", "pages");
+    mkdirSync(pagesDir, { recursive: true });
+    const basePageSrc = join(TEMPLATE_DIR, "pages", "BasePage.ts");
+    const basePageDest = join(pagesDir, "BasePage.ts");
+    if (existsSync(basePageDest)) {
+        console.log(chalk.gray("  - pages/BasePage.ts already exists, skipping"));
+    }
+    else if (existsSync(basePageSrc)) {
+        writeFileSync(basePageDest, readFileSync(basePageSrc));
+        console.log(chalk.green("  ✓ Generated: tests/playwright/pages/BasePage.ts"));
+        console.log(chalk.gray("  (Extend BasePage to create page objects: pages/LoginPage.ts, etc.)"));
+    }
+}
 // Install SKILL reference templates (format guides for LLM to read)
 function installSkillTemplates(projectRoot) {
     const SKILL_DIR = join(projectRoot, ".claude", "skills", "openspec-e2e");

package/dist/commands/init.js.map

@@ -1 +1 @@
-{"version":3,"file":"init.js","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"init.js","sourceRoot":"","sources":["../../src/commands/init.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openspec-playwright",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "description": "OpenSpec + Playwright E2E verification setup tool for Claude Code",
   "type": "module",
   "bin": {

package/templates/app-exploration.md

@@ -39,6 +39,19 @@ BASE_URL: <from env or seed.spec.ts>
 - <any dynamic content that was observed>
 - <test assertions should use toContainText, not toHaveText for user-specific data>
 
+### Special Elements Detected
+
+| Element | Type | Context | Dimensions | Test Strategy |
+|---------|------|---------|------------|---------------|
+| | | | | |
+| | | | | |
+
+> **Special element type legend**: `canvas-2d` | `canvas-webgl` | `iframe` | `shadow-dom` | `contenteditable` | `video` | `audio` | `datepicker` | `drag-drop` | `infinite-scroll` | `file-upload` | `captcha-image` | `captcha-slider` | `captcha-3d` | `recaptcha` | `hcaptcha` | `turnstile` | `otp-sms` | `otp-totp` | `websocket` | `sse`
+>
+> **AI-opaque strategy**: CAPTCHA/OTP/slider-CAPTCHA — see `templates/test-plan.md` → **AI-Opaque Elements**
+>
+> **Test strategy**: See `templates/test-plan.md` → **Special Element Test Cases**
+
 ## Exploration Failures
 
 | Route | Error | Notes |

package/templates/e2e-test.ts

@@ -1,4 +1,5 @@
 import { test, expect, Page } from '@playwright/test';
+import { BasePage } from './pages/BasePage';
 
 // ──────────────────────────────────────────────
 // Test plan: <change-name>
@@ -8,24 +9,24 @@ import { test, expect, Page } from '@playwright/test';
 const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
 
 /**
- * Page Object Pattern - add selectors for your app's pages
+ * Page Object Pattern
+ *
+ * Extend BasePage to add page-specific selectors and actions.
+ * Example:
+ *   class LoginPage extends BasePage {
+ *     get usernameInput() { return this.byLabel('用户名'); }
+ *     get passwordInput() { return this.byLabel('密码'); }
+ *     get submitBtn() { return this.byRole('button', { name: '登录' }); }
+ *     async login(user: string, pass: string) {
+ *       await this.usernameInput.fill(user);
+ *       await this.passwordInput.fill(pass);
+ *       await this.submitBtn.click();
+ *     }
+ *   }
  */
-class AppPage {
-  constructor(private page: Page) {}
-
-  async goto(path: string = '/') {
-    await this.page.goto(`${BASE_URL}${path}`);
-  }
-
-  async getByTestId(id: string) {
-    return this.page.locator(`[data-testid="${id}"]`);
-  }
-
-  async waitForToast(message?: string) {
-    if (message) {
-      await this.page.getByText(message, { state: 'visible' }).waitFor();
-    }
-  }
+class AppPage extends BasePage {
+  // Add page-specific selectors here
+  // Example: get heading() { return this.byRole('heading'); }
 }
 
 function createPage(page: Page): AppPage {

package/templates/pages/BasePage.ts

@@ -0,0 +1,171 @@
+// BasePage — shared navigation and selector utilities for all page objects
+// Extends this class in tests/playwright/pages/<PageName>.ts to build page objects
+// Customize: add page-specific selectors as getters or methods
+
+import { Page, Locator, expect } from '@playwright/test';
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
+
+export class BasePage {
+  protected page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  // ─── Navigation ──────────────────────────────────────────────────────────────
+
+  /**
+   * Navigate to a path. Uses 'domcontentloaded' by default for speed.
+   * Pass { waitUntil: 'networkidle' } for SPAs that fetch data on mount.
+   */
+  async goto(
+    path: string,
+    options?: { waitUntil?: 'domcontentloaded' | 'load' | 'networkidle' | 'commit' },
+  ) {
+    const url = path.startsWith('http') ? path : `${BASE_URL}${path}`;
+    await this.page.goto(url, {
+      waitUntil: options?.waitUntil ?? 'domcontentloaded',
+    });
+  }
+
+  // ─── Selector helpers — use in priority order ───────────────────────────────
+
+  /**
+   * Best: data-testid survives style changes and text refactors.
+   * Use when the dev team adds data-testid to elements.
+   */
+  byTestId(id: string): Locator {
+    return this.page.getByTestId(id);
+  }
+
+  /**
+   * Good: semantic role selectors survive DOM restructuring.
+   * Use for buttons, links, form fields, dialogs.
+   */
+  byRole(role: Parameters<typeof this.page.getByRole>[0], options?: { name?: string | RegExp; exact?: boolean }): Locator {
+    return this.page.getByRole(role, options);
+  }
+
+  /**
+   * Good: label selectors are stable for form fields.
+   * Use for inputs, selects, textareas with visible labels.
+   */
+  byLabel(label: string | RegExp, options?: { exact?: boolean }): Locator {
+    return this.page.getByLabel(label, options);
+  }
+
+  /**
+   * Okay: text selectors are visible to users but may break on copy changes.
+   * Use for assertions, not interactions.
+   */
+  byText(text: string | RegExp, options?: { exact?: boolean }): Locator {
+    return this.page.getByText(text, options);
+  }
+
+  /**
+   * Fallback: placeholder text. Stable for form inputs.
+   */
+  byPlaceholder(text: string | RegExp, options?: { exact?: boolean }): Locator {
+    return this.page.getByPlaceholder(text, options);
+  }
+
+  // ─── Safe interactions ──────────────────────────────────────────────────────
+
+  /**
+   * Click with automatic scroll-into-view. Prevents "element not interactable" errors.
+   */
+  async click(selector: Locator | string, options?: Parameters<Locator['click']>[0]) {
+    const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
+    await el.scrollIntoViewIfNeeded();
+    await el.click(options);
+  }
+
+  /**
+   * Fill with automatic scroll-into-view. Clears existing value first.
+   */
+  async fill(selector: Locator | string, value: string) {
+    const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
+    await el.scrollIntoViewIfNeeded();
+    await el.fill(value);
+  }
+
+  /**
+   * Type with character-by-character input. Triggers keydown/keyup events.
+   * Use for editors and inputs that listen to keystroke events.
+   */
+  async type(selector: Locator | string, text: string) {
+    const el = typeof selector === 'string' ? this.page.locator(selector) : selector;
+    await el.scrollIntoViewIfNeeded();
+    await el.click();
+    await this.page.keyboard.type(text);
+  }
+
+  // ─── Wait utilities ─────────────────────────────────────────────────────────
+
+  /**
+   * Wait for a toast / snackbar / alert message to appear and optionally assert its text.
+   */
+  async waitForToast(text?: string | RegExp, timeout = 5000): Promise<Locator> {
+    const toast = text
+      ? this.page.getByText(text, { exact: false }).last()
+      : this.page.locator('[role="alert"], .toast, .snackbar, [aria-live="polite"]').last();
+    await toast.waitFor({ state: 'visible', timeout });
+    return toast;
+  }
+
+  /**
+   * Wait for a spinner / loading indicator to disappear.
+   * Call after navigation or async actions.
+   * Times out silently — callers should add their own assertion if needed.
+   */
+  async waitForLoad(spinnerSelector = '[role="progressbar"], .spinner, .loading', timeout = 10000) {
+    const spinner = this.page.locator(spinnerSelector);
+    if (await spinner.isVisible().catch(() => false)) {
+      await spinner.waitFor({ state: 'hidden', timeout }).catch(() => {
+        // Spinner did not disappear within timeout — caller should assert if needed
+      });
+    }
+  }
+
+  /**
+   * Wait for URL to match a pattern. Use after redirects or navigation clicks.
+   */
+  async waitForURL(pattern: string | RegExp, timeout = 10000) {
+    await this.page.waitForURL(pattern, { timeout });
+  }
+
+  // ─── Assertion shortcuts ───────────────────────────────────────────────────
+
+  /**
+   * Assert current URL matches pattern (after navigation or redirect).
+   */
+  async expectURL(pattern: string | RegExp) {
+    await expect(this.page).toHaveURL(pattern);
+  }
+
+  /**
+   * Assert page displays specific text.
+   * Note: exact option only applies to string text; RegExp is always partial match.
+   */
+  async expectText(text: string | RegExp) {
+    await expect(this.page.getByText(text)).toBeVisible();
+  }
+
+  // ─── Auth helpers ──────────────────────────────────────────────────────────
+
+  /**
+   * Assert user is on a guest (login) page.
+   * Use after logout or to verify auth guard redirects correctly.
+   */
+  async expectGuest() {
+    await expect(this.page.getByRole('button', { name: /login|sign in|登录/i })).toBeVisible();
+  }
+
+  /**
+   * Reload page and wait for hydration (for SPAs).
+   */
+  async reload(waitFor = 'domcontentloaded') {
+    await this.page.reload({ waitUntil: waitFor as 'domcontentloaded' });
+  }
+}

package/templates/seed.spec.ts

@@ -4,25 +4,19 @@
 
 import { test, expect, Page, ConsoleMessage } from '@playwright/test';
 import { existsSync } from 'fs';
+import { BasePage } from './pages/BasePage';
 
 // Customize these for your application
 const BASE_URL = process.env.BASE_URL || 'http://localhost:3000';
 
 /**
- * Page Object Pattern - customize these selectors for your app
+ * Page Object Pattern - extends BasePage for shared utilities
+ * Add your app's common selectors here
+ * Example:
+ *   get loginButton() { return this.byRole('button', { name: '登录' }); }
  */
-class AppPage {
-  constructor(private page: Page) {}
-
-  async goto(path: string = '/') {
-    await this.page.goto(`${BASE_URL}${path}`);
-  }
-
-  // Add your app's common selectors here
-  // Example:
-  // async getLoginButton() {
-  //   return this.page.locator('button[data-testid="login"]');
-  // }
+class AppPage extends BasePage {
+  // Add page-specific selectors here
 }
 
 /**

package/templates/test-plan.md

@@ -22,3 +22,232 @@ Generated from: `openspec/changes/<change-name>/specs/`
 
 **Error paths:**
 - ...
+
+## Special Element Test Cases
+
+### Canvas — 2D Rendering
+
+- **Route**: `/<page>`
+- **Role**: `@role(<role>)`
+- **Auth**: `@auth(required|none)`
+- **Type**: `canvas-2d`
+- **Element**: `<canvas id="...">` or `canvas`
+
+**Test approach:**
+1. Navigate to page
+2. Assert canvas visible + dimensions > 0
+3. (Optional) Screenshot for baseline archive
+
+**Assertions:**
+- `canvas.boundingBox().width > 0`
+- Screenshot archived for manual review
+
+### Canvas — WebGL Rendering
+
+- **Route**: `/<page>`
+- **Type**: `canvas-webgl`
+- **Element**: `<canvas>` with WebGL context
+
+**Test approach:**
+1. Navigate to page
+2. Assert canvas visible + correct dimensions
+3. Screenshot (no pixel comparison — rendering may vary)
+
+### Iframe — Content Accessible
+
+- **Route**: `/<page>`
+- **Type**: `iframe`
+- **Element**: `<iframe name="..." src="...">`
+
+**Test approach:**
+1. Navigate to page
+2. Use `frameLocator` to switch context
+3. Assert element inside iframe is visible
+
+### Rich Text Editor — Content Persists
+
+- **Route**: `/<page>`
+- **Type**: `contenteditable`
+- **Element**: `[contenteditable]`, CodeMirror, Monaco
+
+**Test approach:**
+1. Navigate to page
+2. Click editor → type content
+3. Evaluate `textContent` or `innerHTML`
+4. Assert content matches input
+
+### Video — Playback Control
+
+- **Route**: `/<page>`
+- **Type**: `video`
+- **Element**: `<video>`
+
+**Test approach:**
+1. Navigate to page
+2. Call `video.play()` via `page.evaluate()`
+3. Assert `!video.paused`
+
+### Audio — Playback Control
+
+- **Route**: `/<page>`
+- **Type**: `audio`
+- **Element**: `<audio>`
+
+**Test approach:**
+1. Navigate to page
+2. Call `audio.play()` via `page.evaluate()`
+3. Assert `!audio.paused`
+
+## AI-Opaque Elements: Out of Scope for Automation
+
+<!-- Elements that AI cannot reliably interact with. Mark in `app-exploration.md` → Special Elements table. -->
+
+### CAPTCHA — Human Verification Required
+
+- **Route**: `/<page>`
+- **Type**: `captcha-image | captcha-slider | captcha-3d | recaptcha | hcaptcha | turnstile`
+- **Element**: `<canvas id="...">`, `.g-recaptcha`, `.h-captcha`, `[data-sitekey]`, slider track
+
+**Automation strategy — choose one:**
+
+#### Strategy A: Auth-Setup Bypass (Recommended)
+Use pre-authenticated sessions from `auth.setup.ts` so CAPTCHA is bypassed before the test runs.
+
+```
+1. Store authenticated storageState in auth.setup.ts
+2. In test: use storageState to skip login
+3. Verify post-CAPTCHA state via API instead
+4. Assert: API response after CAPTCHA = expected state
+```
+
+**Example assertions:**
+- `API POST /submit-form` returns 200 + `success: true`
+- UI redirects to `/dashboard` after CAPTCHA pass
+- Database record created with correct values
+
+#### Strategy B: Skip with /handoff
+If CAPTCHA is the primary interaction under test, mark as non-automatable:
+
+```
+test.skip('<feature> requires CAPTCHA', async ({ page }) => {
+  // Human reviewer must manually pass CAPTCHA
+  // Then run: npx playwright test --grep "<feature>"
+});
+```
+
+#### Strategy C: API Verification Only
+Test the result of CAPTCHA-protected actions without automating the CAPTCHA:
+
+```
+1. Manually pass CAPTCHA once → capture resulting session/token
+2. Use that session in subsequent API calls
+3. Assert: API behavior matches CAPTCHA-passed state
+```
+
+**Detected CAPTCHA type** (fill in based on `app-exploration.md`):
+- Type: `<!-- image | slider | 3d-object | recaptcha | hcaptcha | turnstile -->`
+- Bypass method: `<!-- auth.setup | skip | api-only -->`
+- Verified by: `<!-- human-manual | api-response | db-state -->`
+
+---
+
+### OTP / SMS Verification — Test Account Bypass
+
+- **Route**: `/<page>`
+- **Type**: `otp-sms | otp-email | totp`
+- **Element**: 6-digit input, countdown timer, resend button
+
+**Automation strategy:**
+
+#### Strategy A: Test Credentials (Recommended)
+Use pre-verified test accounts with known OTP codes.
+
+```
+1. Set E2E_OTP_CODE=<valid-test-code> in credentials.yaml
+2. In test:
+   await page.getByRole('textbox').fill(process.env.E2E_OTP_CODE);
+   await page.getByRole('button', { name: 'Verify' }).click();
+```
+
+#### Strategy B: Development Bypass Flag
+If dev mode disables OTP, use that flag.
+
+```
+1. Set BASE_URL to dev environment with OTP disabled
+2. Proceed as normal authenticated user
+```
+
+#### Strategy C: API-Only Verification
+Bypass OTP UI entirely and test the protected endpoint directly.
+
+```
+1. Obtain valid token via API (skip OTP step)
+2. Use token in subsequent API calls
+3. Assert: protected endpoint returns expected data
+```
+
+---
+
+### File Upload — Complex Input
+
+- **Route**: `/<page>`
+- **Type**: `file-upload`
+- **Element**: `<input type="file">`, drag-and-drop zone
+
+**Test approach:**
+```
+1. Create test fixture file: `test fixtures/login-hero.png`
+2. Set `accept: '<mime-type>'` if specified
+3. Use `page.setInputFiles()` for reliable upload
+4. Assert: upload progress completes → success message or preview
+```
+
+**Assertions:**
+- Upload progress bar completes (if shown)
+- File preview renders correctly
+- API response contains uploaded file reference
+
+---
+
+### Drag-and-Drop — Custom Implementation
+
+- **Route**: `/<page>`
+- **Type**: `drag-drop`
+- **Element**: `[draggable]`, `.drop-zone`, sortable list items
+
+**Test approach:**
+```
+1. Identify drag handle and drop target via Playwright MCP snapshot
+2. Use `page.dragAndDrop()` or `locator.dragTo()`
+3. If custom implementation uses JS events, use `page.evaluate()` to dispatch events
+4. Assert: target state reflects the drag result
+```
+
+**Note**: If the drag-drop uses complex physics (e.g., Kanban board, calendar), prefer `page.evaluate()` with custom event dispatching over `dragAndDrop()`.
+
+---
+
+### WebSocket / Real-Time — Timing Sensitive
+
+- **Route**: `/<page>`
+- **Type**: `websocket | sse | polling`
+- **Element**: live data display, notification badge, live chart
+
+**Test approach:**
+```
+1. Establish WebSocket/SSE connection via page
+2. Wait for specific message/event: `await page.waitForResponse(/<ws-endpoint>/)`
+3. Assert: DOM updates after message received
+4. Use `page.waitForFunction()` to poll for expected state
+```
+
+**Assertions:**
+- Live data counter increments after server push
+- Notification badge shows correct count
+- Chart redraws with new data points
+
+**Note**: Increase test timeout for real-time tests. See `playwright.config.ts` → `timeout`.
+
+---
+
+> **Reference**: See `app-exploration.md` → **Special Elements Detected** table for per-route specifics.