How to Capture Screenshots and Videos Using Playwright

A failing test can find like a beat end when there & # 8217; s nothing optic to explain what really happened on the screen.

Take a familiar scenario: a UI test betray in CI, yet the same test passes flawlessly on your machine. No logs point to the issue. The study simply says a button wasn & # 8217; t clicked in time.

Maybe an animation briefly continue it.

Maybe the page scrolled at the wrong moment.

Maybe a modal flashed and disappeared before the next stride fired.

Without visual proof, the movement remains guesswork.

This is where screenshots and picture in Playwright become essential. They show exactly what the browser saw-turning invisible failures into clear, actionable evidence.

A individual screenshot shows the accurate state of the page at failure. A picture disclose the full sequence-every transition, delay, and unexpected transmutation.

This guide explain how to capture screenshots and record video in, and best practices to follow while implementing these.

What are Visual Artifacts in Test Automation (Screenshots vs Videos)

Screenshotsare unchanging picture of the browser state at a specific moment, whilevideosrecord the executing stream of a examination.

Screenshotsare idealistic for pinpointing UI mismatches & # 8211; e.g., layout shifts, incorrect styles & # 8211; whereasvideosseizure dynamical interaction such as animations, transitions or unexpected user flow.

Using them together give a fuller picture of what happens during test execution, aiding root-cause analysis.

Why Capture Screenshots and Videos in Playwright?

Capturing visual artifacts in Playwright enhances several aspects of test mechanization:

• Helps diagnose flaky exam by visualizing what the browser experienced when a failure occur.
• Provides evidence when reporting UI regressions or layout changes during maintenance.
• Serves as documentation of key flows (e.g., user login, checkout) to support development or stakeholder review.
• Enables easier comparison of UI behaviour across browsers/devices when unite with cross-platform runs.

Setup and Configuration for Capture Screenshots and Videos in Playwright

Learn how screenshots and videos in Playwright are captured during test executing.

Installing Playwright and creating a basic test

Begin by installing Playwright in your undertaking:

npm install -D @ playwright/test npx playwright install

Then create a bare test file, for example example.spec.ts:

importee {trial, look} from & # 8216; @ playwright/test & # 8217;; trial (& # 8216; basic examination & # 8217;, async ({page}) = & gt; {
await page.goto (& # 8216; https: //example.com & # 8217;);
await expect (page) .toHaveTitle (/Example/);

});

Configuring screenshot and video options inplaywright.config.ts

In playwright.config.ts, enable screenshots/videos globally or per-project:

import {defineConfig} from & # 8216; @ playwright/test & # 8217;; export default defineConfig ({

use: {
screenshot: & # 8216; only-on-failure & # 8217;, // capture screenshot when tryout fails
video: {mode: & # 8216; retain-on-failure & # 8217;} // record video only when test fails

},

});

The official docs line that video show fashion include& # 8216; off & # 8217;, & # 8216; on & # 8217;, & # 8216; retain-on-failure & # 8217;, and & # 8216; on-first-retry & # 8217;.

These configuration scene establish a baseline for capturing visual artefact without whelm your storage or workflow.

is a cloud-based testing creature, that streamline the setup phase by providing ready-to-use existent browsers and devices, decimate the demand to configure or sustain local environments.

With instant cloud approach, detailed logs, videos, and network data captured automatically, it ensures every test starts with consistent conditions and dependable visual artifact, without handling browser updates or device setup.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Talk to an Expert

Capturing Screenshots with Playwright

Capturing screenshots in Playwright gives a open snapshot of the browser & # 8217; s state at any moment, help name UI issues with precision. Here are the steps to follow:

Basic screenshot API usage (page.screenshot)

The nucleus method for fascinate screenshots:

