ContactSign inSign up
Contact

Chromatic’s Playwright & Cypress integrations enter public beta

Integrate Chromatic with Cypress and Playwright

loading
Dominic Nguyen
@domyen
Last updated:
💡
TL;DR: Try Chromatic’s visual test integration for Cypress and Playwright! Get started with Playwright or get started with Cypress. If you’re already using the beta, learn more about this release’s improved integration setup.

Chromatic is a specialized visual testing tool for developers, built by the makers of Storybook.

For the past few months, we’ve been working on Chromatic’s first-ever plugins for Cypress visual testing and Playwright visual testing. Today, that integration (E2E Visual Tests) enters public beta!

Here’s a recap on why we’re expanding to end-to-end tests (in parallel with Storybook), how you can integrate Chromatic with Cypress and Playwright, and our next steps towards the full release.

Why integrate Chromatic with Cypress and Playwright?

When you think of visual tests (if you aren’t already using them), you might imagine manually eyeballing every detail of a UI.

Instead, in recent years, there has been a visual testing revolution. More and more teams are using highly specialized tools to automate UI tests in CI/CD, capture interactive snapshots (complete with assets and styling) and prevent broken visuals from getting into production. Just as end-to-end tests safeguard your application’s behavior, these visual tests protect your pixels and UX, while reducing churn, costs, and headaches. 

Teams like Adobe, The BBC, The Guardian, and Monday.com are doing precisely this with Storybook and Chromatic.

0:00
/0:07

Our goal for E2E Visual Tests is to give you the best of E2E testing and visual testing in a single workflow. Let Playwright or Cypress validate app functionality while Chromatic handles the visuals.

Learn more about the importance of visual testing in Chromatic’s visual testing guide.

Do you need a visual testing integration?

Both Playwright and Cypress are functional testing tools that specialize in how your application works rather than how it looks. Playwright enables basic screenshots but Chromatic provides a more complete visual testing experience by giving you DOM inspection, tracking baseline history, and a diff inspector, while Cypress depends on third-party tools entirely. 

Combining a specialized visual testing tool like Chromatic with your specialized functional testing tool in Cypress or Playwright lets you cover both domains with purpose-built, specialized tools, combined into one seamless process.

Try Chromatic

Chromatic’s E2E Visual Tests are free to use during the beta period. Here’s how to get started.

Playwright

To configure Chromatic for Playwright, install the dependencies:

npm install --save-dev chromatic @chromatic-com/playwright

Update your Playwright tests with @chromatic-com/playwright imports:

-import { test, expect } from '@playwright/test';
+import { test, expect } from "@chromatic-com/playwright";

// Then use Playwright as normal. For example 👇
test("Homepage", async ({ page }) => {
  await page.goto("<https://mealexpress.com/>");

  await expect(page).toHaveTitle("Mealdrop - find your next meal");

  // ...
});

Run Playwright as usual:

npx playwright test

Run a Chromatic build:

npx chromatic --playwright -t=<TOKEN>

For more details, check out the Playwright setup guide.

Cypress

To configure Chromatic for Cypress, install the dependencies:

npm install --save-dev chromatic @chromatic-com/cypress

Add the following to your cypress/support/e2e.js file:

import "@chromatic-com/cypress/support";

Install the Chromatic plugin in your cypress.config.js file:

const { defineConfig } = require("cypress");
const { installPlugin } = require("@chromatic-com/cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      installPlugin(on, config);
    },
  },
});

Run Cypress as usual:

ELECTRON_EXTRA_LAUNCH_ARGS=--remote-debugging-port=9222 npx cypress run

Run a Chromatic build:

CHROMATIC_ARCHIVE_LOCATION=./cypress/downloads npx chromatic --cypress -t=<TOKEN>

For more details, check out the Cypress setup guide.

Upgrade guide

If you were previously using Chromatic's E2E Visual Tests, the beta release includes changes which improve the setup process. Learn more by referring to the upgrade guide.

Official release

The full release of E2E Visual Tests will form part of Chromatic 3.0, our next major release coming in the first half of 2024. This will include many of Chromatic’s most highly-requested features, including TurboSnap (a configuration setting that only runs tests for UI with changes) and our first-ever addon for automated visual tests inside Storybook (see Storybook 8 beta announcement).

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,486 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Visual testing with Playwright

Learn how to perform visual tests in Playwright
loading
Kyle Gach

Visual testing with Cypress

Integrate Chromatic with Cypress to get visual test coverage at every point of your end-to-end test run
loading
Joe Vaughan

TurboSnap (beta)

Test faster and more efficiently without sacrificing coverage
loading
Dominic Nguyen
Company
AboutCareersTerms of ServicePrivacySecurity • SOC 2StatusContact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.