How to Capture Screenshots and Videos in Playwright Using Java

Debugging failed automation tests can be time-consuming, especially when tests run in CI/CD pipelines or on remote environments.

Playwright makes debugging easier by providing built-in support for:

• Screenshots
• Video recording
• Execution traces

In this article, we'll learn how to capture screenshots and record videos in Playwright using Java.

---

Why Capture Screenshots and Videos?

Screenshots and videos help automation teams:

• Investigate failures quickly
• Share evidence with developers
• Improve defect reports
• Reduce debugging time
• Analyze intermittent issues

Many organizations automatically attach screenshots and videos to test reports.

---

Taking a Basic Screenshot

Capturing a screenshot in Playwright is straightforward.

page.screenshot(
    new Page.ScreenshotOptions()
        .setPath(Paths.get("homepage.png"))
);

This captures the currently visible portion of the page.

Output:

homepage.png

---

Capturing a Full Page Screenshot

Sometimes the page extends beyond the visible browser window.

Playwright allows capturing the entire page.

page.screenshot(
    new Page.ScreenshotOptions()
        .setFullPage(true)
        .setPath(Paths.get("fullpage.png"))
);

This captures the complete page from top to bottom.

---

Capturing an Element Screenshot

You can capture screenshots of individual elements.

Example:

Locator loginButton = page.locator("#loginButton");

loginButton.screenshot(
    new Locator.ScreenshotOptions()
        .setPath(Paths.get("loginButton.png"))
);

This is useful for:

• Logo verification
• UI validation
• Visual testing

---

Capturing Screenshots on Test Failure

A common framework practice is to capture screenshots only when tests fail.

Example:

try {
    assertThat(page).hasTitle("Dashboard");
}
catch (Exception e) {

    page.screenshot(
        new Page.ScreenshotOptions()
            .setPath(Paths.get("failure.png"))
    );

    throw e;
}

This helps teams analyze failures quickly.

---

Recording Videos in Playwright

Playwright can automatically record browser sessions.

To enable video recording, configure the browser context.

BrowserContext context =
    browser.newContext(
        new Browser.NewContextOptions()
            .setRecordVideoDir(
                Paths.get("videos/")
            )
    );

Playwright will save videos automatically after execution.

---

Creating Pages Using Video Enabled Context

Page page = context.newPage();

page.navigate(
    "https://www.google.com"
);

Once the test completes, the video file will be generated.

Example output:

videos/
 └── 3c84b7d2.webm

---

Saving Videos After Execution

Videos are saved after the browser context closes.

Example:

context.close();
browser.close();

If the context is not closed properly, videos may not be generated.

---

Recording Videos Only for Failed Tests

In large frameworks, recording every test can consume significant storage.

Many teams use one of these approaches:

• Record videos only for failed tests.
• Delete videos for successful tests.
• Retain videos only in CI/CD environments.

---

Recommended Folder Structure

Example project structure:

project
├── screenshots
│   ├── login_failure.png
│   └── dashboard.png
│
├── videos
│   ├── test1.webm
│   └── test2.webm
│
└── src

Keeping artifacts organized simplifies debugging.

---

Complete Example

try (Playwright playwright = Playwright.create()) {

    Browser browser =
        playwright.chromium().launch(
            new BrowserType.LaunchOptions()
                .setHeadless(false)
        );

    BrowserContext context =
        browser.newContext(
            new Browser.NewContextOptions()
                .setRecordVideoDir(
                    Paths.get("videos/")
                )
        );

    Page page = context.newPage();

    page.navigate("https://www.google.com");

    page.screenshot(
        new Page.ScreenshotOptions()
            .setFullPage(true)
            .setPath(Paths.get("google.png"))
    );

    context.close();
    browser.close();
}

This example records a video and captures a full-page screenshot.

---

Best Practices

Use descriptive filenames

Good examples:

LoginFailure_20260630.png
CheckoutPage.png
PaymentError.png

Avoid generic names like:

image1.png
test.png

---

Capture screenshots only when necessary

Excessive screenshots can increase storage usage.

Capture:

• Failures
• Important business checkpoints
• Critical workflows

---

Store artifacts in CI/CD pipelines

Screenshots and videos are especially useful in:

• Jenkins
• GitHub Actions
• Azure DevOps
• GitLab CI

---

Screenshot vs Video

Feature	Screenshot	Video
Storage Usage	Low	High
Debugging Detail	Medium	High
Execution Impact	Minimal	Slight
Best Use Case	Failure Evidence	Complex Flow Analysis

---

Conclusion

Screenshots and videos are essential tools for modern automation frameworks.

Playwright makes capturing these artifacts extremely simple through built-in APIs.

In this article, you learned:

• How to capture screenshots
• How to capture full-page screenshots
• How to capture element screenshots
• How to enable video recording
• Best practices for artifact management

These capabilities significantly improve debugging and make automation failures easier to analyze.

In the next article, we will explore how to handle alerts, confirmations, and browser popups in Playwright using Java.