Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@chromaui/addon-visual-tests
Advanced tools
Readme
The Visual Testing addon enables you to run visual tests on your stories and compare changes with the latest baselines across multiple viewports and browsers to catch UI regressions early in development without leaving Storybook.
Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:
npx storybook@latest add @chromaui/addon-visual-tests
Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!
By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, you can extend your Storybook configuration file (i.e., .storybook/main.js|ts
) and provide additional options to control how tests are run. Listed below are the available options and examples of how to use them.
Option | Description |
---|---|
buildScriptName | Optional. Defines the custom Storybook build script options: { buildScriptName: 'deploy-storybook' } |
debug | Optional. Output verbose debugging information to the console. options: { debug: true } |
projectId | Automatically configured. Sets the value for the project identifier options: { projectId: Project:64cbcde96f99841e8b007d75 } |
zip | Recommended for large projects. Configures the addon to deploy your Storybook to Chromatic as a zip file. options: { zip: true } |
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from "@storybook/your-framework";
const config: StorybookConfig = {
framework: "@storybook/your-framework",
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
// Other Storybook addons
"@chromaui/addon-visual-tests",
{
name: "@chromaui/addon-visual-tests",
options: {
projectId: "Project:64cbcde96f99841e8b007d75",
buildScriptName: "build-storybook",
zip: true,
debug: true,
},
},
],
};
export default config;
The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes.
To update, take https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql and save it under src/gql/public-schema.graphql
.
When installed, running Storybook may lead to the following error:
const stringWidth = require('string-width');
Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
This is a known issue when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can upgrade to the latest stable version. However, if you cannot upgrade, adjust your package.json
file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your node_modules
directory and yarn.lock
file before installing the dependencies again.
"resolutions": {
"jackspeak": "2.1.1"
}
Alternatively, you could use a different package manager (npm, pnpm).
We welcome contributions to the Storybook Addon Visual Tests! If you're a maintainer, refer to the following instructions to set up your development environment with Chromatic.
FAQs
Visual Testing addon with Chromatic
The npm package @chromaui/addon-visual-tests receives a total of 14,970 weekly downloads. As such, @chromaui/addon-visual-tests popularity was classified as popular.
We found that @chromaui/addon-visual-tests demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 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
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.