How to Take Screenshot in Playwright With Example

By AravindPlaywright Tutorial
Guide to Take a Screenshot in Playwright

Capturing screenshots during automated end-to-end tests is essential for verifying results and debugging failures. Playwright makes it easy to take screenshot in Playwright during test execution, especially when a test case fails. In this guide, you’ll learn how to capture full page, element-specific, and failure screenshots using Playwright’s built-in screenshot capabilities.

You can use Playwright’s screenshot() method to capture full-page screenshots, single element screenshots, or automatically capture screenshots on test failures. In this tutorial, you’ll learn how to take screenshots in Playwright with simple examples.

Take a Screenshot in Playwright using the screenshot() Method

In Playwright, you can easily capture screenshots using the built-in screenshot() method by specifying the file path where the screenshot should be saved.

Here is an example of how to take a screenshot using the screenshot() method in Playwright, which you can use to understand how it works in real automation scripts.

Example of taking a screenshot in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Take screenshot using screenshot() method in playwright.', async ({ page }) => {
  
  await page.goto('https://google.com');
  
  // Take screenshot and save to file to root directory.
  await page.screenshot({ path: 'screenshot.png' });  
});
Example: Take screenshot using screenshot() method in playwright

Code Breakdown

  • page.screenshot({ path: ‘screenshot.png’ }) — This command captures a screenshot and saves it in the root directory (where your Playwright project is located) with the file name screenshot.png. You can also specify a full file path if you want to save the screenshot in a different location.

Capturing a screenshot of a specific region in Playwright

The playwright’s screenshot() method is more advanced than many other automation tools. It not only captures a simple screenshot, but also allows you to capture a specific region using clip with custom x, y coordinates and dimensions.

The example below demonstrates how to capture a screenshot of a specific region on the page in Playwright using x, y, width, and height coordinates with the clip option.

Example of taking a screenshot of a specific region in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Capture screenshot of specific region in playwright.', async ({ page }) => {
  
  await page.goto('https://google.com');
  
  // Take screenshot and save to file to root directory.
  await page.screenshot({
  path: 'screenshot.png', // File name or full path to save the screenshot
  fullPage: true,         // capture full scrollable page
  clip: {                // Defines a specific region of the page to capture
    x: 0,                // X-coordinate (horizontal start point)
    y: 0,                // Y-coordinate (vertical start point)
    width: 800,          // Width of the screenshot region
    height: 600          // Height of the screenshot region
  },
  omitBackground: true,  // Makes the background transparent (useful for PNG)
  type: 'jpeg',          // Screenshot file format (can be 'png' or 'jpeg')
  quality: 80,           // Quality of JPEG (0–100); only for 'jpeg' type
  timeout: 30000         // Max time in milliseconds to wait for screenshot
});

});
Example: Capture screenshot of specific region in playwright

Code Breakdown

  • fullPage: true tells Playwright to capture the entire scrollable page.
  • However, when the clip is used, fullPage is ignored — only the region defined in clip is captured.
  • clip defines the area you want to capture with pixel coordinates (x, y, width, height).
  • omitBackground: true is useful when saving as .png—it removes the white background and makes it transparent.
  • type: ‘jpeg’ and quality: 80 are used together to generate compressed JPEG images (saves space).
  • timeout: 30000 allows up to 30 seconds for the screenshot operation before it times out.

If your test involves interacting with dynamic UI elements, such as performing drag and drop in Playwright, capturing screenshots can help you validate the end state visually.

Capturing a screenshot of a specific element in Playwright

Sometimes, during Playwright automation testing, you may need to capture a screenshot of a specific element, such as a button, a textbox, or an error message. Playwright’s screenshot() method supports this functionality as well. You can simply locate the element using a selector and then call the screenshot() method on that element to capture it.

For instance, if you’re testing form validation, you may want to clear input field values in Playwright and then capture a screenshot of the resulting error state.

Let’s see how to capture a screenshot of a specific element in Playwright with a real-world example.

Example to capture a screenshot of a specific element in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Take screenshot of specific element in playwright.', async ({ page }) => {
  
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
  
  // Take screenshot Alert button and save to file to root directory.
  const element = await page.getByRole('button', { name: 'Alert' });
  await element.screenshot({ path: 'screenshot.png' }); 
});
Example: Take screenshot of specific element in playwright

Code Breakdown

  • page.getByRole(‘button’, { name: ‘Alert’ }): It will locate the button element with visible text “Alert”.
  • element.screenshot({ path: ‘screenshot.png’ }): It will take a screenshot of the located element and save the screenshot with the file name screenshot.png in the project’s root directory.

You can also take element-level screenshots while filling forms or trying to upload files in Playwright to ensure file selectors and buttons render correctly.

Take a Screenshot of a Full Page in Playwright

In Playwright automation testing, you may sometimes need to capture a full-page screenshot, for example, to report a UI bug or for documentation purposes. Playwright makes this easy with the screenshot() method by simply enabling the fullPage option.

Let’s see how to capture a full-page screenshot in Playwright with a practical example to better understand how it works in real-world test scenarios.

Example to take a full-page screenshot in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Take screenshot of full page in playwright.', async ({ page }) => {
  
  await page.goto('https://only-testing-blog.blogspot.com/2025/04/alert-dialogs.html');
  
  // Take screenshot of full page.
  await page.screenshot({
  path: 'fullpage.png',
  fullPage: true
});
});
Example: Take screenshot of full page in playwright

Code Breakdown

  • Here screenshot() method will capture screenshot and store it at root directory of project with file name fullpage.png.
  • fullPage: true : This tells Playwright to capture the entire scrollable page, not just the visible viewport.

Take a screenshot on test failure in Playwright

Logging test failures is a crucial part of test automation, and in Playwright, you can capture a screenshot of the page automatically when a test fails. This helps in debugging and identifying UI issues effectively.

You can use a try-catch block in your code and capture a screenshot using the screenshot() method if the test fails due to any error.

You can use a try-catch block in your Playwright test script to handle errors and capture a screenshot using the screenshot() method if the test fails due to any exception.

Let’s see how to capture a screenshot in Playwright when a test fails, with a practical example to help you understand how it works in real-world scenarios.

Example to take a screenshot on test failure in Playwright

const { test, expect } = require('@playwright/test');

test('Example: Take screenshot when test fails in playwright.', async ({ page }) => {
   
  try {
    await page.goto('https://google.com');
    // Your test code...
  } catch (error) {
    //Take screenshot if error occurs and test fails
    await page.screenshot({ path: 'test-failure.png' });
    throw error;
  }
});

Code Breakdown

The catch (error) block is used to handle any exceptions that occur during test execution. If an error is thrown and the test fails, the code inside the catch block will run. In this case, we call the screenshot() method inside the catch block to capture the current state of the page. This means that whenever an error occurs, a screenshot will be automatically taken, making it easier to debug test failures.

Final Words

Capturing screenshots in Playwright is simple and does not require any third-party tools. With the powerful built-in screenshot() method, you can easily take full-page screenshots, capture specific elements or regions, and even log screenshots automatically on test failures, making your automation more reliable and visually informative.

Leave a Reply

Your email address will not be published. Required fields are marked *