By name: test-cross-browser description: Test cross-browser consistency across Chromium, Firefox, and WebKit. Use when user wants to verify browser compatibility, cross-browser layout, or browser-specific issues. allowed-tools: Bash(playwright-cli:) Bash(npx:) Bash(mkdir:*)
Cross-Browser Consistency
Run 10 test cases across 3 parallel agents — one per browser engine (Chromium, Firefox, WebKit). Each agent runs the identical test suite for direct comparison.
Setup
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-cross-browser/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"
Parallel Execution — 3 Subagents (one per browser)
Agent 1: Chromium (-s=xb-chromium)
playwright-cli -s=xb-chromium open "$URL" --browser=chrome
playwright-cli -s=xb-chromium tracing-start
playwright-cli -s=xb-chromium screenshot --filename="$OUTDIR/screenshots/chromium-initial.png"
playwright-cli -s=xb-chromium snapshot --filename="$OUTDIR/snapshots/chromium-initial.yaml"
Agent 2: Firefox (-s=xb-firefox)
playwright-cli -s=xb-firefox open "$URL" --browser=firefox
playwright-cli -s=xb-firefox tracing-start
playwright-cli -s=xb-firefox screenshot --filename="$OUTDIR/screenshots/firefox-initial.png"
playwright-cli -s=xb-firefox snapshot --filename="$OUTDIR/snapshots/firefox-initial.yaml"
Agent 3: WebKit (-s=xb-webkit)
playwright-cli -s=xb-webkit open "$URL" --browser=webkit
playwright-cli -s=xb-webkit tracing-start
playwright-cli -s=xb-webkit screenshot --filename="$OUTDIR/screenshots/webkit-initial.png"
playwright-cli -s=xb-webkit snapshot --filename="$OUTDIR/snapshots/webkit-initial.yaml"
Test Cases — Each Agent Runs ALL
| TC | Test | How to Check |
|---|---|---|
| TC-XB1 | Page renders — a11y tree structure matches | snapshot, compare structural elements across browser snapshots |
| TC-XB2 | Forms — fill + submit works | Find form, fill fields with fill, click submit, verify success state |
| TC-XB3 | Navigation — links, back/forward | Click nav links, go-back, go-forward, verify correct pages load |
| TC-XB4 | JS feature support | run-code to test: typeof fetch, typeof Promise, typeof IntersectionObserver, typeof ResizeObserver — all should return 'function' |
| TC-XB5 | CSS consistency — element dimensions within 5px | run-code to measure key element bounding rects, compare across browsers (±5px tolerance) |
| TC-XB6 | CSS Grid/Flexbox renders correctly | run-code to find Grid/Flexbox containers, verify children layout (positions, sizes) |
| TC-XB7 | Custom fonts load correctly | run-code to check document.fonts.ready, then verify computed font-family matches expected |
| TC-XB8 | Animations/transitions render | run-code to check for elements with CSS animation/transition, verify they have non-zero duration |
| TC-XB9 | Scroll behavior — smooth/snap | run-code to check scroll-behavior and scroll-snap-type CSS properties are applied |
| TC-XB10 | Input types — date/color/range | run-code to find specialized input types, verify they render natively (have shadow DOM or platform UI) |
After running all tests:
playwright-cli -s=<session> screenshot --filename="$OUTDIR/screenshots/<browser>-final.png"
playwright-cli -s=<session> tracing-stop
playwright-cli -s=<session> close
Report Generation
After all 3 agents complete, merge results into $OUTDIR/report.md.
Use a comparison matrix:
| Test Case | Chromium | Firefox | WebKit | Consistent? |
|---|---|---|---|---|
| TC-XB1 | ✅ | ✅ | ✅ | ✅ |
| TC-XB2 | ✅ | ✅ | ❌ | ❌ |
| ... | ... | ... | ... | ... |
Highlight inconsistencies with details:
- Which browser failed
- What the difference was (dimensions, behavior, missing feature)
- Suggested fix (polyfill, vendor prefix, fallback)
Cleanup
playwright-cli -s=xb-chromium close 2>/dev/null
playwright-cli -s=xb-firefox close 2>/dev/null
playwright-cli -s=xb-webkit close 2>/dev/null