### Install Chromatic with yarn

Source: https://www.chromatic.com/docs/playwright

Install the chromatic and @chromatic-com/playwright packages using yarn.

```bash
yarn add --dev chromatic @chromatic-com/playwright
```

--------------------------------

### Install Chromatic with npm

Source: https://www.chromatic.com/docs/cypress

Install the chromatic and @chromatic-com/cypress packages using npm.

```bash
npm install --save-dev chromatic @chromatic-com/cypress
```

--------------------------------

### Install Chromatic with pnpm

Source: https://www.chromatic.com/docs/playwright

Install the chromatic and @chromatic-com/playwright packages using pnpm.

```bash
pnpm add --dev chromatic @chromatic-com/playwright
```

--------------------------------

### Basic Chromatic Integration in Bitbucket Pipelines

Source: https://www.chromatic.com/docs/bitbucket-pipelines

This snippet shows the fundamental setup for running Chromatic as part of your default Bitbucket pipeline. It installs dependencies and then executes the Chromatic CLI.

```yaml
image: node:krypton

definitions:
  caches:
    npm: $HOME/.npm

pipelines:
  default:
    - stage:
        name: "UI Tests"
        steps:
          - step:
              name: "Run Chromatic"
              caches:
                - npm
                - node
              script:
                # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
                - npm ci
                - npx chromatic
```

--------------------------------

### Install Chromatic with pnpm

Source: https://www.chromatic.com/docs/cypress

Install the chromatic and @chromatic-com/cypress packages using pnpm.

```bash
pnpm add --dev chromatic @chromatic-com/cypress
```

--------------------------------

### Install Chromatic with yarn

Source: https://www.chromatic.com/docs/cypress

Install the chromatic and @chromatic-com/cypress packages using yarn.

```bash
yarn add --dev chromatic @chromatic-com/cypress
```

--------------------------------

### Install Chromatic with npm

Source: https://www.chromatic.com/docs/playwright

Install the chromatic and @chromatic-com/playwright packages using npm.

```bash
npm install --save-dev chromatic @chromatic-com/playwright
```

--------------------------------

### Basic Chromatic Integration in GitLab CI

Source: https://www.chromatic.com/docs/gitlab

This snippet shows the fundamental setup for running Chromatic as part of your UI_Tests stage in GitLab CI. It ensures dependencies are installed and then executes the Chromatic CLI.

```yaml
image: node:krypton

stages:
  - UI_Tests

cache:
  key: $CI_COMMIT_REF_SLUG-$CI_PROJECT_DIR
  paths:
    - .npm/

before_script:
  # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
  - npm ci

Chromatic:
  stage: UI_Tests
  script:
    - npx chromatic

```

--------------------------------

### CI Job Example

Source: https://www.chromatic.com/docs/ci

Example of a CI job configuration to install dependencies, run Playwright tests, and then run Chromatic visual tests. If UI Test or UI Review are enabled, it will return a non-zero exit code when there are changes.

```yaml
- run:
    command: npm install # install dependencies
- run:
    command: npx playwright test # run your playwright tests
- run:
    command: npm run chromatic # run visual tests
```

--------------------------------

### Example Storybook Configuration (After)

Source: https://www.chromatic.com/docs/sunsetting-preserve-missing

Shows an updated Storybook configuration that explicitly includes stories from multiple projects with prefixes.

```javascript
// .storybook/main.js

const config = {
  stories: [
    {
      directory: '../projectA',
      files: '*.stories.*',
      titlePrefix: 'Project Alpha',
    },
    {
      directory: '../projectB',
      files: '*.stories.*',
      titlePrefix: 'Project Beta',
    },
  ],
};

export default config;

```

--------------------------------

### Install Storybook MCP Addon

Source: https://www.chromatic.com/docs/mcp

Run this command to install and register the Storybook MCP addon. This enables the MCP server functionality within your Storybook.

```bash
npx storybook add @storybook/addon-mcp
```

--------------------------------

### Basic Chromatic CI Workflow

Source: https://www.chromatic.com/docs/custom-ci-provider

This snippet shows the fundamental steps to install dependencies, run tests, and publish to Chromatic using npm. Ensure your package manager's CI installation command is correctly used.

```yaml
image: node:krypton

- run:
    # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
    command: npm ci
- run:
    command: npm test
- run:
     # 👇 Publish Storybook and run visual tests in Chromatic
    command: npx chromatic

```

--------------------------------

