playwright-interactive-sandbox

Core Workflow

1. Write a brief QA inventory before testing:
   • Build the inventory from three sources: the user's requested requirements, the user-visible features or behaviors you actually implemented, and the claims you expect to make in the final response.
   • Anything that appears in any of those three sources must map to at least one QA check before signoff.
   • List the user-visible claims you intend to sign off on.
   • List every meaningful user-facing control, mode switch, or implemented interactive behavior.
   • List the state changes or view changes each control or implemented behavior can cause.
   • Use this as the shared coverage list for both functional QA and visual QA.
   • For each claim or control-state pair, note the intended functional check, the specific state where the visual check must happen, and the evidence you expect to capture.
   • If a requirement is visually central but subjective, convert it into an observable QA check instead of leaving it implicit.
   • Add at least 2 exploratory or off-happy-path scenarios that could expose fragile behavior.
2. Start or confirm any required dev server in a persistent TTY session.
3. Write a dedicated Playwright verification script for the changed flow.
4. Run the desktop script first, then add a mobile script if the change affects mobile layouts or touch behavior.
5. After each code change, rerun the verification script from a clean Node.js process.
6. Run functional QA with normal user input.
7. Run a separate visual QA pass.
8. Verify viewport fit and capture the screenshots needed to support your claims.