Visual Verification

Verify implemented features work correctly through actual user interaction, not just automated tests.

When to Use

• After implementing any UI feature
• Before marking an issue as complete
• When acceptance criteria involve user-visible behavior
• After fixing UI bugs

Approaches

Web Applications: See browser-verification.md for Playwright MCP workflow.

Mobile Applications: See mobile-verification.md (Coming soon)

Verification Checklist

Before marking any UI task complete:

• [ ] Dev server is running and accessible
• [ ] Feature renders without console errors
• [ ] Elements render correctly and do not incorrectly overlap
• [ ] User interactions work as expected
• [ ] Edge cases handled (empty states, loading, errors)
• [ ] Screenshot captured as evidence

What NOT to Do

• Skip visual verification because "tests pass"
• Mark issues complete without browser testing
• Assume dev mode catches all errors (run npm run build too)
• Test only happy paths