From 3d890023001aa3b5547b93891b868dd5da9010b4 Mon Sep 17 00:00:00 2001 From: Will Dickinson Date: Fri, 12 Aug 2022 12:39:36 -0600 Subject: [PATCH 1/3] storyshots-puppeteer: add browserLaunchOptions to CommonConfig --- .../addons/storyshots/storyshots-puppeteer/src/config.ts | 4 +++- .../storyshots/storyshots-puppeteer/src/puppeteerTest.ts | 9 ++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/code/addons/storyshots/storyshots-puppeteer/src/config.ts b/code/addons/storyshots/storyshots-puppeteer/src/config.ts index c7fae1f0437..f7a59253788 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,7 @@ export interface CommonConfig { getGotoOptions: (options: Options) => DirectNavigationOptions; customizePage: (page: Page) => Promise; getCustomBrowser: () => Promise; + browserLaunchOptions: LaunchOptions; setupTimeout: number; testTimeout: number; } @@ -62,6 +63,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 fbdd5233e5c..4d69da6fa25 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, }); } From f455ec17eb77dbadfc7719c3ec456384edd6b4a2 Mon Sep 17 00:00:00 2001 From: Will Dickinson Date: Fri, 12 Aug 2022 13:09:49 -0600 Subject: [PATCH 2/3] storyshots-puppeteer: add browserLaunchOptions to documentation --- .../storyshots/storyshots-puppeteer/README.md | 20 +++++++++++++++++++ .../storyshots-puppeteer/src/config.ts | 4 ++++ 2 files changed, 24 insertions(+) diff --git a/code/addons/storyshots/storyshots-puppeteer/README.md b/code/addons/storyshots/storyshots-puppeteer/README.md index b9e4567ab04..fb1c250b283 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 f7a59253788..e5b626f91a0 100644 --- a/code/addons/storyshots/storyshots-puppeteer/src/config.ts +++ b/code/addons/storyshots/storyshots-puppeteer/src/config.ts @@ -32,6 +32,10 @@ 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; From 0d55520a55b265b1a583e84c646fc16ad8d424ad Mon Sep 17 00:00:00 2001 From: Will Dickinson Date: Fri, 12 Aug 2022 13:18:11 -0600 Subject: [PATCH 3/3] storyshots-puppeteer: fix fallback case for concatenating browserLaunchOptions.args when undefined --- .../addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts b/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts index 4d69da6fa25..7ac1da5ad53 100644 --- a/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts +++ b/code/addons/storyshots/storyshots-puppeteer/src/puppeteerTest.ts @@ -84,7 +84,7 @@ export const puppeteerTest = (customConfig: Partial = {}) = '--no-sandbox ', '--disable-setuid-sandbox', '--disable-dev-shm-usage', - ...browserLaunchOptions.args, + ...(browserLaunchOptions?.args || []), ], executablePath: chromeExecutablePath, });