chromatic
Advanced tools
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
Readme
Publishes your Storybook to Chromatic and kicks off tests if they're enabled.
👉 Read the Chromatic CLI docs
📝 View the Changelog
next versionFrom time to time we pre-publish a next version of the package to test new features. To use the
next branch you can either:
npxChange your script to use the next dist-tag:
npx chromatic@next --project-token ...
package.jsonUpdate to the latest next version with:
yarn add --dev chromatic@next
# or
npm i --save-dev chromatic@next
Use our chromatic-next action:
- uses: chromaui/action-next@v1
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 253df72b53d2
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>
Before publishing, make sure you've done the following:
We have three types of releases:
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.next releases should be valid, working releases that can potentially be used by early adopters of new features, for example to handle a support request.latest releases are the general audience production releases, used by most people.For GitHub Actions, we publish
chromaui/action-canaryandchromaui/action-next, which contain the latestcanaryornextrelease, respectively. Alatestrelease will also automatically updatechromaui/action-next(besideschromaui/action), in order to keep users who happen to depend onchromaui/action-nextup to date with thelatestrelease.
A script is provided to create new releases:
yarn release <major|minor|patch> <canary|next|latest> [--dry-run]
This script ensures the version is bumped properly, the tag is set correctly and the corresponding GitHub Action is updated.
yarn release patch canary
Releases e.g. 6.6.1-canary.0.
yarn release major latest
Releases e.g. 7.0.0.
FAQs
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
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
In June 2023, Google sold all Google Domains accounts to Squarespace but more than a dozen customers have had their domains hijacked in the last week due to weak security defaults and migration issues.
![Massive Automated Spam Campaign Abuses GitHub to Flood npm Registry with Thousands of Garbage Tea[.]xyz Packages](https://cdn.sanity.io/images/cgdhsj6q/production/a74d1072ff2bb5cb96a404be58a649931ced2ba5-1024x1024.webp?w=400&fit=max&auto=format)
Security News
In a reprisal of their previous Tea[.]xyz spam campaign, a new wave of thousands of garbage packages are hitting npm, to artificially inflate the number of dependents for spammers' projects.
Security News
The maintainer of the node-ip project restored the GitHub repo after disputing an exaggerated CVE rating, highlighting the impact of bogus CVEs on open source projects.