### Example Storybook Configuration (Before)

Source: https://www.chromatic.com/docs/sunsetting-preserve-missing

Illustrates a common Storybook configuration that uses an environment variable to conditionally include stories.

```javascript
// .storybook/main.js

const stories = {
  projectA: '../projectA/**.stories.js',
  projectB: '../projectB/**.stories.js',
  // etc
};

const config = {
  stories: stories[process.env.STORYBOOK_PROJECT] || '**/*.stories.js',
};

export default config;

```

--------------------------------

### Install Visual Tests Addon with pnpm

Source: https://www.chromatic.com/docs/visual-tests-addon

Install the addon using pnpm. Storybook 7.6 and higher is required.

```bash
$ pnpm dlx storybook@latest add @chromatic-com/storybook
```

--------------------------------

### Run First Chromatic Build with pnpm

Source: https://www.chromatic.com/docs/quickstart

Use this command to establish initial UI baselines for your project with pnpm. Ensure you have the 'chromatic' package installed.

```bash
$ pnpm chromatic --project-token <your-project-token>
```

--------------------------------

### Install Visual Tests Addon with npm

Source: https://www.chromatic.com/docs/visual-tests-addon

Install the addon using npm. Storybook 7.6 and higher is required.

```bash
$ npx storybook@latest add @chromatic-com/storybook
```

--------------------------------

### Run First Chromatic Build with Yarn

Source: https://www.chromatic.com/docs/quickstart

Use this command to establish initial UI baselines for your project with Yarn. Ensure you have the 'chromatic' package installed.

```bash
$ yarn chromatic --project-token <your-project-token>
```

--------------------------------

### Install Chromatic and Vitest Package

Source: https://www.chromatic.com/docs/vitest

Install the necessary Chromatic packages for Vitest using npm, yarn, or pnpm.

```bash
$ npm install --save-dev chromatic @chromatic-com/vitest
```

```bash
$ yarn add --dev chromatic @chromatic-com/vitest
```

```bash
$ pnpm add --dev chromatic @chromatic-com/vitest
```

--------------------------------

### Install Chromatic with pnpm

Source: https://www.chromatic.com/docs/cli

Install the chromatic package as a development dependency using pnpm.

```bash
pnpm add --save-dev chromatic
```

--------------------------------

### Install Chromatic with npm

Source: https://www.chromatic.com/docs/cli

Install the chromatic package as a development dependency using npm.

```bash
npm install chromatic --save-dev
```

--------------------------------

### Install Chromatic with Yarn

Source: https://www.chromatic.com/docs/cli

Install the chromatic package as a development dependency using Yarn.

```bash
yarn add --dev chromatic
```

--------------------------------

### Install Visual Tests Addon with Yarn

Source: https://www.chromatic.com/docs/visual-tests-addon

Install the addon using Yarn. Storybook 7.6 and higher is required.

```bash
$ yarn dlx storybook@latest add @chromatic-com/storybook
```

--------------------------------

### Feature File Example for Homepage

Source: https://www.chromatic.com/docs/faq/bdd-with-playwright

A sample BDD feature file defining a scenario for the homepage.

```gherkin
@noAutoSnapshot
Feature: Homepage

  Scenario: Homepage loads
    Given I am on the homepage
    Then I see the title "Welcome"
```

--------------------------------

### Basic Chromatic Config File

Source: https://www.chromatic.com/docs/cli

Minimum setup for a chromatic.config.json file for non-CI environments. Requires a projectId.

```json
{
  "$schema": "https://www.chromatic.com/config-file.schema.json",
  "projectId": "Project:..."
}
```

--------------------------------

### Chromatic JUnit Report Example

Source: https://www.chromatic.com/docs/faq/junit-report-usage

An example of the root <testsuite> tag in a Chromatic JUnit report, showing high-level build information.

```xml
<testsuite name="Chromatic build 159" ... tests="86" failures="1" errors="0" skipped="0">
    <properties>
      <property name="buildNumber" value="159"/>
      <property name="buildStatus" value="PENDING"/>
      <property name="buildUrl" value="https://www.chromatic.com/build?appId=...&amp;number=159"/>
      <property name="storybookUrl" value="https://...-nxjzlatrta.chromatic.com/"/>
    </properties>
</testsuite>
```

--------------------------------

### Install Nx Storybook Plugin

Source: https://www.chromatic.com/docs/nx

