playwright-interaction-testing-mandate

Playwright Visual Audits Must Test Interactions, Not Just Rendering

The Failure

Playwright audit of the AutoResearch Observatory took screenshots and confirmed elements rendered visually, but never CLICKED filters, tested user flows, or verified interactive behavior. Result: filter UX bugs shipped — filters technically worked (API calls fired correctly) but gave zero visual feedback to the user (no results indicator, no filtered timeline, no empty state explanation, no loading spinner). The CTO had to report this.

Root Cause

Treating Playwright as a screenshot tool instead of an interaction testing tool. “Does it render?” is 20% of a visual audit. “Does clicking it do the right thing and give proper feedback?” is the other 80%.

The Fix

Every Playwright audit of an interactive UI MUST include:

  1. Click every interactive element (filters, buttons, toggles, links, dropdowns)
  2. Verify state changes visually AFTER each click (before/after screenshots)
  3. Test the full user journey end-to-end (filter → drill-down → back → different filter)
  4. Test empty/error states by triggering them (select agent with no data)
  5. Test combined filter interactions (agent + mode + status together)
  6. Check console errors after each interaction, not just on page load
  7. Quality audits of web portals must dispatch a Playwright interaction test agent alongside code/integration auditors

Impact

This applies to ALL future web portal work: VPS Dashboard, Observatory, File Manager, OmniGraph portal, any new web-facing UI.