Product
Introducing Ruby Support in Socket
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
chromatic
Advanced tools
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
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.
Publishes your Storybook to Chromatic and kicks off tests if they're enabled.
👉 Read the Chromatic CLI docs
📝 View the Changelog
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:
Before publishing, make sure you've done the following:
yarn build
canary
or next
releaseWe have two types of pre-releases: canary
and next
. canary
releases are intended for development 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.
As a consumer, you should not specify a tag (e.g.
chromatic@next
) in your package dependencies, but rather a specific version number (e.g.chromatic@5.6.2-next.0
). Otherwise you'll end up with a broken build when we remove or update the tag.
For the first canary
(or next
) release, bump the version like so (depending on the semver bump):
npm version <premajor|preminor|prepatch> --preid canary
For consecutive canary
releases on the same version:
npm version prerelease --preid=canary
Then push and publish:
git push --follow-tags
npm publish --tag canary
Make sure to replace canary
with next
if appropriate.
latest
releaseA final release is automatically tagged latest
by npm.
npm version <major|minor|patch>
git push --follow-tags
npm publish
And finally, remove the canary
and/or next
tag, if any:
npm dist-tag rm chromatic canary
This ensures we can safely do a new canary
or next
release later, without anyone getting an unexpected update.
5.9.2 - 2021-06-15
FAQs
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
The npm package chromatic receives a total of 1,258,957 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 9 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.
Product
Socket is launching Ruby support for all users. Enhance your Rails projects with AI-powered security scans for vulnerabilities and supply chain threats. Now in Beta!
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.