diff --git a/docs/snippets/common/chromatic-storybook-add.npm.js.mdx b/docs/snippets/common/chromatic-storybook-add.npm.js.mdx new file mode 100644 index 000000000000..e2acf17f17e3 --- /dev/null +++ b/docs/snippets/common/chromatic-storybook-add.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npx storybook@latest add @chromatic-com/storybook +``` diff --git a/docs/snippets/common/chromatic-storybook-add.pnpm.js.mdx b/docs/snippets/common/chromatic-storybook-add.pnpm.js.mdx new file mode 100644 index 000000000000..eec9409ebf86 --- /dev/null +++ b/docs/snippets/common/chromatic-storybook-add.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm dlx storybook@latest add @chromatic-com/storybook +``` diff --git a/docs/snippets/common/chromatic-storybook-add.yarn.js.mdx b/docs/snippets/common/chromatic-storybook-add.yarn.js.mdx new file mode 100644 index 000000000000..e105517209d9 --- /dev/null +++ b/docs/snippets/common/chromatic-storybook-add.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn dlx storybook@latest add @chromatic-com/storybook +``` diff --git a/docs/snippets/common/visual-test-addon-install.npm.js.mdx b/docs/snippets/common/visual-test-addon-install.npm.js.mdx deleted file mode 100644 index a63a0f07dcf2..000000000000 --- a/docs/snippets/common/visual-test-addon-install.npm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -npx storybook@latest add @chromaui/addon-visual-tests -``` diff --git a/docs/snippets/common/visual-test-addon-install.pnpm.js.mdx b/docs/snippets/common/visual-test-addon-install.pnpm.js.mdx deleted file mode 100644 index 4923e765528a..000000000000 --- a/docs/snippets/common/visual-test-addon-install.pnpm.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -pnpm dlx storybook@latest add @chromaui/addon-visual-tests -``` diff --git a/docs/snippets/common/visual-test-addon-install.yarn.js.mdx b/docs/snippets/common/visual-test-addon-install.yarn.js.mdx deleted file mode 100644 index e42e3c3ee723..000000000000 --- a/docs/snippets/common/visual-test-addon-install.yarn.js.mdx +++ /dev/null @@ -1,3 +0,0 @@ -```shell -yarn dlx storybook@latest add @chromaui/addon-visual-tests -``` diff --git a/docs/writing-tests/visual-testing.md b/docs/writing-tests/visual-testing.md index a8f3985ee70e..a848ada9eb60 100644 --- a/docs/writing-tests/visual-testing.md +++ b/docs/writing-tests/visual-testing.md @@ -14,17 +14,17 @@ Storybook supports cross-browser visual testing natively using [Chromatic](https /> -### Install Visual Tests addon +### Install the addon -Install the Visual Tests addon by running the following command: +Add visual tests to your project by installing `@chromatic-com/storybook`, the official addon by Storybook maintainers: @@ -40,17 +40,17 @@ Storybook 7.4 or higher is required. Read the [migration guide](../migration-gui When you start Storybook, you'll see a new addon panel for Visual Tests where you can run tests and view results. -![Visual Tests Addon enabled](./vta-enable.png) +![Visual Tests addon enabled](./vta-enable.png) To enable visual testing, sign up for [Chromatic](https://www.chromatic.com/start?startWithSignup=true&ref=storybook_site) and create a project. This will give you access to a fleet of cloud browsers. -![Visual Tests Addon project selection](./vta-select-project.png) +![Visual Tests addon project selection](./vta-select-project.png) Select a project from your project list to finish setup. If you're setting up the addon for the first time, the configuration files and necessary project identifiers will be added for you automatically. ### Configure -Visual Tests addon includes configuration options covering most use cases by default. You can also fine-tune the addon configuration to match your project's requirements via the [`./chromatic.config.json`](https://www.chromatic.com/docs/cli#configuration) file. Below are the available options and examples of how to use them. +The addon includes configuration options covering most use cases by default. You can also fine-tune the addon configuration to match your project's requirements via the [`./chromatic.config.json`](https://www.chromatic.com/docs/cli#configuration) file. Below are the available options and examples of how to use them. | Option | Description | | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |