Compare / Chromatic

Screenery vs Chromatic

Chromatic is made by the team that maintains Storybook, and it is the strongest choice for testing Storybook components. Screenery has no Storybook integration. It publishes the screenshots your Playwright tests took, at URLs that follow your default branch.

What Chromatic does well

• Storybook, first-hand. Every story becomes a visual test, with no test code to write. TurboSnap re-tests only the stories a change can affect.
• Real browsers in the cloud. Chrome on the free plan; Safari, Firefox and Edge on paid plans.
• More than pixels. Interaction and accessibility tests run in the same pipeline.
• Sign-off. Reviewers approve changes per story, which suits design-system teams.
• Beyond Storybook. Playwright, Cypress and Vitest suites can upload page archives that Chromatic snapshots in its cloud.
• No per-seat pricing. You pay for snapshots, not users.

Side by side

Chromatic pricing, checked October 2026

From Chromatic's pricing page. Chromatic bills snapshots: one story or page, in one browser, at one viewport. A TurboSnap counts as a fifth of a snapshot.

Older third-party pages quote lower tiers. The prices above are from Chromatic's live page.

Where Screenery differs

An image you can put anywhere. Chromatic embeds a story as an iframe, pinned to one upload, and does not yet support embedding by branch. GitHub READMEs do not render iframes. A Screenery URL is a plain image, and it follows your default branch:

![Settings](https://cdn.screenery.dev/acme/dashboard/settings@latest.png)

A push on the default branch moves @latest. A pull request lands on @pr-N. Every push is also a version whose URL never changes. See Screenshot URLs.

The pixels your test saw. Chromatic's Playwright integration uploads an archive of each page and makes the snapshot in its cloud. Screenery stores the exact file your test wrote, in the browser your test ran. That is simpler, and it means no cross-browser rendering.

No token on GitHub Actions. Chromatic's GitHub Action needs a project token secret. Screenery's Action trades GitHub's OIDC token for a five-minute credential.

A different agent job. Chromatic's Storybook MCP gives an agent component context while it writes code. Screenery's MCP server tells an agent what its pull request changed on screen, against @latest. See Agents.

When to pick Chromatic instead

• You test a component library in Storybook. This is Chromatic's home ground, and Screenery cannot capture stories for you.
• You need Safari, Firefox and Edge renders without running those browsers in CI.
• You want interaction and accessibility tests in the same tool.
• Designers sign off on each story in a review screen.

You can also run both. Chromatic tests the components; Screenery publishes full-page screenshots from your Playwright suite for docs and the README.

Moving a Playwright suite

Chromatic's Playwright integration asks you to import test and expect from @chromatic-com/playwright, and it snapshots each test for you. Go back to Playwright's own import and save the screenshots you want published:

// before: import { test, expect } from '@chromatic-com/playwright';
import { test, expect } from '@playwright/test';

test('settings', async ({ page }) => {
  await page.goto('/settings');
  await expect(page.getByRole('heading', { name: 'Settings' })).toBeVisible();
  await page.screenshot({ path: 'test-results/settings.png', fullPage: true });
});

Replace the chromaui/action step and its project token with the Screenery Action:

permissions:
  id-token: write
  contents: read
  pull-requests: write
steps:
  # … check out, install, run your Playwright tests …
  - uses: screenery/push@v1
    with:
      project: acme/dashboard
      path: test-results

Add diff-baseline when a visual change should fail the job before anything is published. See Visual testing and Getting started.

Sources

Checked October 2026.

• Chromatic pricing
• Chromatic for Playwright
• Chromatic with GitHub Actions
• Chromatic embed docs

See also: all comparisons.