How to automatically capture multiple viewports in storycap

What we want to do

Visual errors (layout errors, etc.) that are often missed by the human eye.
This can be easily detected by using Storybook x storycap x reg-suit can be easily detected.

Here, we want to check different viewports (≒ screen size) on the Storybook when it is responsive, but it is a bit hard to define a story for multiple viewports for a single component.

So, I wrote down a method to automatically take multiple viewports on the storycap side¹.

How to do it

Assume that reg-suit and storycap are already installed.

Add the settings of the viewports you want to separate in .storybook/preview.ts.

import { ScreenshotOptions } from "storycap/lib/shared/types";

const screenshot: ScreenshotOptions = {
  viewports: {
    mobile: {
      width: 428,
      height: 926,
    },
    tablet: {
      width: 768,
      height: 1024,
    },
    desktop: {
      width: 1440,
      height: 1024,
    },
  },
};


const preview: Preview = {
  parameters: {
    ...
    screenshot, // <- add to parameters
  },
  ...
};

export default preview;

That's all.

Supplemental Information

The viewports property of ScreenshotOptions accepts also string[] type, but when I tried it in my environment However, when I tried it in my environment, I could only call viewport name defined on the Puppeteer side.
(The viewport name defined in the Storybook addon could not be called.)

Therefore, at the time of writing, it seems that the only way is to define viewports in both reg-suit and Storybook's addon.

Conclusion

If you have a better way, please comment!!!

1. If it's a mobile-first PJ, We should define it properly. ↩