chromatic
Advanced tools
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
Package description
The npm package 'chromatic' is a tool designed to help developers automate visual testing for their UI components. It captures snapshots of components and runs visual regression tests to ensure that changes do not break the visual appearance of applications. Chromatic integrates with Storybook to manage component libraries and streamline the testing process.
Visual Testing
This code sample demonstrates how to add a visual test for a simple button component using Chromatic with Storybook. The 'withChromatic' decorator is used to enable Chromatic's snapshot capabilities for the component.
import { storiesOf } from '@storybook/react';
import { withChromatic } from 'chromatic/isolated';
storiesOf('Button', module)
.addDecorator(withChromatic)
.add('default', () => <button>Click me</button>);Snapshot Management
This code configures Chromatic to take snapshots after a delay and at specified screen widths, facilitating responsive visual testing. It helps in managing how snapshots are captured based on different device widths.
import { configure } from '@storybook/react';
import { setChromaticOptions } from 'chromatic';
setChromaticOptions({
delay: 300, // Delay in ms before taking a snapshot
widths: [320, 1200] // Array of widths for responsive testing
});
configure(() => require('./stories'), module);Storybook is a user interface development environment and playground for UI components. It facilitates building UI components in isolation and structuring a component library. While it does not offer visual regression testing by itself, it is often used in conjunction with Chromatic to provide that functionality.
Percy by BrowserStack is a visual testing and review platform that integrates with your CI/CD pipeline. It captures screenshots of web pages and components, compares them against the baseline, and highlights visual changes. Percy offers a more comprehensive CI/CD integration compared to Chromatic, which is more tightly coupled with Storybook.
BackstopJS automates visual regression testing of web applications by comparing DOM screenshots over time. It is a standalone tool that can be used without Storybook, providing a different approach to visual testing compared to Chromatic's dependency on Storybook for component management.
Changelog
v11.3.0 (Fri Mar 29 2024)
v prefix from shipIt's version to avoid double prefixing tags #960 (@ghengeveld)Readme
Publishes your Storybook to Chromatic and kicks off tests if they're enabled.
👉 Read the Chromatic CLI docs
📝 View the Changelog
The Chromatic CLI (and GitHub Action) is built to run in a variety of environments. We provide support for the following platforms:
Other platforms/versions may work, but are not officially supported. Certain features may not be available on certain platforms/versions, even if otherwise supported.
Contributions of any kind are welcome! We're available to chat via the Intercom widget on the documentation site.
Compatibility is guaranteed between this package and Chromatic like so:
To facilitate upgrading in the future, removing and adding features, this is the process:
yarn installyarn devyarn chromatic -t <token>.CHROMATIC_INDEX_URL=https://index.staging-chromatic.com yarn chromatic -t <token>
To test against a local development version of the Chromatic stack, use
CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>
To only test a small number of test stories as a smoke test, use:
SMOKE_TEST=1 CHROMATIC_INDEX_URL=https://index.dev-chromatic.com yarn chromatic -t <token>
We use auto to automate the release process. Versions are bumped, tags are created and the changelog is updated automatically. A new release goes out whenever a PR is merged to main. A PR must have exactly one of the following labels before merging:
major triggers a major version bumpminor triggers a minor version bumppatch triggers a patch version bumpAdditionally, a PR may have exactly one of these labels:
release creates a latest release on npmskip-release does not create a release at all (changes roll into the next release)We have two types of releases:
latest releases are the general audience production releases, used by most people. Automatically created when merging a PR with the release label.canary releases are intended for testing purposes and should not be used in production, as they may only work against a staging or dev environment. Automatically created on every PR, but does not auto-publish the GitHub Action.For GitHub Actions, we may manually publish
chromaui/action-canary.
A script is provided to manually publish the GitHub Action, though it's typically only necessary for action-canary releases:
yarn publish-action <canary|latest>
FAQs
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
The npm package chromatic receives a total of 1,421,663 weekly downloads. As such, chromatic popularity was classified as popular.
We found that chromatic demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno's Standard Library has stabilized after four years of development, offering developers a collection of well-maintained tools compatible with Deno, Node.js, Cloudflare Workers, and browsers with bundlers.
Security News
Trivial packages, while convenient, can introduce significant risks such as dependency bloat, security vulnerabilities, and performance issues in modern software projects.
Security News
PyPI has drastically improved its malware response times, resolving 90% of issues in under 24 hours and removing 900 projects since March 2024.