Overriding request response for images

Hey,

I want to override request response image, how could I do that with puppeteer? Playwright has a neat field called from which I can include files from my local machine but with Puppeteer I can't make it work.

wispy-yellow•3/22/23, 1:23 PM

can you show your code?

wispy-yellow•3/22/23, 1:23 PM

and the website

wispy-yellow•3/22/23, 1:24 PM

still-lime•3/22/23, 2:34 PM

Hey, if I understand you correctly, here is how you can override image data with Puppeteer:

colossal-harlequinOP•3/22/23, 6:51 PM

Thanks @yellott trying it now

import { PuppeteerCrawler } from "crawlee";
import { readFileSync } from "fs";

const startUrls = ["https://crawlee.dev/"];
const placeholderImageBuffer = readFileSync("./test_img.png");

const crawler = new PuppeteerCrawler({
  preNavigationHooks: [
    async ({ addInterceptRequestHandler }) => {
      await addInterceptRequestHandler((request) => {
        if (request.resourceType() === "image") {
          return request.respond({
            status: 200,
            contentType: "image/png",
            body: placeholderImageBuffer,
          });
        }
        return request.continue();
      });
    },
  ],
});

await crawler.run(startUrls);

import { PuppeteerCrawler } from "crawlee";
import { readFileSync } from "fs";

const startUrls = ["https://crawlee.dev/"];
const placeholderImageBuffer = readFileSync("./test_img.png");

const crawler = new PuppeteerCrawler({
  preNavigationHooks: [
    async ({ addInterceptRequestHandler }) => {
      await addInterceptRequestHandler((request) => {
        if (request.resourceType() === "image") {
          return request.respond({
            status: 200,
            contentType: "image/png",
            body: placeholderImageBuffer,
          });
        }
        return request.continue();
      });
    },
  ],
});

await crawler.run(startUrls);