How to Update the Puppeteer Module on Pipedream Following a Chromium Update on <http://Browserless.io|Browserless.io>?

This topic was automatically generated from Slack. You can find the original thread here.

Hello. I’m using puppeteer on Pipedream through https://www.browserless.io/

Worked well until browserless upgraded their chromium version last week. Script isn’t working anymore, I get this error when setting cookies:

Protocol error (Network.deleteCookies): Target closed

Their support recommended me to update the puppeteer module. How can I do that using pipedream?

have you tried making a trivial change to your workflow and deploying a new version of your workflow? Each time you test or deploy your workflow, we install the latest version of each imported package. You can also pin package versions. @U05A7KLNALC can you tell me how to pin package versions in Node.js components?

Let me know if that works

In Pipedream, you can pin a specific version of a package by specifying the version number in the import statement. For example, if you wanted to use version 1.2.3 of the puppeteer package, you would import it like this: ```
import puppeteer from “puppeteer@1.2.3”;

Thanks for the fast support Dylan, tried to downgrade but I still get the same error. trying some browserless competitor right now

Have you tried our native Puppeteer integration? https://pipedream.com/docs/code/nodejs/browser-automation/

Yooo didn’t know this

Gonna try this

Seems to work but I’ll have to do some debug because my script isn’t doing what it used to do

Got it, yes the Puppeteer API can change and with the move to native Puppeteer vs. Browserless it may require some changes. But let us know if you hit errors you can’t solve and I’ll try to assist

how can i easily see a screenshot made with puppeteer from the tmp directory

In Pipedream, you can use the $send.http function to send the screenshot as a response to an HTTP request. Here’s an example of how you can do this: ```
import { promises as fs } from “fs”; import path from “path”; export default { name: “send-screenshot”, version: “0.0.1”, props: { http: “$.interface.http”, }, async run({ $ }) { // Assume screenshot.png is the screenshot you’ve saved in the /tmp directory const screenshotPath = path.join(“/tmp”, “screenshot.png”); // Read the screenshot file const screenshot = await fs.readFile(screenshotPath); // Send the screenshot as a response to the HTTP request $.res.set(“Content-Type”, “image/png”); $.res.status(200).send(screenshot); }, };

this is not an event source, this is a workflow. Please change the code to work in a workflow step with $.respond

You can use the $.respond function in a workflow to send a response back to the HTTP client that triggered the workflow. Here’s an example of how you can modify the previous code to use $.respond to send a screenshot: ```
import { promises as fs } from “fs”; import path from “path”; export default { name: “send-screenshot”, version: “0.0.1”, async run({ $ }) { // Assume screenshot.png is the screenshot you’ve saved in the /tmp directory const screenshotPath = path.join(“/tmp”, “screenshot.png”); // Read the screenshot file const screenshot = await fs.readFile(screenshotPath); // Send the screenshot as a response to the HTTP request $.respond({ status: 200, headers: { “Content-Type”: “image/png”, }, body: screenshot, }); }, };

how do I configure my workflow with an HTTP trigger to return this custom response?

To configure your workflow with an HTTP trigger to return a custom response, you can use the $.respond function in a code step. Here’s an example of how you can do this: import { promises as fs } from "fs"; import path from "path"; export default { name: "send-screenshot", version: "0.0.1", async run({ $ }) { // Assume screenshot.png is the screenshot you've saved in the /tmp directory const screenshotPath = path.join("/tmp", "screenshot.png"); // Read the screenshot file const screenshot = await fs.readFile(screenshotPath); // Send the screenshot as a response to the HTTP request $.respond({ status: 200, headers: { "Content-Type": "image/png", }, body: screenshot, }); }, }; This code reads a file named screenshot.png from the /tmp directory and sends it as a response to the HTTP request that triggered the workflow. The $.respond function sets the HTTP status code, headers, and body of the response. Please replace “screenshot.png” with the actual name of your screenshot file.

You’ll need to also configure your HTTP trigger to issue a custom response vs. the standard 200 OK response

is there a way to use that plugin with your implementation?

With third party packages like that, it’s always hard to say a priori. I’d recommend testing it, and I’m happy to help troubleshot errors. You can take a look at our implementation here: https://github.com/PipedreamHQ/pipedream/tree/master/packages/browsers

Don’t think it’s possible since it requires https://github.com/berstend/puppeteer-extra/tree/master/packages/puppeteer-extra