Frontend & UI Testing

Smoke tests, click-throughs, form validation, and visual regressions for your UI.

Frontend tests in Airbuild 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 signup form. 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.

Watching a run

While a suite runs, a card in the chat counts the tests off as they finish, so a long Playwright run is not a blank wait. The full results — per test, per file, with coverage — land in the **Tests** tab; see Quality Assurance.