diff --git a/code/addons/storyshots/storyshots-puppeteer/README.md b/code/addons/storyshots/storyshots-puppeteer/README.md index d2b95602d6db..c3d9def10d9b 100644 --- a/code/addons/storyshots/storyshots-puppeteer/README.md +++ b/code/addons/storyshots/storyshots-puppeteer/README.md @@ -107,6 +107,26 @@ initStoryshots({ }); ``` +### Customizing browser launch options (Puppeteer API) + +You might use the `browserLaunchOptions` to specify options for the default browser instance. Will be passed to [puppeteer.launch()](https://pptr.dev/api/puppeteer.puppeteernode.launch) + +```js +import initStoryshots from '@storybook/addon-storyshots'; +import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; + +initStoryshots({ + suite: 'Puppeteer storyshots', + test: puppeteerTest({ + storybookUrl: 'https://some-local-ssl-url:7777', + browserLaunchOptions: { + // For ignoring self-signed certificates + ignoreHTTPSErrors: true, + }, + }), +}); +``` + ### Specifying custom Chrome executable path (Puppeteer API) You might use `chromeExecutablePath` to specify the path to a different version of Chrome, without downloading Chromium. Will be passed to [Runs a bundled version of Chromium](https://github.com/GoogleChrome/puppeteer#default-runtime-settings) diff --git a/code/addons/storyshots/storyshots-puppeteer/src/config.ts b/code/addons/storyshots/storyshots-puppeteer/src/config.ts index c7fae1f04371..e5b626f91a0a 100644 --- a/code/addons/storyshots/storyshots-puppeteer/src/config.ts +++ b/code/addons/storyshots/storyshots-puppeteer/src/config.ts @@ -1,5 +1,5 @@ import { MatchImageSnapshotOptions } from 'jest-image-snapshot'; -import { ScreenshotOptions, Browser, Page, ElementHandle } from 'puppeteer'; +import { ScreenshotOptions, Browser, Page, ElementHandle, LaunchOptions } from 'puppeteer'; type PuppeteerLifeCycleEvent = 'load' | 'domcontentloaded' | 'networkidle0' | 'networkidle2'; @@ -32,6 +32,11 @@ export interface CommonConfig { getGotoOptions: (options: Options) => DirectNavigationOptions; customizePage: (page: Page) => Promise; getCustomBrowser: () => Promise; + /** + * Puppeteer browser launch options: + * {@link https://pptr.dev/api/puppeteer.puppeteernode.launch/ puppeteer.launch()} + */ + browserLaunchOptions: LaunchOptions; setupTimeout: number; testTimeout: number; } @@ -62,6 +67,7 @@ export const defaultCommonConfig: CommonConfig = { getGotoOptions: noop, customizePage: asyncNoop, getCustomBrowser: undefined, + browserLaunchOptions: {}, setupTimeout: 15000, testTimeout: 15000, }; diff --git a/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts b/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts index fbdd5233e5c1..7ac1da5ad530 100644 --- a/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts +++ b/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts @@ -10,6 +10,7 @@ export const puppeteerTest = (customConfig: Partial = {}) = getGotoOptions, customizePage, getCustomBrowser, + browserLaunchOptions, testBody, setupTimeout, testTimeout, @@ -78,7 +79,13 @@ export const puppeteerTest = (customConfig: Partial = {}) = const puppeteer = require('puppeteer'); // add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507 browser = await puppeteer.launch({ - args: ['--no-sandbox ', '--disable-setuid-sandbox', '--disable-dev-shm-usage'], + ...browserLaunchOptions, + args: [ + '--no-sandbox ', + '--disable-setuid-sandbox', + '--disable-dev-shm-usage', + ...(browserLaunchOptions?.args || []), + ], executablePath: chromeExecutablePath, }); }