How do I capture a full-page screenshot using Playwright?


Question: How can I take a full-page screenshot with Playwright?


Sure, you can capture a full-page screenshot with Playwright by setting the fullPage property to true. Here's how you can do it:

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

test('full page screenshot', async ({ page }) => {
  await page.goto('https://ray.run/');
  await page.screenshot({ path: 'screenshot.png', fullPage: true });

In the above code, fullPage: true tells Playwright to capture the entire scrollable page. By default, fullPage is false, meaning only the visible viewport is captured.

Remember, full-page screenshots can take more time and result in larger files. Also, if you're using omitBackground with a full-page screenshot, it won't have any effect. This property only works with non-full-page screenshots.

So, if you need to capture a whole webpage, setting fullPage to true is a good idea. But, be aware of the potential time and file size implications.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.