So we have storybook set-up and using it. We love how it speeds up our development of individual components. We use visual tests to be sure that we do not break other components in process. However we can do even more: interaction testing.

One way to do it is to use @storybook/test-runner. However you might have a reason why it is not working for you (e.g. you can’t use newest storybook). Let’s look that @storybook/test-runner is based on Playwright and Jest and that gives idea.

Playwright itself is quite lightweight package and it does not have many dependencies. As well Playwright has its own testing framework and can be used without jest. This means that it can be used directly with storybook and you can generate lightweight interaction tests. Here is how:

1. Install playwright and @playwright/test.

2. Run your storybook.

3. Run codegen against storybook, e.g. yarn playwright codegen http://localhost:8000.

4. Click around and save output to your-name.test.ts file.

5. Run tests yarn test. You might need to run yarn playwright install chromium before.

That’s it. You have test for your component.

Now the only remaining part is to run properly in CI. What you need to do is to run storybook output via http before testing. Here is how relevant parts of your playwright.config.ts might look like:

import { PlaywrightTestConfig } from '@playwright/test';
import isCI from 'is-ci';

const config: PlaywrightTestConfig = {
  webServer: {
    command: 'yarn http-server -p 8000 storybook-static/',
    url: 'http://localhost:8000/',
    reuseExistingServer: !isCI,
  },
};
export default config;

That’s actually all you need to know to start.