How can I take a screenshot of a full page with Playwright (visual comparison)?

Question

I'm trying to capture a full page screenshot for visual regression with Playwright. Per their docs, it can be done like so:

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

This works great, the only problem is it will only take a screenshot of the viewport. Is it possible to capture a full page screenshot for visual comparison?

Answer 1

The answer is to include 'fullPage' optional property as part of the toHaveScreenshot() method:

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ fullPage: true });
});