reg-viz / storycap

A Storybook Addon, Save the screenshot image of your stories :camera: via puppeteer.
https://www.npmjs.com/package/storycap
MIT License
705 stars 89 forks source link

Story viewports not overriding global viewports #895

Open stackdiver opened 2 weeks ago

stackdiver commented 2 weeks ago

I'm a bit confused about the viewports option. Especially when it comes to overriding the global setting.

In our Storybook preview.tsx, we define the following viewports for screenshots:

screenshot: {
  viewports: {
    laptop: {
      width: 1920,
      height: 1080,
    },
    tablet: 'iPad',
    phone: {
      width: 360,
      height: 1054,
    },
  },
},

Then in some particular stories that should only be captured for mobile devices (tablet and phone), we override the viewports in the story params:

export const OnlyMobileStory: Story = {
  play: async ({ canvasElement }) => {
    await selectCar(canvasElement)
    await selectAmount(canvasElement)
    await selectAccount(canvasElement)
    await clickConfirm(canvasElement)
  },
  parameters: {
    screenshot: {
      viewports: {
        tablet: 'iPad',
        phone: {
          width: 360,
          height: 1054,
        },
      },
    },
  },
}

The problem is, that the laptop image is still generated.

I played around a little bit and found, that "resetting" the viewports for all stories in that file helps:

const meta: Meta = {
  ...
  parameters: {
    screenshot: {
      viewports: [],
    },
  },
}
export default meta

But then I have to specify the viewports again in every single story. Any ideas? Possible bug?

Due to some internal infrastructure limitations, we still use Storybook 7.6.19 together with Storycap 4.3.1.