What it does

Uses Playwright to capture screenshots at multiple breakpoints and UI states, creating a fast feedback loop for responsive debugging. Instead of manually resizing your browser, you get a full set of screenshots across every viewport in seconds.

The pattern

Define your breakpoint set up front:

• Mobile: 375x812 (iPhone), 390x844 (iPhone Pro)
• Tablet: 768x1024 (iPad portrait), 1024x768 (iPad landscape)
• Desktop: 1280x800 (laptop), 1440x900 (standard)
• Wide: 1920x1080 (full HD), 2560x1440 (QHD)

For each breakpoint, capture multiple states:

1. Default/idle state
2. Interactive states (modal open, dropdown expanded, drawer visible)
3. Error states (form validation, empty states, loading failures)
4. Edge cases (very long text, missing images, slow network)

The debugging loop:

1. Make a code change
2. Run the screenshot script (captures all breakpoints in parallel)
3. Review the image grid for issues
4. Fix, repeat

Specific things to check in each screenshot pass:

• Horizontal overflow. Content wider than the viewport creates horizontal scrollbars. This is the most common responsive bug.
• Z-index stacking. Modals, tooltips, and sticky headers can overlap incorrectly at certain widths.
• Text truncation. Long strings that fit on desktop may break layouts on mobile.
• Touch target sizing. Buttons and links that are fine with a mouse cursor may be too small for fingers.

Key decisions

Playwright over Puppeteer or Cypress. Playwright handles multiple browser contexts natively, supports parallel execution, and its screenshot API is clean. One script, all breakpoints, all states.

Screenshot files, not visual regression tools. Visual regression testing (pixel diffing) is useful for CI but overkill for active development. During debugging, your eyes are faster than a diff algorithm. Save the screenshots to a temp directory and scan them.

Parallel capture. Launch all viewports concurrently. A full set of 8 breakpoints with 4 states each (32 screenshots) should complete in under 10 seconds.

Stateful scenes require setup. Do not just screenshot the landing page. Script the interactions that produce the states you need to verify. Open the modal, trigger the error, scroll to the footer.

When to use it

During active responsive development or when debugging layout issues reported at specific screen sizes. Especially valuable when working with AI-generated UI code, where the output might look correct at one breakpoint but break at others. Also useful for quick validation before deploying frontend changes.