Sign inSign up

Chromatic changelog: May 2024

New snapshot features including improved handling of GIFs, videos & animations. Alongside a few UI enhancements.

loading
Varun Vachhar
@winkerVSbecks
Last updated:

Chromatic Capture Cloud version 6 rollout is now complete. This update delivers the latest stable browser versions for Chromatic and includes several quality-of-life improvements for a streamlined workflow.

  • ⏯️ Auto pause for of GIFs & videos
  • 🎞️ Improved handling of CSS animations
  • ✂️ Crop to viewport flag
  • 🪟 Modes now support defaultViewport from Storybook
  • 🔍 Branch Picker now includes search functionality

Let's dive in!

Browser upgrades

Chromatic Capture Cloud Infrastructure has been updated with the following browser versions. To ensure seamless migration, Chromatic uses upgrade builds to migrate your test baselines between infrastructure versions without false positives.

  • Chrome version updated to version 121
  • Firefox version updated to version 121
  • Safari version updated to version 17.4
  • Edge version updated to version 121
Chromatic captures snapshots in Chrome by default. You can enable additional browsers via the configure page of your project.

New snapshot features

Auto pause GIFs and videos

Chromatic now automatically pauses GIFs and videos at their first frame, ensuring consistent visual tests without the need for custom workarounds. For videos, if you specify a poster, Chromatic will use that image instead.

This means you won't have to implement extra steps to pause media during visual tests. Additionally, your snapshots will be more reliable since they'll consistently capture the same starting frame.

CSS animation pausing now defaults to “end”

We've made a change to how Chromatic handles CSS animation pausing. Previously, animations would pause at the first frame. Based on your feedback about “animate in” effects, we've switched the default behavior to pause animations at the end. This ensures UI elements that “animate in” are fully visible in your snapshots.

If you need the previous behavior (pausing at the first frame), you can easily set pauseAnimationAtEnd to false. Learn more »

Added support for Storybook's default viewport setting

Chromatic now seamlessly respects the defaultViewport settings you define within Storybook. This means you can avoid redundant viewport configurations between Storybook and Chromatic.

The default viewport is configured by applying the parameters.viewport value at the project, component, or story level. This controls the dimensions of the story canvas when viewing it in the browser using Storybook. Chromatic will now use the default viewport size when capturing snapshots.

For more details and examples, please refer to our docs: https://www.chromatic.com/docs/viewports/#using-defaultviewport

0:00
/0:15

Crop to viewport

Chromatic now offers the option to crop snapshots to the defined viewport size. To enable this behavior, set the parameters.chromatic.cropToViewport flag to true.

Why use it? Chromatic captures the full height of the rendered UI by default, regardless of any set viewport height. This is because, in most cases, capturing the entire UI of a test is preferred. Using Crop to Viewport allows you to snapshot only the visible area within the viewport.

Learn more in our docs: https://www.chromatic.com/docs/viewports/#can-i-control-the-height-of-the-viewport

Updated the default monospace font

We've updated Chromatic's default monospace font to maintain consistency across various browsers & operating systems used for snapshots.

This change may cause visual diffs if you don't explicitly declare a monospace font in your CSS (e.g., using font-family: monospace;).

To resolve this, please define your desired monospace font in your CSS or review and approve the snapshot differences in Chromatic. We apologize for any inconvenience this may cause.

UI Improvements

Branch Picker now offers search functionality

You’re on the build page and you want to switch to a different branch. But your project has hundreds of branches. Fear not! The new branch picker can now filter by your search query!

0:00
/0:07

We also added support for checkboxes in comments

0:00
/0:34

Perf improvements to UI Review pages

Have you noticed that the UI Review pages load much faster now? A big shoutout to our engineers for implementing a range of optimizations on our backend, resulting in faster loading times and snappier UI.

Other little updates

  • We patched security (CSRF) vulnerability in invite flow. Folks now have to explicitly accept the invite.
  • Chromatic now warns users and exits early if the preview-stats.json file is missing when running a build with TurboSnap enabled.

Visual testing using Playwright & Cypress

Run Playwright or Cypress E2E tests and snapshot pages with Chromatic to detect visual bugs

Chromatic 3 introduced integrations for Playwright and Cypress, enabling you to leverage your existing setup—configuration, mocking, and E2E tests—to enable visual testing of your application’s UI. That means you can verify how UIs look and function simultaneously.

If you haven't tried it yet, take a look at our new quick start guides:

How ezCater Uses Chromatic

Lastly, we have a new customer story to share with you all. See how ezCater, a leader in business catering with a network of over 100,000 restaurants, switched from Jest to Storybook's interaction tests to streamline their UI testing strategy. By combining Storybook with Chromatic, they can now verify both the appearance and functionality of their UI simultaneously.

Read customer story »

Two of ezCater's Storybooks

Did this article help you?

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

4,482 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

Chromatic changelog: Oct 2024

Usage reports, snapshot trace viewer, ignore selectors list and a preview Page Shift Detection
loading
Varun Vachhar

Chromatic 3

Visual testing integrations for Storybook, Playwright and Cypress, plus 4x faster visual tests, TurboSnap, and so much more
loading
Dominic Nguyen

Visual Tests addon is here

Run Chromatic visual tests inside Storybook
loading
Dominic Nguyen
Product
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
Chromatic
© Chroma Software Inc. Made by the maintainers of Storybook.