How to save a screenshot in a Google Cloud Bucket using Google Cloud Functions and puppeteer?

Question

I will go straight to the problem:

Im trying to save a puppeteer screenshot using Google Cloud Functions.

When I review the screenshot im just seeing a little square. When using Base64 encoding i just get plain white space as an image.

Am I missing something? Do i have to use an extra package like "busboy"?

Heres the Code:

/**
 * Responds to any HTTP request.
 *
 * @param {!express:Request} req HTTP request context.
 * @param {!express:Response} res HTTP response context.
 */

const moment = require('moment');
const puppeteer = require('puppeteer');
const { Storage } = require('@google-cloud/storage');
const storage = new Storage();



exports.helloWorld = async (req, res) => {
  const PUPPETEER_OPTIONS = {
    headless: true,
    slowMo: 500,
    args: [
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-sandbox',
    ],
  };

  const bucketName = "imageBucket";
  const timeNow = new moment();
  console.log(timeNow);
  const browser = await puppeteer.launch(PUPPETEER_OPTIONS);
  const page = await browser.newPage();
  await page.goto(
    'https://www.example.com'
  );

  await page.setRequestInterception(true);
  page.on('request', (interceptedRequest) => {
    if (
      interceptedRequest.url().startsWith('https://www.google-analytics.com/')
    ) {
      const resource = interceptedRequest.url().toString();
      console.log(resource + ' blocked from loading.');
      interceptedRequest.abort();
    } else {
      interceptedRequest.continue();
    }
  });

  try {
    const searchTest = await page.$eval(
      'SELECTOR',
      (element) => {
        return element.innerHTML;
      }
    );

    await page.click('COOKIE ACCEPT SELECTOR');

    if (searchTest) {
    const screenshot = await page.screenshot({
        path: `/screenshot.png`,
    });
    const bucket = storage.bucket(bucketName);
    const file = bucket.file('puppeteer_screenshots/screenshot_XXXXX.png');
        await file.save(screenshot, {
        metadata: { contentType: 'image/png' },
    });
    await browser.close();
    res.status(200).end()

    } else {
      await browser.close();
      console.log('not found');
      res.end();
    }
  } catch (error) {

    console.log(error);

    res.status(404).end();
  }
}

Answer 1

Puppeteer requires headless chormium installation to work. You can't customize your runtime environment with Cloud Function.

For this, I recommend you to use Cloud Run, where you can customize your container and thus your runtime environment.

It's super easy to migrate from function to Cloud Run. Create a webserver (like express) and add your hello_world function to the "/" path. That's all!! For the dockerfile, you have an example in the getting started section in the documentation.