From 8ab2e169a0c731ced63869f90db1b5a40b274dcd Mon Sep 17 00:00:00 2001 From: Thomas Bertet Date: Tue, 27 Mar 2018 09:28:40 +0200 Subject: [PATCH 1/2] remove default options on goto call to puppeteer --- addons/storyshots/README.md | 15 ++++++++++++++- addons/storyshots/src/test-body-image-snapshot.js | 3 ++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index a0e3f70c2c7b..f21b7b703506 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -214,7 +214,20 @@ initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'h `beforeScreenshot` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeScreenshot` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the screenshot and can be used avoid regressions due to mounting animations. -### Specifying options to _screenshot()_ +### Specifying options to _goto()_ (puppeteer API) + +You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) + +```js +import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots'; +const getGotoOptions = ({context, url}) { + return { + waitUntil: 'networkidle0', + } +} +initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getGotoOptions})}); +``` +### Specifying options to _screenshot()_ (puppeteer API) You might use `getScreenshotOptions` to specify options for screenshot. Will be passed to [Puppeteer .screenshot() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions) diff --git a/addons/storyshots/src/test-body-image-snapshot.js b/addons/storyshots/src/test-body-image-snapshot.js index ee8e6d77e42f..cfa45bb93de2 100644 --- a/addons/storyshots/src/test-body-image-snapshot.js +++ b/addons/storyshots/src/test-body-image-snapshot.js @@ -14,6 +14,7 @@ export const imageSnapshot = ({ getMatchOptions = noop, getScreenshotOptions = defaultScreenshotOptions, beforeScreenshot = noop, + getGotoOptions = noop, }) => { let browser; // holds ref to browser. (ie. Chrome) let page; // Hold ref to the page to screenshot. @@ -42,7 +43,7 @@ export const imageSnapshot = ({ expect.assertions(1); return page - .goto(url, { waitUntil: 'networkidle0' }) + .goto(url, getGotoOptions({ context, url })) .catch(e => { logger.error( `ERROR WHILE CONNECTING TO ${url}, did you start or build the storybook first ? A storybook instance should be running or a static version should be built when using image snapshot feature.`, From 9713b4adb5f8a01466b4c0213f64c9927a84edc9 Mon Sep 17 00:00:00 2001 From: Thomas Bertet Date: Tue, 27 Mar 2018 17:32:27 +0200 Subject: [PATCH 2/2] Update README for addon-storyshots --- addons/storyshots/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md index f21b7b703506..fd27b861524a 100644 --- a/addons/storyshots/README.md +++ b/addons/storyshots/README.md @@ -220,7 +220,7 @@ You might use `getGotoOptions` to specify options when the storybook is navigati ```js import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots'; -const getGotoOptions = ({context, url}) { +const getGotoOptions = ({context, url}) => { return { waitUntil: 'networkidle0', }