Component Screenshot Testing Skill

Captures React component screenshots and compares them to baseline PNGs. Tests that UI components render correctly at the pixel level.

This is about component appearance, not data or canvas rendering. It catches:

• Color/style changes in React components
• Layout shifts and alignment issues
• Missing or misplaced UI elements
• Theme/styling regressions

For canvas-based filmstrip testing (matrix progressions), see canvas-filmstrip-testing.

When to Use This

• Testing React components (buttons, controls, panels, etc.)
• UI styling changes
• Theme/dark mode appearance
• Component layout verification