[Feature proposal] Provide a way of taking multiple screenshots of the same component(eg on various devices)

[gcazaciuc]

storybook-chrome-screenshot allows in a very nice manner to specificy the device and viewports for the screenshots. Currently, there isn't a way to screenshot a component on multiple devices and resolutions without creating additional stories for each device and resolution(which doesn't help since most probably the component should be tested in React storybook full screen mode and using Chrome device emulator).

One limitation that prevents us from using it to screenshot components across all devices that we support is that there isn't really a way for a story to be screen-shoted across multiple configurations. Eg, given a story like

 .add('Basic Sticky Button', withScreenshot()(() => (
        <StickyButton label={label} disabled={false} onClick={action(`click`)} />)))

In the example above StickyButton is a responsive component. We need to support and have different layouts on Mobile, Table and Desktop devices in normal and landscape mode.

It would be really cool to have the same story screenshoted in all 3 configurations by specifying them as an array of options:

setScreenshotOptions {
  delay: 0,               
  viewport: [
{                           // Desktop view configuration
    width: 1024,
    height: 768,
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false,
    isLandscape: false,
  },
 {              
    width: 300,  // Mobile configuration
    height: 420,
    deviceScaleFactor: 1,
    isMobile: true,
    hasTouch: true,
    isLandscape: false,
  },
  {              
    width: 768,  // Tablet configuration
    height: 800,
    deviceScaleFactor: 1,
    isMobile: true,
    hasTouch: true,
    isLandscape: false,
  }
],
}

In the example above for each component 3 screenshots would be taken according to the specified viewport settings.

[wadackel]

Hi @gcazaciuc, Thank you for a wonderful proposal !
The proposed function is simple and powerful to test components 👍
I would like to implement it in the next release.

[wadackel]

@gcazaciuc. Released as 0.5.0-alpha.1 👍

If there is no problem with the behavior, I'd like to release the version which removed alpha.
Please check when you have time.

[gcazaciuc]

Hello. It works awesome, many thanks!

[wadackel]

@gcazaciuc Thanks for confirmation!
Are other features working as well?

[wadackel]

Release as 0.5.0 🎉