storycapで、複数のviewportを自動で撮り分ける

やりたいこと

人の目では取りこぼしがちな、見た目のバグ(レイアウトくずれ, etc)。
これは、Storybook x storycap x reg-suitを使えば、簡単に検知できます。

ここでレスポンシブ対応時には、Storybook上で異なるviewport(≒画面サイズ)を確認したいが、一つのコンポーネントに対して複数のviewportに応じたstoryを定義するのはちょっとしんどい、、、¹

そこでstorycap側で複数のviewportを自動で撮り分ける方法をメモ。

やり方

※reg-suitとstorycapは導入済みとします。

.storybook/preview.tsに撮り分けたいviewportの設定を追加。

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, // <- parametersに追加
  },
  ...
};

export default preview;

以上。

補足

ScreenshotOptionsのviewportsプロパティはstring[]型も受け付けるようだが、自環境で試した際はPuppeteer側に定義済みのviewport名しか呼び出せなかった。
(Storybookのaddonで定義したviewport名は呼び出せなかった。)

そのため、記事執筆時点ではreg-suit、Storybookのaddon両方でviewportを定義するしかなさそう。

まとめ

もっといい方法あればぜひコメントお願いします!!

1. モバイルファーストのPJならちゃんと定義したい。 ↩