skills.rest
Eyhenij
EyhenijCOMMUNITY
Explore all skills by this author →
GitHub

ui-component-tests-visual

Manages visual snapshot testing of Storybook stories with reference comparison and divergence triage.

1|Updated Jan 14, 2024
Search Tags:#angular#playwright#visual testing#storybook#ui components#test-runner#snapshot testing
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill ui-component-tests-visual-eyhenij
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component-tests-visual
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/ui-component-tests-visual
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill ui-component-tests-visual-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Visual snapshot tests for UI components fail in confusing ways: states like hover and overlays never reach the frame, random data and native controls drift between runs, and fallen snapshot runs are hard to attribute to your own change versus the environment. This Skill encodes the patterns for writing snapshot-ready stories, keeping frames deterministic, and sorting out divergences without blindly re-taking references. ## Core Features & Use Cases - Snapshot-ready stories: Capture hover states via a snapshotHover parameter, open overlays in play with a snapshotViewport frame, and reach states that inputs cannot set. - Deterministic frames: Seed random data, inline images as bytes, pin timezone and browser language, and drive skeleton animations to completion before the shot. - Story sweep before references: Run a sweep over all stories checking the showing area and console errors (NG0201, NG0950) before taking references for the first time. - Divergence triage: Diagnose fallen runs by divergence share, re-take one reference at a time, and recognize browser-upgrade or faker-upgrade divergences that are not layout bugs. - Use Case: A Storybook snapshot run falls after a Playwright upgrade. Instead of re-taking everything, you inspect the difference frames, see only native controls diverged, and conclude the browser changed — not the layout. ## Quick Start Ask the agent to apply the ui-component-tests-visual pattern to add a hover-state snapshot story for a component and sort out the currently fallen snapshot run.

Frequently Asked Questions about ui-component-tests-visual

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I snapshot test hover states in Storybook stories?▼

Add a `snapshotHover` story parameter pointing at the target selector so the harness moves a real pointer before the frame. Playing a hover event from the story does not survive, because a whole-page snapshot re-lays out the page.

How do I capture overlays and popups in visual snapshot tests?▼

Open the overlay with a click in the story's `play` function and set a `snapshotViewport` parameter tall enough to contain it. Content outside the page flow is not built up by a whole-page snapshot, and a popup above the frame gets cut off.

Why do visual snapshots diverge after a Playwright or browser upgrade?▼

A newer Chromium draws native controls — textarea grips, scrollbars, focus rings — a pixel differently on stories nobody edited. If difference frames show only native controls and computed values match, hold the browser version or deliberately re-take the touched references.

How do I make Storybook snapshot tests deterministic?▼

Seed random data generators in preview.ts, serve images as bytes in the address, pin the timezone and browser launch language in the runner settings file, and let the harness drive skeleton animations to completion before the shot.

Why does storybook-addon-pseudo-states break the snapshot test run?▼

The addon touches `Element` at the top level, which does not exist in Node, so the run fails to find story files and every test falls. The fix is to skip loading the addon when the snapshot run environment variable is set, while never raising the showcase with it.

Should I re-take all snapshot references when a run falls?▼

No. Re-take one reference at a time by deleting its file and re-running, because re-taking everything erases divergences you did not expect. Also read the orphaned-reference list only after curing divergences, since fallen first frames can make later references look orphaned.

Related Skills

Explore More Software Engineering Skills→
Layer-FiLayer-Fi
10

storybook

Author Storybook stories and manage Chromatic visual regression snapshots for React components.

Official
Advanced
kamp-uskamp-us
25

ship-it

Automate squash merging of verified Pull Requests with green CI status.

Official
Advanced
apexiveapexive
211

odoo-app-landing-page

Generate sanitized index.html landing pages for Odoo App Store modules.

Official
Advanced
growilabsgrowilabs
1.5k

essential-test-design

Guide test authors to verify observable behavior instead of internal implementation details.

Official
Intermediate