Screenshot testing a design system with Playwright and Docker
I work on the Koobiq design system, which has component libraries for React and Angular . in this article I'll show how the screenshot tests in our React library are set up and which decisions made running them and updating baselines easier. Problem in Koobiq React , the shared FormField wrapper is the base of every field: Input, Select, Textarea, DateInput and a dozen others. change its padding…
The author works on the Koobiq design system, which includes component libraries for React and Angular. Screenshots tests in the React library are set up using Playwright on top of Storybook. Each component gets a test story with variants and states, and one test takes a screenshot in both light and dark themes. Pixel precision is used, and tests fail on any changed pixel.
The environment is fixed, and screenshots are compared only inside a Docker image, both locally and in CI. Baselines are stored in Git, live next to the component in the same PR, and updating them is straightforward. Updating baselines doesn't require Docker; a simple comment on the PR regenerates them in CI and commits them to the branch.
The test grid consists of six variants by six states in each theme, totaling 72 combinations. Test 01 focuses on buttons with text and icons, while Test 02 and 03 cover icon-only buttons and buttons with text and icons on both sides, respectively. Shared helpers and environment live separately from tests and baselines, which are located in the component folder.
Playwright configuration sets the locale, time zone, disables animations, and sets a zero comparison threshold to ensure tests fail on any changed pixel.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
