BROWSER REVIEW
browser-review.ts
Browser intelligence: console errors, behavioral walkthroughs, a11y audit, visual inspection.
StarkWHAT THIS PATTERN TEACHES
How to give review agents browser eyes during /qa, /ux, /security, and /gauntlet passes. Captures console errors, performs behavioral walkthroughs (click flows, form submissions), runs axe-core a11y audits, inspects security headers, and screenshots every page -- all as evidence for triage, not deterministic tests.
WHEN TO USE THIS
Any /qa, /ux, /security, or /gauntlet review pass where the app has a running browser interface. Complements e2e-test.ts (which is for CI).
AT A GLANCE
async function browserReview(page: Page) {
const errors: string[] = [];
page.on('console', m => {
if (m.type() === 'error') errors.push(m.text());
});
await page.goto('/');
return { errors, screenshot: await page.screenshot() };
}FRAMEWORK IMPLEMENTATIONS
TypeScript
import { chromium, type Page } from 'playwright';
import AxeBuilder from '@axe-core/playwright';
interface ReviewReport {
url: string;
consoleErrors: string[];
a11yViolations: { id: string; impact: string; nodes: number }[];
securityHeaders: Record<string, boolean>;
screenshot: Buffer;
}
async function browserReview(url: string): Promise<ReviewReport> {
const browser = await chromium.launch();
const page = await browser.newPage();
const consoleErrors: string[] = [];
page.on('console', (msg) => {
if (msg.type() === 'error') consoleErrors.push(msg.text());
});