Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
chromatic
Advanced tools
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.
yarn add chromatic
You can use this package normally, which means installing it and adding a script called chromatic
to your package.json
"chromatic": "chromatic",
But alternatively (and this is useful for testing) you can use npx:
Use a git branch:
npx -p chromaui/chromatic-cli#master chromatic --dev
Use a debug version on npm:
npx -p chromatic chromatic
Using npx has pros and cons:
There are examples here: /.github/workflows.
Do not run this based on a github pull_request event. If you do, the commit and branch will get reported wrong, use https://github.com/chromaui/action instead.
--project-token="<your token>"
You can also use the environment variable: CHROMATIC_PROJECT_TOKEN
--build-script-name [name], -b The npm script that builds your Storybook [build-storybook]
--storybook-build-dir, -d <dirname> Provide a directory with your built storybook; use if you've already built your storybook
Deprecated options (for tunneled builds):
--script-name [name], -s The npm script that starts your Storybook [storybook]
--exec <command>, -e Alternatively, a full command to run to start your storybook
--do-not-start, -S Don't attempt to start or build; use if your Storybook is already running
--storybook-port <port>, -p What port is your Storybook running on (auto detected from -s, if set)
--storybook-url <url>, -u Storybook is already running at (external) url (implies -S)'
--storybook-https Use if Storybook is running on https (auto detected from -s, if set)
--storybook-cert <path> Use if Storybook is running on https (auto detected from -s, if set)
--storybook-key <path> Use if Storybook is running on https (auto detected from -s, if set)
--storybook-ca <ca> Use if Storybook is running on https (auto detected from -s, if set)
These options are not required, this CLI is 0-config if you have a build-storybook
script in your package.json
.
--allow-console-errors Continue running chromatic even if some stories throw an error
--auto-accept-changes [branch] Accept any (non-error) changes or new stories for this build [only for <branch> if specified]'
--exit-zero-on-changes [branch] Use a 0 exit code if changes are detected (i.e. don't stop the build) [only for <branch> if specified]
--exit-once-uploaded [branch] Exit with 0 once the built version has been sent to chromatic [only for <branch> if specified]
--ignore-last-build-on-branch [branch] Do not use the last build on this branch as a baseline if it is no longer in history (i.e. branch was rebased) [only for <branch> if specified]'
--preserve-missing Treat missing stories as unchanged (as opposed to deleted) when comparing to the baseline'
--no-interactive Do not prompt for package.json changes
--only <component:story> Only run a single story or a glob-style subset of stories (for debugging purposes
--skip Skip chromatic tests (mark as passing)
--list List available stories (for debugging purposes)
--ci This build is running on CI, non-interactively (alternatively, pass CI=true)
--debug Output more debugging information
This package will load any variables from a .env
file if present
If you encounter issues with the CLI please report them via the in-app chat (Intercom widget) or at https://github.com/chromaui/chromatic-cli/issues. Thanks!
Because of the nature of this package: it being a connector between Storybook and a web service, you may need a project token to test this locally. Just send us a message at opensource@hichroma.com
or sign up for an account!
All contributions are welcome!
--config
flagWe publish with a script:
./scripts/publish.js
You can pass any flags to this you'd normally be able to pass to npm publish
, such as --dry-run
or --tag="alpha"
.
Before publishing we check if the current user has permissions and if the version isn't already on npm
Compatibility is guaranteed between this package and Chromatic like so:
To facilitate upgrading in the future, removing and adding features, this is the process:
FAQs
Automate visual testing across browsers. Gather UI feedback. Versioned documentation.
The npm package chromatic receives a total of 1,587,087 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
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.