Storyshots screenshot timing issue

[michaelgeorgeattard]

Problem: Storyshots screenshot is sometimes a white image.

The components being tested are Angular 5 components.

I am using latest version of storybook and addons.

I am initializing storyshots using the following:

initStoryshots({
   suite: "Image storyshots",
   test: imageSnapshot({
      storybookUrl: `file://${path.join(process.cwd(), "storybook-static")}`,
      getGotoOptions: ({ context, url }) => ({
         waitUntil: "domcontentloaded"
      })
   })
});

I tried all puppeteer waitUntil parameters from https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options however nothing worked.

Puppeteer has an open issue to add a waitUntilTime api, however the issue is still open and unanswered: puppeteer/puppeteer#2238

In the meantime, could storyshots implement something similar to guarantee that a component is fully rendered before a screenshot is taken?

[Hypnosphi]

You can use this approach: https://github.com/storybooks/storybook/tree/master/addons/storyshots#specifying-options-to-jest-image-snapshots

But maybe we could implement a more explicit API for delays, @thomasbertet WDYT?

[michaelgeorgeattard]

@Hypnosphi I think beforeScreenshot is good enough till waitUntilTime or similar is implemented by Puppeteer.

Things are working correctly now, thanks!

[ngood97]

You can use this approach: https://github.com/storybooks/storybook/tree/master/addons/storyshots#specifying-options-to-jest-image-snapshots

But maybe we could implement a more explicit API for delays, @thomasbertet WDYT?

This link doesn't exist and now is at https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer#specifying-options-to-jest-image-snapshots