Frontend & UI Testing

Frontend tests in XAIO are primarily Vitest for logic components and Playwright for end-to-end click paths. The agent can write both and run them against the running live preview.

Smoke tests (most common case)

> Click through the most important pages of my app. For each: verify it loads without console errors, the main button exists and is clickable.

The agent opens headless Chromium via Playwright, navigates to each route, intercepts console.error, and reports a fail if anything crashes or is missing.

Form tests

> Test the application form on the beta landing. Verify:

> 1. Submit without required fields shows errors

> 2. Invalid email is rejected

> 3. Success state appears after valid submit

> 4. POST payload contains all expected fields (intercept network tab)

Visual regression

> Take screenshots of login, dashboard, and settings — compare against baseline PNGs in tests/snapshots/. If pixel diff is over 0.5%, fail the test.

Playwright + expect(page).toHaveScreenshot() handles this.

Accessibility

> Run axe-core against all pages. Tell me which buttons have no aria-label, which images have no alt attribute, which form inputs are unlabeled.

Mobile layouts

> Test in iPhone 15 viewport: verify the hamburger menu opens, modals are scrollable, all buttons are reachable by thumb (44×44 minimum).

Live-preview based

Tests run against the real live preview in the workspace, not a mock. That means:

• Backend calls actually hit your workspace backend
• Data is created in the real workspace DB (test data is cleaned up after)
• Images, fonts, animations all real — layout issues become visible

Auto-run after code change

> Run the smoke tests automatically after every commit. On fail: stop, show me what's broken, suggest a fix.

The agent wires this up with a pre-commit hook or a watcher reacting to *.tsx.