{
  "id": 10272882,
  "title": "Screenshot testing a design system with Playwright and Docker",
  "url": "https://urgent.news/2026/09/27/screenshot-testing-a-design-system-with-playwright-and-docker",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-27T19:03:36.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/artembelik/screenshot-testing-a-design-system-with-playwright-and-docker-1pci"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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…",
  "key_points": [
    "Koobiq design system includes React and Angular component libraries",
    "Screenshots tests use Playwright on Storybook with pixel precision",
    "Tests run in Docker, baselines stored in Git next to components"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}