await page.screenshot ({path: & # 8216; screenshot.png & # 8217;});

You can optionally specify options such as format or calibre.

Full-page, viewport, element-level, and buffer captures

Full-page:

await page.screenshot ({path: & # 8216; fullpage.png & # 8217;, fullPage: true});

Element:

await page.locator (& # 8216; .header & # 8217;) .screenshot ({path: & # 8216; header.png & # 8217;});

Buffer-capture (in-memory):

const pilot = await page.screenshot (); console.log (buffer.toString (& # 8216; base64 & # 8217;));

Screenshot on failures or retries

Using config to enchant only on failures (or on first retry) restrict disturbance and focuses artifacts on problematic footrace. This strategy helps maintain doable disk usage and meaningful outputs for analysis.

Recording Videos with Playwright

Recording videos in Playwright furnish a uninterrupted view of each examination run, making it easy to trace interaction, place timing issues, and understand failures end-to-end.

Configuring picture recording (video way, size, directory)

Video capture is endorse via the video option in config or via recordVideo in context creation:

exportation default defineConfig ({use: {
video: {mode: & # 8216; on-first-retry & # 8217;, size: {width: 640, height: 480}}

},

});

Or during context:

const context = await browser.newContext ({recordVideo: {dir: & # 8216; videos/ & # 8217;, size: {width: 640, height: 480}}

});

Accessing and saving enter video file

After the browser context is closed, video files are prevail. You can find the way:

const videoPath = await page.video () .path ();

When and what to show?

Recording videos of every test can be heavy on storage. Recommended practices:

• Record only when tests fail or on inaugural retry.
• Enable video recording for longer or critical flows instead than every trivial test.
• Configure directory structure and cleanup insurance to manage disk use effectively.

Integrating Visual Captures into Your Test Pipeline

Integrating screenshots and videos into the test pipeline guarantee every run produces actionable ocular grounds, strengthening debugging and transparency across squad.

Using screenshots/videos for debugging and bug reports

When a test fails, part the screenshot or picture along with logs. Visual evidence provides context that logs alone may miss. Example: layout shift occurs only after a hover interaction, seeable in the video.

Incorporating into CI/CD workflows

Configure your CI to archive screenshots/videos as artifact when a run completes. This provides a historical record of trial results and facilitate when tracing regressions backwards across runs.

Visual regression testing with screenshots/videos

With screenshot functionality, use assertions like:

await expect (page) .toHaveScreenshot (& # 8216; landing.png & # 8217;);

This enables compare of current UI state with a baseline. Storing videos enables reviewing interaction between trial and spotting UI behaviour shifts.

Troubleshooting Common Issues in Capturing Screenshots and Videos in Playwright

Troubleshooting screenshot and picture issues in Playwright involves identifying why artifacts fail to save, grow too bombastic, or impact performance, and applying targeted fixes to keep capture authentic.

• Large picture file sizing and depot drain:High-resolution videos or recording every test can apace consume storage. Mitigate this by limiting enter to failure instance or shorter tests, press video or purify old artifacts.
• Screenshots/videos miss or not saved:Ensure that contexts and pages are closed properly so that Playwright flushes artifacts to disk. Also control file paths, permission and config modes (e.g., video: & # 8216; off & # 8217;).
• Performance impact during seizure:Capturing high-resolution video or full-page screenshots increase overhead. Use lower resolution when possible and avoid capturing at every step in high-parallel testing scenarios.

Best Practices and Optimization Tips for Capturing Screenshots/Videos in Playwright

Following best practices for screenshots and video in Playwright helps keep consistent output, control storage use, and check optical artifacts remain accurate and useful across environments.

• Capture solely what & # 8217; s needed (for failures, key user flows) to deflect excessive storehouse.
• Name and organize output artifacts consistently (e.g., screenshots/ {testName} - {browser} .png) for easier tracking.
• Clean up old artifacts regularly or archive them to long-term entrepot.
• Use buffered screenshot seizure when processing images in-memory (e.g., for image diffing) rather than saving to register.
• For ocular fixation, conserve a stable baseline environment (consistent blind size, OS, browser variant) since screenshot compare depend on determinism.

is a cloud-based examination tool that reinforces better practices by escape Playwright trial on stable, managed infrastructure that maintain screenshots and videos consistent across browsers and device.

High-scale parallel execution zip up visual proof, while the unified debugging dashboard organizes artefact for quick reexamination. With built-in logs, videos, and seamless CI/CD integration, squad can optimize capture workflow without worrying about maintenance or cross-browser reliability.

How BrowserStack helps in Testing Screenshots/Videos in Playwright?

Testing screenshots and videos at scale requires reliable environs, predictable rendering, and consistent artifact storage.

Local setups much introduce variations-different GPU drivers, mismatched browser versions, precarious network, or rendering quirks that look solely at scale. BrowserStack removes these variables by providing managed environments with real device, consistent browser configurations, scalable infrastructure, deep debugging tools, and a layer that keep Playwright & # 8217; s screenshots and picture stable and reproducible across tally.

is a cloud-based examination puppet that strengthen Playwright & # 8217; s screenshot and video workflow through multiple layers of support.

Here & # 8217; s how it improve truth, coverage, and debug efficiency:

• Runs Playwright tests on real browsers and 3500+ real mobile devices to yield accurate screenshots and video.
• Provides consistent OS, browser, and device shape so visual artifacts remain stable across test.
• Automatically stores screenshots, videos, logs, and traces in a unified dashboard for quick debugging.
• Supports high-scale execution to capture visuals across multiple environment simultaneously.
• Offers precise picture playback with timestamps and detailed logs to name UI failures.
• Eliminates browser and device care, ensuring updated environments without local setup.
• Integrates natively with Playwright Test, preserving all screenshot and video options without supererogatory configuration.

Conclusion

Capturing screenshots and picture with Playwright transforms visual testing from a manual afterthought into an integral constituent of the automation flow. When used strategically-configured for key flows, combine with CI/CD pipelines, and optionally scaled via -it raises the transparency, diagnosability and dependableness of web trial suites.

Related Guides