# Testing with Storybook — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/en/storybook/sb-testing

> Write interaction tests with play functions, scan for accessibility issues and add visual regression checks to your stories.

## Play function for interactions

The `play` function runs after a story renders. It simulates user interactions with Testing Library and asserts the result using `@storybook/test`.

## Writing a play test

Here's an example of testing user interactions with the play function.

```tsx
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, within } from '@storybook/test';
import { Button } from './Button';

const meta = { component: Button, title: 'Components/Button' } satisfies Meta<typeof Button>;
export default meta;

export const Clicked: StoryObj<typeof meta> = {
  args: { children: 'Click me', onClick: fn() },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(args.onClick).toHaveBeenCalled();
  },
};
```

## Accessibility testing

Use the a11y addon to automatically scan stories for accessibility issues and follow WCAG guidelines.

## Screenshot testing

Use visual testing tools like Percy or Chromatic to capture and compare component screenshots across changes.