Playwright Screenshots in Java – Complete Guide with Practical Examples (2026)

Playwright Screenshots in Java – Complete Guide with Practical Examples (2026)

Learning Path: RookieNerd Academy → Playwright with Java

Module: 11 – Screenshots

Difficulty: Beginner to Intermediate

Estimated Reading Time: 20–25 Minutes


SEO Information

SEO Title

Playwright Screenshots in Java – Complete Guide with Examples (2026)

Meta Description

Learn how to capture screenshots in Playwright Java. Master full-page screenshots, element screenshots, failure screenshots, custom file names, and best practices for automation frameworks.

URL Slug

/academy/playwright/playwright-screenshots-java

Primary Keyword

Playwright Screenshots Java

Secondary Keywords

  • Playwright Take Screenshot

  • Playwright Full Page Screenshot

  • Playwright Element Screenshot

  • Playwright Java Tutorial

  • Playwright Automation Framework


Learning Objectives

After completing this tutorial, you will be able to:

  • Capture full-page screenshots.

  • Capture screenshots of specific elements.

  • Save screenshots to custom locations.

  • Take screenshots when a test fails.

  • Organize screenshots in enterprise automation frameworks.


Introduction

Screenshots are one of the most useful debugging tools in UI automation.

Imagine your Playwright test fails on a Continuous Integration (CI) server.

Without a screenshot, you may only know that:

Assertion Failed

But you won't know what the browser looked like when the failure occurred.

A screenshot helps you immediately identify issues such as:

  • Missing elements

  • Incorrect page navigation

  • Broken layouts

  • Validation errors

  • Unexpected popups

  • Authentication failures

For this reason, most enterprise automation frameworks automatically capture screenshots whenever a test fails.


Why Screenshots Matter

Screenshots provide visual evidence of the application's state during test execution.

Benefits include:

  • Faster debugging.

  • Easier defect reporting.

  • Better collaboration between developers and testers.

  • Useful documentation for automation reports.

  • Support for CI/CD pipelines.


Capturing a Basic Screenshot

The simplest way to capture the current page is:

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

This saves the visible browser area as an image.


Capturing a Full-Page Screenshot

Some web pages extend beyond the visible browser window.

Capture the entire page using:

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

This is useful for:

  • Landing pages

  • Long reports

  • Documentation pages


Capturing a Specific Element

Sometimes only one component needs to be verified.

Example:

Locator profileCard = page.locator(".profile-card");

profileCard.screenshot(new Locator.ScreenshotOptions()
        .setPath(Paths.get("screenshots/profile-card.png")));

This captures only the selected element.


Capturing a Screenshot After Login

Example:

page.getByLabel("Username").fill("admin");

page.getByLabel("Password").fill("Password123");

page.getByRole(
        AriaRole.BUTTON,
        new Page.GetByRoleOptions().setName("Login"))
    .click();

page.screenshot(new Page.ScreenshotOptions()
        .setPath(Paths.get("screenshots/dashboard.png")));

This creates a visual record of the dashboard after a successful login.


Taking Screenshots on Test Failure

One common practice is to capture a screenshot whenever an assertion fails.

Example:

try {

    assertThat(page).hasTitle("Dashboard");

} catch (AssertionError ex) {

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

    throw ex;
}

This approach makes debugging failed tests much easier.


Organizing Screenshot Files

A recommended folder structure:

Project

├── src
├── test
├── screenshots
│      ├── passed
│      ├── failed
│      └── reports

Keeping screenshots organized helps when running large test suites.


Naming Screenshots

Instead of using generic names like:

image.png

Prefer descriptive names:

LoginSuccess.png

OrderConfirmation.png

PaymentFailure.png

This makes it easier to identify screenshots later.


Real-World Example

Imagine an online banking application.

Workflow:

  1. Login.

  2. Transfer money.

  3. Verify success message.

  4. Capture a screenshot of the confirmation page.

assertThat(page.locator(".success"))
        .hasText("Transfer Completed");

page.screenshot(new Page.ScreenshotOptions()
        .setPath(Paths.get("screenshots/transfer-success.png")));

The screenshot can be attached to a test report if required.


Screenshots in CI/CD

Many teams run Playwright tests in pipelines such as:

  • GitHub Actions

  • Azure DevOps

  • Jenkins

Automatically saving screenshots for failed tests makes troubleshooting much easier because developers can inspect the UI without reproducing the issue locally.


Best Practices

  • Store screenshots in a dedicated folder.

  • Capture screenshots only when they provide value.

  • Use descriptive file names.

  • Include screenshots in test reports when possible.

  • Remove outdated screenshots periodically.


Common Mistakes

Capturing Too Many Screenshots

Avoid taking screenshots after every action unless required. It increases storage usage and slows execution.

Overwriting Existing Files

Use unique file names or timestamps if multiple tests run.

Ignoring Failure Screenshots

If your framework captures screenshots only on success, you'll miss the most valuable debugging information.


Practice Exercise

Create a Playwright script that:

  1. Opens a website.

  2. Takes a full-page screenshot.

  3. Captures a screenshot of the login button.

  4. Saves both images in the screenshots folder.

  5. Intentionally fail an assertion and capture a failure screenshot.


Interview Questions

  1. How do you capture a screenshot in Playwright Java?

  2. What is the difference between a page screenshot and an element screenshot?

  3. How do you capture a full-page screenshot?

  4. Why are screenshots useful in CI/CD pipelines?

  5. How would you capture screenshots only when tests fail?


FAQs

Does Playwright support element-level screenshots?

Yes. Any Locator can capture its own screenshot.

Can I capture the full web page?

Yes. Set setFullPage(true) in the screenshot options.

Where should screenshots be stored?

A dedicated project folder such as screenshots/ is recommended. For larger projects, separate passed and failed screenshots into different subfolders.


Summary

In this lesson, you learned:

  • How to capture page screenshots.

  • How to capture full-page screenshots.

  • How to capture element screenshots.

  • How to save screenshots with custom names.

  • How to capture screenshots when a test fails.

  • Best practices for organizing screenshots in enterprise automation frameworks.

Screenshots play a key role in debugging, reporting, and maintaining reliable UI automation. As your test suite grows, a well-organized screenshot strategy will save significant debugging time.


Related Tutorials

  • Playwright File Upload and Download

  • Playwright Frames and iFrames

  • Playwright Browser Context

  • Playwright Auto Waiting

Next Lesson

Playwright Page Object Model (POM) in Java – Build a Scalable Automation Framework


Suggested Screenshots

  1. Browser before taking a screenshot.

  2. Full-page screenshot example.

  3. Element screenshot of a login button.

  4. Project folder showing saved screenshots.

  5. CI/CD report with a linked failure screenshot.

  6. Folder structure for organizing screenshots.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +