Integrate Agent Browser for automated E2E testing & QA

## Overview

Integrate [Agent Browser](https://agent-browser.dev/) — a headless browser automation CLI built for AI agents — to enable automated end-to-end testing, migration verification, and quality assurance across the New Salon platform.

Agent Browser uses a Rust CLI + Playwright daemon architecture with a token-efficient "refs" system (~200-400 tokens vs ~3000-5000 for full DOM), making it ideal for AI-driven testing workflows.

---

## Implementation Plan

### Phase 1: Setup & Infrastructure

- Install Agent Browser CLI (npm or Homebrew)

- Configure daemon settings for our development environment

- Set up test runner scripts in `package.json` (e.g., `npm run test:e2e`)

- Create `/tests/e2e/` directory structure with shared utilities

- Document setup in CLAUDE.md and developer onboarding guide

### Phase 2: Layout Engine Visual Testing

- Write automated visual tests for all 8 layout engines:

- Canvas: free-form positioning, block overlap, z-index

- Mosaic: tile responsiveness, aspect ratios

- Slideshow: navigation, transitions, caption display

- Justified: row filling, aspect-ratio preservation

- Column: snap-to-grid, responsive breakpoints

- Fixed Height: row height consistency, floating images

- Variable Size: masonry layout, variable widths

- Square: uniform aspect ratio grid alignment

- Screenshot comparison baselines for each engine

- Test across viewport sizes (mobile, tablet, desktop)

### Phase 3: Editor Flow Testing

- Block CRUD operations (create, edit, delete, reorder)

- Drag-and-drop interactions via @dnd-kit

- Section management (add, reorder, delete sections)

- Panel interactions (Page, Section, Layout tabs)

- Navigation editor flows

- Theme switching and preview

- Rich text editing (TipTap) interactions

### Phase 4: Migration Verification

- Automated comparison between legacy salon.io pages and migrated new.salon.io pages

- Fetch legacy page via salon.io JSON API

- Render migrated version and capture screenshots

- Pixel-diff or structural comparison reporting

- Batch verification across migrated user sites

### Phase 5: Payment & Auth Flow Testing

- Stripe Checkout session creation and redirect

- Subscription management (upgrade, downgrade, cancel, reactivate)

- Customer Portal access and navigation

- Test all 5 tiers: Free, Basic, Premium, Pro, Pro Lifetime

- Webhook handling verification

- Auth flows: sign up, sign in, password reset, magic links

### Phase 6: Public Site & SEO Auditing

- Crawl published user sites for meta tag verification

- OpenGraph and social sharing preview validation

- Accessibility audit (WCAG compliance checks)

- Custom domain routing and SSL verification

- Content width modes (full-bleed, full, wide, inset) rendering

- Theme CSS variable application on public pages

### Phase 7: CI/CD Integration

- Add Agent Browser tests to Vercel deployment pipeline

- Post-deploy smoke tests on preview and production URLs

- Failure alerting and screenshot capture on test failures

- Test result reporting and trend tracking

- Multi-session isolation for parallel test execution

---

## Key Benefits

- **Token efficiency**: Refs system uses 10-20x fewer tokens than full DOM, reducing AI testing costs

- **Multi-session isolation**: Test authenticated vs anonymous views simultaneously

- **CLI-first**: Easy to script into CI/CD pipelines

- **Cross-platform**: Works on macOS, Linux, Windows

## Dependencies

- Agent Browser CLI (Rust + Node.js)

- Playwright (managed by Agent Browser daemon)

- Chrome/Chromium browser

## Notes

- We already have Playwright MCP connected — Agent Browser complements it for CI/CD and batch testing

- Start with Phase 1-2 post-launch (after March 13, 2026)

- Prioritize layout engine visual testing as highest-value first use case