Use this command to add the Nx Storybook plugin to your workspace, enabling automatic detection and wiring of Storybook targets.

```bash
nx add @nx/storybook
```

--------------------------------

### TurboSnap CLI Output Example

Source: https://www.chromatic.com/docs/turbosnap/setup

Inspect these messages in your CLI output to verify TurboSnap is detecting changes and processing stories effectively.

```text
Traversing dependencies for X files that changed since the last build
```

```text
Found Y story files affected by recent changes
```

```text
Tested A stories across B components; capture C snapshots in S seconds.
```

--------------------------------

### Displaying Code Blocks

Source: https://www.chromatic.com/docs/markdown

Wrap code examples in triple backticks to display them as formatted code blocks. A blank line before and after improves readability.

```js
function Example() {
  console.log('This is an example function');
}
```

--------------------------------

### Chromatic Config File with JSON Schema

Source: https://www.chromatic.com/docs/cli

Example of a chromatic.config.json file utilizing the JSON schema for editor IntelliSense and validation.

```json
{
  "$schema": "https://www.chromatic.com/config-file.schema.json"
  /* ... config options */
}
```

--------------------------------

### Serve Storybook Production Build Locally

Source: https://www.chromatic.com/docs/faq/storybook-use-development-mode-to-build-chromatic

After building, use this command to serve the static Storybook output locally for testing.

```bash
npx http-server storybook-static -o
```

--------------------------------

### Build and Serve Storybook Locally

Source: https://www.chromatic.com/docs/sunsetting-preserve-missing

Commands to build Storybook and serve the static output locally for verification.

```bash
npm run build-storybook
npx http-server storybook-static -o

```

--------------------------------

### Run Chromatic Command

Source: https://www.chromatic.com/docs/vitest

Initiate Chromatic to upload UI archives and capture snapshots using npm, yarn, or pnpm. Replace <TOKEN> with your project token.

```bash
$ npx chromatic --vitest -t=<TOKEN>
```

```bash
$ yarn chromatic --vitest -t=<TOKEN>
```

```bash
$ pnpm chromatic --vitest -t=<TOKEN>
```

--------------------------------

### v1 Webhook Payload Example

Source: https://www.chromatic.com/docs/upgrading-webhooks

This is an example of the older v1 custom webhook payload format.

```json
{
  "event": "build-status-changed",
  "build": {
    "number": 123,
    "result": "SUCCESS",
    "status": "BUILD_ACCEPTED",
    "webUrl": "https://www.chromatic.com/build?appId=5dca7f6a6ce19b00201febb7&number=123",
    "branch": "main",
    "commit": "f6f223efb3b99b83ac3b0b6ece9f9620619933c1",
    "committerName": "John Doe",
    "storybookUrl": "https://5dca7f6a6ce19b00201febb7-yubzntxvow.chromatic.com/",
    "changeCount": 12,
    "componentCount": 42,
    "specCount": 100,
    "projectName": "my-project"
  }
}
```

--------------------------------

### Example Published MCP Server URL

Source: https://www.chromatic.com/docs/mcp

After a successful Chromatic build, your MCP server will be published and accessible at a URL similar to this. The MCP server is available at the '/mcp' route of your Storybook's URL.

```bash
https://642d765a7e8afcfb104268dc-mhlulncyca.chromatic.com/mcp
```

--------------------------------

### Chromatic Build Status Example

Source: https://www.chromatic.com/docs/cypress

This output indicates the status of a Chromatic build, including the build number, a link to review changes, and a summary of tested stories and captured snapshots.

```bash
✔ Started build 1
  → Continue setup at https://www.chromatic.com/setup?appId=...
✔ Build 1 auto-accepted
  → Tested X stories across 10 components; captured 10 snapshots in 1 minute 3 seconds
```

--------------------------------

### Chromatic CLI dry run example

Source: https://www.chromatic.com/docs/cli

Example of passing a flag without a value, treated as true. The -t flag is a shorthand for --project-token.

```bash
$ npx chromatic --dry-run -t <your-project-token>
```

--------------------------------

### Chromatic CLI array flag example

Source: https://www.chromatic.com/docs/cli

Example of specifying a flag multiple times to accept an array of values. The -t flag is a shorthand for --project-token.

```bash
$ npx chromatic --externals "my-folder/**" --externals "another-folder/**" -t <your-project-token>
```

--------------------------------

### Chromatic JUnit Report Failure Example

Source: https://www.chromatic.com/docs/faq/junit-report-usage

