az9713 Responsive Design & Visual Adaptation
Run 18 responsive test cases across 4 parallel agents — one per viewport size. Each agent runs the full test suite at its assigned viewport.
Setup
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-responsive/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"
Before running, verify prerequisites per references/prerequisites.md.
Parallel Execution — 4 Subagents (one per viewport)
Agent 1: Mobile (-s=resp-320)
playwright-cli -s=resp-320 open "$URL"
playwright-cli -s=resp-320 resize 320 568
playwright-cli -s=resp-320 tracing-start
playwright-cli -s=resp-320 screenshot --filename="$OUTDIR/screenshots/320-initial.png"
playwright-cli -s=resp-320 snapshot --filename="$OUTDIR/snapshots/320-initial.yaml"
Agent 2: Tablet (-s=resp-768)
playwright-cli -s=resp-768 open "$URL"
playwright-cli -s=resp-768 resize 768 1024
playwright-cli -s=resp-768 tracing-start
playwright-cli -s=resp-768 screenshot --filename="$OUTDIR/screenshots/768-initial.png"
playwright-cli -s=resp-768 snapshot --filename="$OUTDIR/snapshots/768-initial.yaml"
Agent 3: Laptop (-s=resp-1024)
playwright-cli -s=resp-1024 open "$URL"
playwright-cli -s=resp-1024 resize 1024 768
playwright-cli -s=resp-1024 tracing-start
playwright-cli -s=resp-1024 screenshot --filename="$OUTDIR/screenshots/1024-initial.png"
playwright-cli -s=resp-1024 snapshot --filename="$OUTDIR/snapshots/1024-initial.yaml"
Agent 4: Desktop (-s=resp-1440)
playwright-cli -s=resp-1440 open "$URL"
playwright-cli -s=resp-1440 resize 1440 900
playwright-cli -s=resp-1440 tracing-start
playwright-cli -s=resp-1440 screenshot --filename="$OUTDIR/screenshots/1440-initial.png"
playwright-cli -s=resp-1440 snapshot --filename="$OUTDIR/snapshots/1440-initial.yaml"
Test Cases — Each Agent Runs ALL
| TC | Test | How to Check |
|---|---|---|
| TC-R1 | No horizontal overflow | run-code: document.documentElement.scrollWidth <= document.documentElement.clientWidth |
| TC-R2 | Navigation transforms (hamburger ↔ full nav) | At 320: check for hamburger/menu button. At 1440: check for full nav links visible |
| TC-R3 | Images/media scale within viewport | run-code to find img/video/iframe elements, check none have width > viewport width |
| TC-R4 | Touch targets ≥48x48px (mobile) / ≥44x44px (WCAG) | run-code to measure all interactive element bounding boxes on mobile viewports |
| TC-R5 | Font sizes ≥12px, line heights readable | run-code to sample text elements, check computed fontSize ≥12px, lineHeight ratio ≥1.4 |
| TC-R6 | No text truncation hiding critical content | run-code to find elements with overflow:hidden + text-overflow:ellipsis, flag critical content (headings, CTAs, prices) |
| TC-R7 | Modals/dialogs fit within viewport | If modal exists: open it, run-code to check modal dimensions ≤ viewport |
| TC-R8 | Fixed/sticky elements don't overlap content | run-code to find position:fixed/sticky elements, check they don't cover more than 20% of viewport |
| TC-R9 | Tables responsive (scroll or stack) | run-code to find tables, check for horizontal scroll wrapper or responsive stacking |
| TC-R10 | Videos/embeds maintain aspect ratio | run-code to find video/iframe elements, check aspect ratio is reasonable (not squished) |
| TC-R11 | Dark mode renders correctly | run-code to emulate dark color scheme: page.emulateMedia({colorScheme:'dark'}), take screenshot |
| TC-R12 | Dark mode text contrast maintained | In dark mode: sample text elements, verify contrast ratio ≥4.5:1 |
| TC-R13 | Dark mode images/icons visible | In dark mode: check for images/SVGs that may be invisible on dark backgrounds |
| TC-R14 | Print styles — @media print present |
run-code to check for print stylesheets or @media print rules |
| TC-R15 | Print styles — no cut-off content | run-code to emulate print: page.emulateMedia({media:'print'}), take screenshot |
| TC-R16 | RTL layout mirrors correctly | Check if page has dir="rtl" or RTL lang; if so, verify layout mirroring |
| TC-R17 | Landscape orientation — no breakage | resize to landscape dimensions (e.g., 568x320 for mobile), check no overflow or overlap |
| TC-R18 | Zoom 200% — no overlap/horizontal scroll | run-code to set document.documentElement.style.zoom = '200%', check for overflow |
After running all tests at the assigned viewport, each agent captures evidence:
playwright-cli -s=<session> screenshot --filename="$OUTDIR/screenshots/<viewport>-final.png"
playwright-cli -s=<session> tracing-stop
playwright-cli -s=<session> close
Fix Loop
After execution, if any tests failed, follow the fix loop process in references/fix-loop.md.
Max 3 attempts. Only re-run failed test cases.
Include fix attempt history in the report.
Report Generation
After all 4 agents complete, merge results into $OUTDIR/report.md.
Use a matrix format showing pass/fail per test case per viewport:
| Test Case | 320×568 | 768×1024 | 1024×768 | 1440×900 |
|---|---|---|---|---|
| TC-R1 | ✅/❌ | ✅/❌ | ✅/❌ | ✅/❌ |
| TC-R2 | ... | ... | ... | ... |
Cleanup
playwright-cli -s=resp-320 close 2>/dev/null
playwright-cli -s=resp-768 close 2>/dev/null
playwright-cli -s=resp-1024 close 2>/dev/null
playwright-cli -s=resp-1440 close 2>/dev/null