Flaky screenshots with Storybook v7 in GitHub Actions

[davejsdev]

Storybook v7 has been out for awhile but it seems that Storycap hasn't been updated to officially support it.

The main issue I'm currently facing is that Storycap output is being flaky when running in GitHub Actions. It works correctly when run locally though. Roughly half of the screenshot re showing the "No Preview" screen.

My guess is that since GitHub Actions is running with less CPU resources than I have locally, it's slow switching between stories and the screenshots are being captured before the story is able to render. I tried adding a --delay 1000 but that didn't help.

There are no errors or warnings output.

Deps:

[email protected]
[email protected]
[email protected]
@storybook/[email protected]

Storybook config:

const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
};
export default config;

Github Actions steps:

- name: Build Storybook
  run: yarn exec -- storybook build --output-dir ./storybook-static
- name: Capture screenshots
  run: yarn exec -- storycap --serverCmd "npx http-server ./storybook-static --port 6008" http://127.0.0.1:6008/ --viewport 1024x768 --outDir ./screenshots

Screenshots Output for some stories