Chromatic’s Playwright & Cypress integrations enter public beta

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.

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.

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).

Related content

• How to visual test with Playwright
• How to visual test with Cypress