Take a fullpage screenshot with Playwright

Intro

I was toying with Playwright when I discovered that we can take screenshots from websites. We will need the following in order to do that:

• Node.js installed.
• Bootstrap a JS project.
• An internet connection to open the websites we want to take a screenshot of.

The final code

import { test } from '@playwright/test';

// These are the websites that we will loop when taking the screenshots
const websites = [
	{
		name: 'linear.app',
		url: 'https://linear.app/integrations'
	}
];

// We will use the current date for the name of the file, but you can use anything else
let date = new Date().toISOString().slice(0, 10);

websites.forEach(async (website) => {
	test(`Capture screenshot of ${website.url}`, async ({ page }) => {
		await page.goto(website.url, { waitUntil: 'networkidle' });
		for (const image of await page.getByRole('img').all()) await image.waitFor();
		await page.screenshot({
			path: `screenshots/${date} ${website.name}.png`,
			fullPage: true,
			animations: 'disabled'
		});
	});
});