| name | visual-testing |
| description | Visual testing, UI verification, and design comparison using screenshots and Figma integration. Use when the user wants to verify UI appearance, compare with Figma designs, test responsive layouts, check for visual regressions, or validate design implementation. |
| allowed-tools | Bash(browser-devtools-cli:*) |
Visual Testing Skill
Perform visual testing, UI verification, and design comparison using screenshots, responsive testing, and Figma integration.
When to Use
This skill activates when:
- User wants to verify UI appearance
- User asks to compare page with design or Figma
- User needs responsive design testing
- User wants to check for visual regressions
- User mentions UI bugs or styling issues
- User asks about design parity
- User wants to validate implementation against design
Capabilities
Screenshot Capture
browser-devtools-cli content take-screenshot --name "homepage"
browser-devtools-cli content take-screenshot --name "element" --selector ".hero"
browser-devtools-cli content take-screenshot --name "fullpage" --full-page
browser-devtools-cli content take-screenshot --name "photo" --type jpeg --quality 80
browser-devtools-cli content save-as-pdf --name "page" --format A4
Annotated Screenshot (ref labels)
Overlay numbered labels [1],[2] on interactive elements. Call a11y take-aria-snapshot first.
browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli content take-screenshot --annotate --name "annotated"
browser-devtools-cli content take-screenshot --annotate --annotate-content --name "with-headings"
Responsive Testing
browser-devtools-cli interaction resize-viewport --width 375 --height 667
browser-devtools-cli interaction resize-viewport --width 768 --height 1024
browser-devtools-cli interaction resize-viewport --width 1920 --height 1080
Figma Design Comparison
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34"
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--selector ".hero-section"
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--mssim-mode semantic
DOM Inspection
browser-devtools-cli content get-as-html
browser-devtools-cli content get-as-html --selector ".component"
browser-devtools-cli content get-as-text --selector ".content"
Viewport Presets
| Device | Width | Height | Command |
|---|
| Mobile S | 320px | 568px | --width 320 --height 568 |
| Mobile M | 375px | 667px | --width 375 --height 667 |
| Mobile L | 425px | 812px | --width 425 --height 812 |
| Tablet | 768px | 1024px | --width 768 --height 1024 |
| Laptop | 1366px | 768px | --width 1366 --height 768 |
| Desktop | 1920px | 1080px | --width 1920 --height 1080 |
Prerequisites for Figma Comparison
Figma API Access:
- Set
FIGMA_ACCESS_TOKEN environment variable
- Get token from Figma account settings
Optional (for enhanced comparison):
- AWS credentials for image/text embeddings
- Cloud inference profile configuration
Visual Testing Workflow
SESSION="--session-id visual-test"
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle
browser-devtools-cli $SESSION content take-screenshot --name "desktop"
browser-devtools-cli $SESSION interaction resize-viewport --width 375 --height 667
browser-devtools-cli $SESSION content take-screenshot --name "mobile"
browser-devtools-cli $SESSION interaction resize-viewport --width 768 --height 1024
browser-devtools-cli $SESSION content take-screenshot --name "tablet"
browser-devtools-cli session delete visual-test
Figma Comparison Workflow
1. Get Figma Reference
Find the Figma file key and node ID:
- File key: From URL
figma.com/file/{FILE_KEY}/...
- Node ID: Select frame → Copy link → Extract node-id parameter
2. Compare with Live Page
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123xyz" \
--figma-node-id "12:34" \
--selector ".hero-section"
3. Analyze Results
- Score 0.9-1.0: Excellent match
- Score 0.7-0.9: Minor differences
- Score 0.5-0.7: Significant differences
- Score < 0.5: Major mismatch
4. Investigate Differences
If score is low:
browser-devtools-cli content take-screenshot --name "mismatch" --selector ".hero-section"
browser-devtools-cli content get-as-html --selector ".hero-section"
Comparison Modes
Semantic Mode (Default)
- More tolerant of text/data differences
- Focuses on layout and structure
- Good for comparing sample vs real data
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--mssim-mode semantic
Raw Mode
- Stricter pixel comparison
- Expects near-identical output
- Good for static content
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--mssim-mode raw
Common Scenarios
Full Page Comparison
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "1:2" \
--full-page
Component Comparison
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "5:10" \
--selector ".card-component"
Responsive Testing with Figma
browser-devtools-cli interaction resize-viewport --width 375 --height 667
browser-devtools-cli figma compare-page-with-design \
--figma-file-key "ABC123" \
--figma-node-id "20:30"
Common Visual Checks
- Element visibility at breakpoints
- Text overflow and truncation
- Image aspect ratios
- Color and typography consistency
- Spacing and alignment
- Interactive state styling
Best Practices
- Use semantic mode for real data vs sample data
- Compare components not just full pages
- Test multiple viewports for responsive designs
- Document Figma references for CI/CD
- Set baseline scores for regression testing
- Review notes in response for signal details
- Take screenshots at key states (initial, hover, active)
