Skip to main content

Responsive Breakpoint Validation

Test design system components across all breakpoints (mobile, tablet, desktop) with screenshot diffing and regression detection.

Complexity: Moderate | Duration: 15-30m | Category: Creative/Design

Tags: responsive-design visual-testing regression-testing QA

Workflow Diagram​

Steps​

Step 1: Configure breakpoint test matr​

Agent: qa

analyst - test planning

Step 2: Generate baseline screenshots​

Agent: qa

analyst - reference images

Step 3: Render components at all break​

Agent: frontend

developer - visual output

Step 4: Run visual regression tests (P​

Agent: qa

analyst - diff detection

Step 5: Flag layout issues​

Agent: qa

analyst - problem identification

Step 6: Fix responsive bugs​

Agent: frontend

developer - remediation

Step 7: Update baseline screenshots​

Agent: qa

analyst - new reference

Usage​

To execute this workflow:

/workflow creative/design/responsive-breakpoint-validation.workflow

See other workflows in this category for related automation patterns.