Name: Setting the viewport on a Playwright headless browser
Uploaded: 2020-03-20T12:33:05-05:00
Description: When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Designing OpenGraph unfurls in Figma

Building an OpenGraph image React component in CodeSandbox, based on a Figma design

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

Scaffolding and deploying a Netlify Function in JavaScript

Using Playwright to screenshot the DOM and return an image from a Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Setting the viewport on a Playwright headless browser

Testing an opengraph image with the Twitter Card Validator

Passing variables to serverless functions using query strings

Using Cloudinary as a write-through cache for a Netlify Function that generates images

Using _redirects files on Netlify to make .netlify function URLs more user-friendly

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

https://app.egghead.io/api/v1/lessons/puppeteer-setting-the-viewport-on-a-playwright-headless-browser/subtitles

Chris Biscardi: [00:00] Our serverless function image generation is working, but you'll see that the dimensions that are getting returned from a page that a value will call are smaller than the actual image. This is because we haven't set the viewport yet.

[00:10] Right before we set content, we can set the ViewportSize to whatever we want. In our case, we'll set it for the same dimensions that we used in figma, a new CodeSandbox.

[00:19] Now we see our image, which I'll save to my desktop.

Setting the viewport on a Playwright headless browser

Share this video with your friends

Course

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React