Storybook Test Runner screenshot generation

test-runner.js

// .storybook/test-runner.js
import { join } from 'node:path';
import { getStoryContext, waitForPageReady } from '@storybook/test-runner';

const screenShotDestPath = 'dist/screenshots';

/** @type {import('@storybook/test-runner').TestRunnerConfig} */
const config = {
  tags: {
    exclude: ['no-tests']
  },
  async postVisit(page, context) {
    const { tags, title, name } = await getStoryContext(page, context);
    if (!tags.includes('no-screenshot')) {
      await waitForPageReady(page);

      // Set story category and name as prefix for screenshot name.
      const ssNamePrefix = `${title}.${name}`.replace('/', '-').replace('\\', '-'); //INFO: '/' or "\\" in screenshot name creates a folder in screenshot location. Replacing with '-'
      // The above line is taken from Storywright for consistency with the screenshot name.

      await page.screenshot({
        path: join(process.cwd(), screenShotDestPath, `${ssNamePrefix}.png`)
      });
    }
  }
};

export default config;