An example of a <testcase> within a Chromatic JUnit report indicating a visual change requiring review, marked by a <failure> tag.

```xml
<testcase classname="Atoms.Loader" name="Shadow Dom">
  <properties>
    <property name="result" value="PENDING" />
  </properties>
  <failure
    message="Snapshot contains visual changes and must be reviewed"
    type="PENDING"
  />
</testcase>
```

--------------------------------

### Configure Storybook Themes with @storybook/addon-themes

Source: https://www.chromatic.com/docs/themes

Set up themes for your Storybook project using the `withThemeByClassName` decorator. This example configures 'light' and 'dark' themes, defaulting to 'light'. Ensure you replace `@storybook/your-framework` with your specific framework.

```typescript
// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
// if you're using Storybook 9, or with the appropriate renderer otherwise.
import type { Preview } from '@storybook/your-framework';

import { withThemeByClassName } from '@storybook/addon-themes';

import '../src/index.css';

const preview: Preview = {
  decorators: [
    withThemeByClassName({
      themes: {
        light: 'light',
        dark: 'dark',
      },
      defaultTheme: 'light',
    }),
  ],
};

export default preview;
```

--------------------------------

### Trimmed Webpack Stats File Example

Source: https://www.chromatic.com/docs/turbosnap/dependency-tracing

An example of a trimmed Webpack stats file, showing the main asset ID, its name, associated modules, and dependent modules (reasons).

```json
{
  "id": "./src/inputs/PinInput/PinInput.tsx",
  "name": "./src/inputs/PinInput/PinInput.tsx + 4 modules",
  "modules": [
    { "name": "./src/inputs/PinInput/PinInput.tsx" },
    { "name": "./src/inputs/PinInput/SeparatedPinInput.tsx" },
    { "name": "./src/inputs/PinInput/SinglePinInput.tsx" },
    { "name": "./src/inputs/utils.ts" },
    { "name": "./src/inputs/PinInput/PinCaret.tsx" }
  ],
  "reasons": [
    { "moduleName": "./src/data/DataGrid/cells/EditablePinInput.tsx" },
    { "moduleName": "./src/inputs/PinInput/index.ts" }
  ]
}
```

--------------------------------

### Basic File Path Tracing

Source: https://www.chromatic.com/docs/turbosnap/trace-utility

Use basic characters like '*' and '?' to simplify file paths when tracing components. This is useful for matching multiple files or directories.

```bash
npx chromatic trace src/components/Button/*
npx chromatic trace src/components/*
```

```bash
npx chromatic trace **/[abc]tomic/*/Accordion.ts?
```

--------------------------------

### Shadow DOM Test Example with CheckboxGroup

Source: https://www.chromatic.com/docs/interactions/shadow-dom

An example of testing a Web Component `<checkbox-group>` that renders shadow-root-contained checkboxes. It shows how to simulate user interactions like clicking checkboxes directly from the `play()` function.

```typescript
// Replace the @storybook/web-components-vite package with @storybook/web-components if you're not using Storybook 9.0
import { Meta, StoryObj } from '@storybook/web-components-vite';

import { html } from 'lit';

/*
 * Replace the storybook/test import with `@storybook/test` and adjust the stories accordingly if you're not using Storybook 9.0.
 * Refer to the Storybook documentation for the correct package and imports for earlier versions.
 */
import { expect } from 'storybook/test';

import { Checkbox } from '../src/checkbox';
import { CheckboxGroup } from '../src/checkbox-group';

Checkbox.register();
CheckboxGroup.register();

const meta: Meta = {
  component: CheckboxGroup,
  title: 'Checkbox',
};

export default meta;
type Story = StoryObj;

export const Required: Story = {
  render: () => html`
    <checkbox-group required setCustomValidityValueMissing="Please select an option">
      <span slot="legend">Form label</span>
      <checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</checkbox>
      <checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</checkbox>
      <checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</checkbox>
      <checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</checkbox>
    </checkbox-group>
  `,
  play: async ({ canvas, userEvent }) => {
    const checkboxes = await canvas.findAllByShadowRole('checkbox');
    const firstCheckbox = checkboxes[0];
    await userEvent.click(firstCheckbox); // select
    await userEvent.click(firstCheckbox); // deselect
  },
};

```

--------------------------------

### Enable Docs in Local Builds

Source: https://www.chromatic.com/docs/visual-tests-addon

