storycap
storycap copied to clipboard
Story viewports not overriding global viewports
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.