Browser TDD Skill

Goal

Verify that UI code produces correct visual output through actual browser execution — not just code that compiles or passes unit tests. Uses Playwright to check DOM structure, computed styles, scroll behavior, and visual rendering.

When to Use

• Implementing CSS layout (sticky elements, flexbox, grid, responsive breakpoints)
• Implementing interactive components (modals, dropdowns, accordions)
• Implementing animations or transitions
• Any UI feature where "works" means "looks and behaves correctly in a browser"

Steps

1. Analyze the UI requirement
   • Understand what the UI should look like and how it should behave
   • Identify testable assertions: position, computed styles, DOM structure, visibility, scroll behavior
   • Examples:
     • "Sticky navbar stays at top of viewport when scrolling" → check getBoundingClientRect().top === 0
     • "Modal closes on Escape key" → keyboard event + expect(modal).not.toBeVisible()
     • "Grid has 3 columns on desktop" → check computed grid-template-columns value