In this tutorial, we will learn how to take a screenshot of a website using Playwright. We’ll use Playwright’s screenshot method to generate screenshot of a website using just the website url as input. We’ll also dive deep into some of the options provided by screenshot method and discover some frequently used use cases.
Installing Playwright
1. Using yarn
yarn add playwright
2. Using npm
npm install playwright
Taking a Screenshot
Once you’ve got Playwright installed, we’ll now write a function that accepts website url as a parameter and saves it to a specified path locally for now.
This code will launch a Chromium browser, navigate to the websiteUrl passed to the function, take a screenshot of the page, and save it locally to a file named example.png.
Screenshot Options
The screenshot method accepts options typed under the PageScreenshotOptions interface to use while taking screenshots:
animations - stops CSS animations, CSS transitions, and Web Animations when set to "disabled". Defaults to "allow".
caret- hides text caret when set to "hide", otherwise behavior is not changed. Defaults to "hide".
clip- an object specifying the clipping of the resulting image.
fullPage- takes a screenshot of the full scrollable page when set to true. Defaults to false.
mask- specifies locators that should be masked when the screenshot is taken.
omitBackground- allows capturing screenshots with transparency and hides the default white background. Not applicable to jpeg images. Defaults to false.
path- the file path to save the image to. The screenshot type will be inferred from the file extension.
quality- the quality of the image, between 0-100. Not applicable to png images.
scale- sets the scale of the screenshot image.
timeout- sets the maximum time in milliseconds. Defaults to 30 seconds.
type - specifies the screenshot type. Defaults to png. Can be jpeg or png
Let’s try implementing some of the most frequently used cases:
Taking screenshot of the entire page
Just pass the fullPage option as true (which defaults to false) and you’re good.
Next, let’s write a function to take a screenshot and upload it to S3. The function will accept websiteUrl, bucketName and fileName as input and return uploadedFileUri as output.
While it is super quick to write a function to take screenshots using playwright, unfortunately, it gets very complicated very quickly as you try to scale it given the resource intensive behaviour of any headless browser. Managing proxies, handling cookies, storing and caching images is something we haven’t even talked about.
Screenshotapi.net solves the above problems with grace. Screenshotapi provides a reliable API to take screenshots or generate pdfs of a website at blazing fast speeds. Screenshotapi process a few million screenshots every month without fail. Screenshotapi is trusted by marquee companies like the crypto.com, dentsu, e.ventures to name a few.
screenshot api customers
Hope the tutorial was helpful. Don’t forget to give screenshotapi.net a shot, we have a7-day free trialthat allows you to capture up to 100 screenshots.