Taking a screenshot with puppeteer and storing it in google cloud storage

Question

I´ll describe my end goal right away: I want to be able to take screenshots of my website with puppeteer and upload them straight to google cloud storage (with cloud functions for example).

However, I've been running into an issue with actually uploading the file if I do not give a path to locally store it. This is the code I have:

(async () => {
  const browser = await puppeteer.launch({headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  const filename = await page.screenshot();


    await storage.bucket(bucketName).upload(filename, {
        gzip: true,
})
  

console.log(`${filename} uploaded to ${bucketName}.`);
await browser.close();
})();

I have tried a variety of things like encoding the image differently and converting it from a buffer to a string but I keep running into the same two errors, either:

• The "path" argument must be of type string. Received an instance of Buffer, or
• The argument 'path' must be a string or Uint8Array without null bytes.

I appreciate all the help I can get:D Kind regards

Answer 1

There are three ways to do that.

1. First way you add path option to page.screenshot() to store screenshot in local machine then add this path to storage.bucket(bucketName).upload() to upload this image to google cloud.
2. Second way you get screenshot image as base64 encoding then upload it to google cloud with specific name.
3. Third way you get screenshot image as binary encoding then upload it to google cloud with specific name.

---

• First way

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    await page.screenshot({
        path: `/screenshot.png`,
    });

    const bucket = storage.bucket('bucket_name');
    const options = {
        destination: 'puppeteer_screenshots/screenshot_XXX.png',
        gzip: true,
    };
    await bucket.upload(`/screenshot.png`, options);
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

---

• Second way

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    const screenshotBase64 = await page.screenshot({
        encoding: 'base64',
    });

    
    const bucket = storage.bucket('bucket_name');
    const file = bucket.file('puppeteer_screenshots/screenshot_XXX.png');
    await file.save(screenshotBase64, {
        metadata: { contentType: 'image/png' },
    });
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

---

• Third way

(async () => {
    const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
    const page = await browser.newPage();
    await page.goto('https://google.com');
    const screenshotBinary = await page.screenshot({ encoding: 'binary' });

    const bucket = storage.bucket('bucket_name');
    const file = bucket.file('puppeteer_screenshots/screenshot_XXX.png');
    await file.save(screenshotBinary, {
        metadata: { contentType: 'image/png' },
    });
    console.log("Created object gs://bucket_name/puppeteer_screenshots/screenshot_XXX.png");

    await browser.close();
})();

---

References

• puppeteer screenshot .
• google cloud storage (.upload)
• google cloud storage (.save)