Patrick Plate
29 lines
1.1 KiB
Markdown
29 lines
1.1 KiB
Markdown
# Visual Verification Rule
|
|
|
|
## After Building Frontend Pages
|
|
|
|
When working in Code or Debug mode on a frontend project with Playwright installed:
|
|
|
|
- **After creating or significantly modifying a page/component**, run the `visual-verify` skill to verify it renders correctly
|
|
- This catches issues like: missing i18n text, broken centering, theme mode failures, responsive overflow
|
|
- Minimum check: take a screenshot + extract visible text + verify positioning
|
|
|
|
## When to Delegate to Visual QA Mode
|
|
|
|
For deeper visual testing (multi-page, responsive breakpoints, interaction flows, accessibility), delegate to 🎨 Visual QA mode via the Orchestrator.
|
|
|
|
## Playwright Quick Reference
|
|
|
|
```javascript
|
|
const { chromium } = require('playwright');
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
|
|
await page.goto(URL);
|
|
await page.waitForTimeout(2000);
|
|
const text = await page.locator('body').innerText();
|
|
await page.screenshot({ path: '/tmp/verify.png' });
|
|
await browser.close();
|
|
```
|
|
|
|
Prerequisites: `pnpm add -D playwright` + `npx playwright install chromium`
|