Configure your Storybook main configuration file to enable documentation pages in local builds. Be aware that this may increase build times.

```typescript
// 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 = {
  // ...
  build: {
    test: {
      disableBlocks: false,
      disableAutoDocs: false,
      disableMDXEntries: false,
      disableDocgen: false,
    },
  },
};

export default config;
```

--------------------------------

### Run Chromatic CLI

Source: https://www.chromatic.com/docs/accessibility/usage

Use the npm command to run Chromatic with your project token.

```bash
$ npx chromatic --project-token <YOUR_PROJECT_TOKEN>
```

--------------------------------

### Mocking API GET Request with Error Response

Source: https://www.chromatic.com/docs/mock-network-requests

This snippet shows how to mock a GET request to '/api/documents' to simulate an error response with a 403 status code after a delay. Use this to test how your component handles API failures.

```typescript
// Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { http, HttpResponse, delay } from 'msw';

import { DocumentScreen } from './DocumentScreen';

const meta = {
  component: DocumentScreen,
} satisfies Meta<typeof DocumentScreen>;

export default meta;
type Story = StoryObj<typeof meta>;

// 👇 The mocked data that will be used in the story
const mockDocuments = [
  {
    id: 1,
    userID: 1,
    title: 'Something',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'approved',
  },
  {
    id: 2,
    userID: 1,
    title: 'Something else',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'pending',
  },
  {
    id: 3,
    userID: 2,
    title: 'Another thing',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'rejected',
  },
];

export const MockedError: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('/api/documents', async () => {
          await delay(800);
          return new HttpResponse(null, {
            status: 403,
          });
        }),
      ],
    },
  },
};
```

--------------------------------

### Mocking API GET Request with Success Response

Source: https://www.chromatic.com/docs/mock-network-requests

This snippet demonstrates how to mock a GET request to '/api/documents' using MSW to return a JSON array of documents. It's useful for testing components that fetch and display data successfully.

```typescript
// Replace your-framework with the name of your framework (e.g. nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { http, HttpResponse, delay } from 'msw';

import { DocumentScreen } from './DocumentScreen';

const meta = {
  component: DocumentScreen,
} satisfies Meta<typeof DocumentScreen>;

export default meta;
type Story = StoryObj<typeof meta>;

// 👇 The mocked data that will be used in the story
const mockDocuments = [
  {
    id: 1,
    userID: 1,
    title: 'Something',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'approved',
  },
  {
    id: 2,
    userID: 1,
    title: 'Something else',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'pending',
  },
  {
    id: 3,
    userID: 2,
    title: 'Another thing',
    content:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    status: 'rejected',
  },
];

export const MockedSuccess: Story = {
  parameters: {
    msw: {
      handlers: [
        http.get('/api/documents', () => {
          return HttpResponse.json(mockDocuments);
        }),
      ],
    },
  },
};
```

--------------------------------

### CSS for sticky positioning

Source: https://www.chromatic.com/docs/position-sticky

Example CSS to make an element sticky at the bottom of the viewport.

```css
position: sticky;
bottom: 0;
```

--------------------------------

### Build Storybook Production

Source: https://www.chromatic.com/docs/faq/storybook-use-development-mode-to-build-chromatic

Run this command to generate a production build of your Storybook.

```bash
npm run build-storybook
```

--------------------------------

### Configure Chromatic plugin in Cypress

Source: https://www.chromatic.com/docs/cypress

Install the Chromatic plugin in your cypress.config.js file to enable visual testing.

```javascript
const {
  defineConfig
} = require('cypress');
const {
  installPlugin
} = require('@chromatic-com/cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      installPlugin(on, config);
    },
  },
});
```

--------------------------------

### Remove preserveMissing from GitHub Action

Source: https://www.chromatic.com/docs/sunsetting-preserve-missing

Example of removing the 'preserveMissing' input from the chromaui/action in a GitHub Actions workflow.

```yaml
uses: chromaui/action@v1
with:
  token: ${{ secrets.CHROMATIC_TOKEN }}
  preserveMissing: true

```

--------------------------------

### Chromatic Addon Configuration

Source: https://www.chromatic.com/docs/visual-tests-addon

Configure Chromatic addon options in the ./chromatic.config.json file. This example shows project ID, build script name, debug mode, and zip deployment.

```json
{
  "projectId": "Project:64cbcde96f99841e8b007d75",
  "buildScriptName": "deploy-storybook",
  "debug": true,
  "zip": true
}
```