Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to take preview screenshots #183

Open
Yuriko-Schumacher opened this issue Nov 2, 2023 · 3 comments
Open

Unable to take preview screenshots #183

Yuriko-Schumacher opened this issue Nov 2, 2023 · 3 comments

Comments

@Yuriko-Schumacher
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor Author

Yuriko-Schumacher commented Nov 2, 2023 •
edited

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
Copy link
Contributor Author

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()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Yuriko-Schumacher