Capturing Screenshots and Videos with Playwright

Capturing Screenshots and Videos with Playwright

Playwright is a powerful end-to-end testing tool that supports multiple browsers and languages. One of its most useful features is the ability to capture screenshots and videos, which helps developers and testers debug test failures more effectively.


In this blog, we’ll walk through how to take screenshots and record videos using Playwright, with examples in JavaScript.


📸 Why Capture Screenshots and Videos?

Capturing screenshots and videos during automated tests can help you:


Debug failures by seeing exactly what went wrong


Document test flows for stakeholders or team members


Track visual changes in the UI across builds


Monitor flaky tests by watching what actually happened


🧰 Prerequisites

Make sure you have Playwright installed:


bash

Copy

Edit

npm init -y

npm install --save-dev playwright

To install browsers:


bash

Copy

Edit

npx playwright install

🖼️ Taking Screenshots with Playwright

You can capture full-page or element-specific screenshots in Playwright.


✅ Full Page Screenshot

javascript

Copy

Edit

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


(async () => {

  const browser = await chromium.launch();

  const page = await browser.newPage();

  await page.goto('https://example.com');

  

  await page.screenshot({ path: 'fullpage.png', fullPage: true });

  await browser.close();

})();

✅ Element Screenshot

javascript

Copy

Edit

const element = await page.$('h1');

await element.screenshot({ path: 'heading.png' });

🎥 Recording Videos in Playwright

To record videos, you need to enable video recording in the context options.


javascript

Copy

Edit

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

(async () => {

  const browser = await chromium.launch();

  const context = await browser.newContext({

    recordVideo: {

      dir: 'videos/', // Directory to save the video

    }

  });

  const page = await context.newPage();

  await page.goto('https://example.com');

  await page.waitForTimeout(3000); // Just to capture something

  await browser.close(); // Automatically saves video

})();

📂 The recorded video will be saved in the specified videos/ directory after the browser is closed.

📝 Best Practices

Capture on failure: You can set up Playwright to automatically capture a screenshot when a test fails.

Clean up artifacts: Automatically delete or archive screenshots/videos from successful runs to save space.

Use in CI/CD: Combine screenshots/videos with your CI pipelines for test reporting.

🛠️ Example: Capture Screenshot on Failure (Jest + Playwright)

javascript

Copy

Edit

afterEach(async () => {

  if (expect.getState().currentTestName && expect.getState().currentTestName.includes('failed')) {

    await page.screenshot({ path: `error-${Date.now()}.png` });

  }

});

📌 Summary

Capturing screenshots and videos in Playwright is simple and extremely useful. Whether you're troubleshooting a bug or documenting test runs, this feature gives you the visual context you need.

✅ Use cases:

Full-page and element screenshots

Test flow videos

Automatic capture on failure

With just a few lines of code, you can make your test automation suite more powerful and insightful.

Learn Playwright Training Course in Hyderabad

Read More

Working with Alerts and Pop-ups in Playwright

Handling Frames and Iframes Using Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions

Comments

Post a Comment

Popular posts from this blog

How to Install and Set Up Selenium in Python (Step-by-Step)

 Here’s your step-by-step guide to installing and setting up Selenium in Python — perfect if you're just getting started with browser automation. 🚀 🐍 Step 1: Install Python If you haven’t already: Download Python: https://www.python.org/downloads/ Make sure to check the box "Add Python to PATH" during installation Verify installation: bash Copy Edit python --version pip --version 📦 Step 2: Install Selenium Library Open your terminal or command prompt and run: bash Copy Edit pip install selenium To verify: bash Copy Edit pip show selenium 🌐 Step 3: Download WebDriver for Your Browser Depending on what browser you want to automate: 🔹 Chrome: Download ChromeDriver: ➡️ https://sites.google.com/chromium.org/driver/ Make sure the driver version matches your installed Chrome version. 🔹 Firefox: Download GeckoDriver: ➡️ https://github.com/mozilla/geckodriver/releases Unzip and place the executable somewhere on your system, like: Windows: C:\WebDrivers\ Mac/Linux: /usr/local...
Read more

Tosca for API Testing: A Step-by-Step Tutorial

Tosca for API Testing: A Step-by-Step Tutorial Tricentis Tosca is a powerful and user-friendly test automation tool that supports a wide range of testing types — including API testing. With Tosca, you can easily design, automate, and execute API tests without writing any code. It supports REST, SOAP, and other service types, making it a great choice for end-to-end API validation. 🧰 What is Tosca API Testing? Tosca’s API testing allows testers to: Send requests (GET, POST, PUT, DELETE, etc.) Validate responses (status codes, body, headers) Chain requests and share data between them Perform security, load, and functional tests on APIs ✅ Step-by-Step Guide: Tosca API Testing 🔹 Step 1: Open Tosca and Create a Workspace Launch Tosca Commander Create a new workspace (or open an existing one) Choose the workspace type as Multi-user or Single-user based on your setup 🔹 Step 2: Add a New API Test Case Navigate to the Modules section. Right-click and choose Scan > API Scan. The API Scan wi...
Read more

Waits in Playwright: Explicit, Implicit, and Auto

 In Playwright (a powerful end-to-end testing framework), waiting mechanisms help ensure your scripts interact with elements only when they’re ready. Playwright handles waits more intelligently than older tools like Selenium, but understanding the types of waits—Explicit, Implicit, and Auto-waiting—is key for writing reliable tests. 🕰️ Waits in Playwright: Explicit, Implicit, and Auto ✅ 1. Auto-Waiting (Built-in) – Playwright’s Default Behavior What it is: Playwright automatically waits for elements to be actionable before performing actions (like click, type, fill, etc.). This is its most powerful feature. How it works: Waits for the element to be attached to the DOM Waits for the element to be visible Waits for the element to be enabled (not disabled) Waits for stable animation or layout Example: python Copy Edit await page.click('#submit-button') No need for a separate wait — Playwright will wait until the button is ready. Benefits: Reduces the need for manual waits More re...
Read more