Unable to take preview screenshots

[Yuriko-Schumacher]

We bumped puppeteer to 19.4.0 and added headless: new to templates/__common__/config/tasks/graphics-meta.js in the last update. However there was an issue where the kit wasn't able to take screenshots of small/large previews. This caused an issue where graphics not showing up in the CMS.

[Yuriko-Schumacher]

Error message:

Could not take screenshot of element /Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/dist/preview-small.png: ProtocolError: Runtime.callFunctionOn timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.
    at new Callback (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:61:35)
    at CallbackRegistry.create (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:106:26)
    at Connection._rawSend (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:216:26)
    at CDPSessionImpl.send (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:425:78)
    at ExecutionContext._ExecutionContext_evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:240:46)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ExecutionContext.evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:146:16)
    at async CDPJSHandle.evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/JSHandle.js:59:16)
    at async CDPElementHandle.isIntersectingViewport (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/api/ElementHandle.js:300:20)
    at async CDPElementHandle._CDPElementHandle_scrollIntoViewIfNeeded (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ElementHandle.js:513:9)
    at async CDPElementHandle.screenshot (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ElementHandle.js:475:9)
    at async captureScreenshotOfElement (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:35:5)
    at async createPreviews (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:55:19)
    at async parseGraphic (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:207:30)
    at async Promise.all (index 0)
    at async module.exports (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:297:20)
    at async BrowserSync.cb (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/scripts/parse.js:53:7)
Could not take screenshot of element /Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/dist/preview-large.png: ProtocolError: Runtime.callFunctionOn timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.
    at new Callback (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:61:35)
    at CallbackRegistry.create (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:106:26)
    at Connection._rawSend (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:216:26)
    at CDPSessionImpl.send (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Connection.js:425:78)
    at ExecutionContext._ExecutionContext_evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:240:46)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async ExecutionContext.evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:146:16)
    at async CDPJSHandle.evaluate (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/JSHandle.js:59:16)
    at async CDPElementHandle.isIntersectingViewport (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/api/ElementHandle.js:300:20)
    at async CDPElementHandle._CDPElementHandle_scrollIntoViewIfNeeded (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ElementHandle.js:513:9)
    at async CDPElementHandle.screenshot (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/node_modules/puppeteer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ElementHandle.js:475:9)
    at async captureScreenshotOfElement (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:35:5)
    at async createPreviews (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:60:19)
    at async parseGraphic (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:207:30)
    at async Promise.all (index 0)
    at async module.exports (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/tasks/graphics-meta.js:297:20)
    at async BrowserSync.cb (/Users/yurikoschumacher/Documents/projects/newsapps-dailies/2023/graphic-capybara-test-2023-11/config/scripts/parse.js:53:7)

[Yuriko-Schumacher]

Hot fix: commenting out headless: new in templates/__common__/config/tasks/graphics-meta.js.

It's deploying but now we are getting this warning message:

  Puppeteer old Headless deprecation warning:
    In the near feature `headless: true` will default to the new Headless mode
    for Chrome instead of the old Headless implementation. For more
    information, please see https://developer.chrome.com/articles/new-headless/.
    Consider opting in early by passing `headless: "new"` to `puppeteer.launch()`
    If you encounter any bugs, please report them to https://github.com/puppeteer/puppeteer/issues/new/choose.

[Yuriko-Schumacher]

It seems that headless: "new" wouldn't work in the same way as the old headless mode. More about new headless mode: https://developer.chrome.com/articles/new-headless/
Looks like we can still use old headless mode by passing headless: true to puppeteer.launch()