How to take screenshot in Playwright

Taking screenshots in Playwright is straightforward and can be done for the entire page, a specific element, or the viewport. Here's how you can take screenshots in Playwright:

Installation

Ensure you have Playwright installed:

npm install playwright

Taking a Screenshot of the Entire Page

To take a screenshot of the entire page, you can use the page.screenshot() method. Here’s an example:

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page/tab
  const page = await context.newPage();

  // Navigate to a web page
  await page.goto('https://example.com');

  // Take a screenshot of the entire page
  await page.screenshot({ path: 'screenshot.png', fullPage: true });

  // Close the browser
  await browser.close();
})();

Taking a Screenshot of a Specific Element

To take a screenshot of a specific element, you need to locate the element first and then use the elementHandle.screenshot() method. Here’s an example:

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page/tab
  const page = await context.newPage();

  // Navigate to a web page
  await page.goto('https://example.com');

  // Locate the element to be captured
  const element = await page.$('h1');

  // Take a screenshot of the specific element
  await element.screenshot({ path: 'element_screenshot.png' });

  // Close the browser
  await browser.close();
})();

Taking a Screenshot of the Viewport

To take a screenshot of the current viewport only (the visible part of the page), you can omit the fullPage option:

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page/tab
  const page = await context.newPage();

  // Navigate to a web page
  await page.goto('https://example.com');

  // Take a screenshot of the viewport (visible part of the page)
  await page.screenshot({ path: 'viewport_screenshot.png' });

  // Close the browser
  await browser.close();
})();

Configuring Screenshot Options

Playwright’s screenshot() method supports various options to customize the screenshot:

• path: The file path to save the screenshot.
• fullPage: A boolean indicating whether to capture the entire page or just the viewport.
• clip: An object specifying the clip region to capture (x, y, width, height).
• type: The image format (png or jpeg).
• quality: The quality of the image (only applicable to jpeg format).
• omitBackground: A boolean to hide default white background and make it transparent.

Example with additional options:

const { chromium } = require('playwright');

(async () => {
  // Launch a Chromium browser instance
  const browser = await chromium.launch();

  // Create a new browser context
  const context = await browser.newContext();

  // Create a new page/tab
  const page = await context.newPage();

  // Navigate to a web page
  await page.goto('https://example.com');

  // Take a screenshot with additional options
  await page.screenshot({ 
    path: 'custom_screenshot.png', 
    fullPage: true, 
    type: 'jpeg', 
    quality: 80,
    omitBackground: true
  });

  // Close the browser
  await browser.close();
})();