Visual Assertions

Assert that a page or element still looks right with Biloba's Go/Gomega visual regression matcher (b.HaveScreenshot) — writing the assertion, the golden-master workflow for creating and updating committed baselines with BILOBA_UPDATE_SCREENSHOTS=1 (review the .actual.png, update mode settles to three consecutive equal captures before writing so a write is not instantaneous, the actionable "never settled" warning, commit the baselines dir, never set the var in CI, nothing prunes orphaned baselines), reading the text diagnosis of a failed comparison without opening an image, and the determinism tools (b.Mask for timestamps/avatars, the automatic animation freeze and b.Animated() to opt out, b.Tolerance/b.ChannelTolerance, b.InColorSchemes for light+dark). Also covers the two directories (committed baselines vs gitignored actual/diff artifacts), the ways a visual assertion can go silently vacuous (a subject clipped out of its own capture by an inner scroll container, two colour schemes that render identically), and the hazards Biloba does not solve (scrollbars, cross-platform font rendering, closed shadow roots, a JS pulse with only two or three renderings, a late one-shot change that is not a web font). Use when a spec needs to assert appearance, when a HaveScreenshot comparison failed, or when setting up visual regression in a suite.

Eventually(".librarian").Should(b.HaveScreenshot("librarian-rail"))  // one element, clipped to its box
Eventually(b).Should(b.HaveScreenshot("home-desktop"))               // the whole page
Eventually(".card").Should(SatisfyAll(b.BeInViewport(b.Fully()), b.HaveScreenshot("card")))

mkdir -p ~/.claude/skills/visual-assertions
curl -L https://claudskills.com/skills/visual-assertions/SKILL.md \
  -o ~/.claude/skills/visual-assertions/SKILL.md

@misc{visual-assertions-2026,
  author    = {onsi},
  title     = {Visual Assertions [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/visual-assertions/}
}