Document when to use test seams vs. DOM inspection, provide patterns for batching related test commands, create reusable test helper functions, and document efficient waiting strategies. Use when testing Phaser games or web applications to reduce execution time and improve reliability.
Document when to use test seams vs. DOM inspection, provide patterns for batching related test commands, create reusable test helper functions, and document efficient waiting strategies. Use when testing Phaser games or web applications to reduce execution time and improve reliability.
Browser Testing Efficiency
Overview
Optimize browser testing workflows by choosing the right testing method, batching commands, and using efficient waiting strategies. Reduce execution time from 30-60% of total time to 10-20% through better patterns.
When to Use Test Seams vs. DOM Inspection
Use Test Seams When
Phaser/canvas games: Test seams are ONLY reliable method
Canvas-rendered content: DOM text search doesn't work
Game state access: Need to check game state, not DOM
Scene navigation: Use test seam commands for transitions
Deterministic testing: Need controlled game state
Example:
# ✅ CORRECT: Use test seam for Phaser game
agent-browser eval"window.__TEST__.commands.clickStartGame()"
agent-browser eval"window.__TEST__.gameState()"
Use DOM Inspection When
DOM-based UI: Menus, buttons, forms
Text content: HTML text (not canvas-rendered)
Form inputs: Text fields, checkboxes, dropdowns
Standard web apps: Not canvas-based games
Example:
agent-browser snapshot -i
agent-browser click @e1
agent-browser fill @e2
# ✅ CORRECT: Use DOM for standard web UI
"text"
Command Batching Patterns
Pattern 1: Batch Related Commands
Instead of sequential commands, batch related operations:
Before: Fixed 2-second waits (may be too long or too short)
After: Polling with 100ms checks (faster, more reliable)
Savings: 1-2 seconds per wait operation
Batch Related Operations
Before: Multiple sequential commands
After: Single eval with multiple operations
Savings: 50-80% reduction in command overhead
Viewport Testing Optimization
Pattern 1: Test Matrix Strategy
Test minimum and maximum viewport sizes first, intermediate only if issues found:
# ✅ EFFICIENT: Test critical sizes first
agent-browser open "http://localhost:5173?scene=GameScene"
agent-browser viewport 500 400 # Minimum
agent-browser snapshot
agent-browser viewport 1920 1080 # Maximum
agent-browser snapshot
# Only test intermediate sizes if issues foundif [ "$issues_found" = "true" ]; then
agent-browser viewport 1024 768 # Intermediate
agent-browser snapshot
fi
Pattern 2: Batch Viewport Tests
Set viewport → test all scenarios → capture screenshots:
# ✅ EFFICIENT: Batch viewport tests in single session
agent-browser open "http://localhost:5173?scene=GameScene"# Test all viewports in sequencefor viewport in"500 400""1024 768""1920 1080"; do
agent-browser viewport $viewport
agent-browser snapshot
done
agent-browser close
Pattern 3: Screenshot Batching
Capture multiple screenshots first, then batch analyze:
# ✅ EFFICIENT: Capture all screenshots first
agent-browser open "http://localhost:5173?scene=GameScene"
agent-browser viewport 500 400
agent-browser snapshot -o screenshots/viewport-500x400.png
agent-browser viewport 1024 768
agent-browser snapshot -o screenshots/viewport-1024x768.png
agent-browser viewport 1920 1080
agent-browser snapshot -o screenshots/viewport-1920x1080.png
agent-browser close
# Then analyze all screenshots together
analyze_screenshots screenshots/viewport-*.png
Test Seam Discovery Optimization
Pattern 1: Standard Readiness Check
Use standard readiness check patterns with exponential backoff:
# Standard readiness check with exponential backoffwait_for_test_seam() {
local max_attempts=5
local attempt=0
while [ $attempt -lt $max_attempts ]; dolocal delay=$((2 ** $attempt)) # 1s, 2s, 4s, 8s, 16ssleep$delayif agent-browser eval"typeof window.__TEST__ !== 'undefined' && typeof window.__TEST__.commands !== 'undefined'"; thenecho"Test seam ready"return 0
fi
attempt=$((attempt + 1))
doneecho"Test seam not available after $max_attempts attempts"return 1
}
Pattern 2: Document Common Command Patterns
Document common test seam command structures:
# Common test seam command patterns# Scene navigation
window.__TEST__.commands.goToScene('GameScene')
window.__TEST__.commands.clickStartGame()
# Game state
window.__TEST__.gameState()
window.__TEST__.commands.setTimer(5)
window.__TEST__.commands.setScore(100)
# Game actions
window.__TEST__.commands.collectAnyCoin()
window.__TEST__.commands.movePlayer(x, y)
Parallel Browser Session Patterns
Pattern 1: Independent Test Cases
Use parallel browser sessions for independent test cases:
# ✅ EFFICIENT: Parallel sessions for independent tests
agent-browser --session test1 open "http://localhost:5173?scene=GameScene"
agent-browser --session test2 open "http://localhost:5173?scene=MainMenu"# Run tests in parallel
agent-browser --session test1 eval"window.__TEST__.commands.setTimer(5)"
agent-browser --session test2 eval"window.__TEST__.commands.clickStartGame()"# Close sessions
agent-browser --session test1 close
agent-browser --session test2 close
Best Practices
Use test seams for Phaser games: DOM inspection doesn't work
Batch related commands: Reduce command count
Use polling instead of fixed waits: Faster and more reliable
Use minimal waits: 500ms for transitions, 100ms for checks
Create reusable helpers: Reduce code duplication
Organize by feature: Group related tests together
Test viewport matrix: Minimum and maximum first, intermediate only if needed
Batch viewport tests: Single session for multiple viewports
Batch screenshots: Capture all first, analyze together
Optimize test seam discovery: Use exponential backoff
Resources
agent-browser skill - Browser automation commands
phaser-test-seam-patterns skill - Test seam patterns
