How to Show Visible Elements in Playwright


















Visible Elements in Playwright Java – Complete Guide with Examples

When working with web automation, one of the most important concepts to understand is visible elements. Many beginners assume that if an element exists in the DOM, it can be interacted with. However, that is not always true. In real-world web applications, elements may exist in the page structure but still not be visible or interactable.

In this comprehensive guide, you will learn:

  • What visible elements are in web automation

  • Why visibility matters in Playwright

  • Common reasons elements are not visible

  • How Playwright handles visibility internally

  • How to filter visible elements using Playwright Java

  • A complete working Java example

  • Best practices for handling visible elements

  • Real-world automation use cases

This article is fully SEO optimized, AdSense-friendly, and written in a natural human style to help both beginners and experienced automation engineers.


What Are Visible Elements?

In web automation, a visible element is an element that is actually displayed on the web page and can be seen or interacted with by a user.

An element may exist in the DOM (Document Object Model) but still not be visible on the page.

For example, an element might be:

  • Hidden using CSS (display: none)

  • Hidden using visibility: hidden

  • Invisible using opacity: 0

  • Positioned outside the viewport

  • Overlapped by another element

  • Not yet rendered due to dynamic loading

  • Inside a collapsed dropdown or modal

In all these cases, the element exists in the DOM but is not visible to the user.


Why Visibility Matters in Playwright?

Playwright is designed to simulate real user behavior. Unlike some automation tools that interact with elements simply because they exist in the DOM, Playwright ensures that actions like:

  • click()

  • fill()

  • type()

  • hover()

are performed only on visible and actionable elements.

This is extremely important for realistic testing.

Preventing False Positives

If your automation script interacts with hidden elements, it may:

  • Pass tests incorrectly

  • Ignore UI bugs

  • Miss rendering issues

  • Fail in real-world user scenarios

Playwright prevents such problems by verifying visibility before performing actions.


Common Scenarios Where Elements Are Not Visible

Understanding why elements are not visible helps you debug automation issues faster.

1. CSS Display None

display: none;

The element is completely removed from visual layout.


2. Visibility Hidden

visibility: hidden;

The element occupies space but is not visible.


3. Opacity Zero

opacity: 0;

The element is transparent.


4. Off-Screen Elements

Elements that require scrolling to become visible.


5. Dynamic Rendering

Elements that load after:

  • AJAX calls

  • API responses

  • User interactions


6. Overlapping Elements

Sometimes popups or modals cover other elements.


How Playwright Handles Visibility

Playwright includes built-in checks for:

  • Element visibility

  • Element stability

  • Element enabled state

  • Element receiving pointer events

This ensures that automation mimics actual user interactions.


Working with Visible Elements in Playwright Java

When you locate elements using:

page.locator("button");

It may return multiple elements. Some might be visible, others hidden.

Playwright allows you to:

  • Filter only visible elements

  • Check visibility status

  • Assert visibility

  • Extract visible content


Steps to Show All Visible Elements in Playwright Java

To display visible elements on a webpage:

  1. Navigate to the webpage

  2. Select all elements using universal selector *

  3. Loop through elements

  4. Check visibility

  5. Print visible elements


Example Website

We will use:

https://example.com

This is a simple static demo site suitable for demonstration.


Complete Java Code Example

Below is a working Playwright Java example that prints all visible elements:

import com.microsoft.playwright.*;

public class VisibleElementsExample {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {

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

            BrowserContext context = browser.newContext();
            Page page = context.newPage();

            // Navigate to website
            page.navigate("https://example.com");

            // Select all elements
            Locator allElements = page.locator("*");

            int count = allElements.count();
            System.out.println("Total Elements Found: " + count);
            System.out.println("Visible Elements:");

            for (int i = 0; i < count; i++) {
                Locator element = allElements.nth(i);

                if (element.isVisible()) {
                    String tagName = element.evaluate("el => el.tagName").toString();
                    String text = element.innerText().trim();

                    System.out.println("Tag: " + tagName + ", Text: " + text);
                }
            }

            browser.close();
        }
    }
}


Code Explanation

Let’s break down the important parts.


(a) Navigate to Website

page.navigate("https://example.com");

Loads the webpage.


(b) Select All Elements

page.locator("*");

The universal selector * selects every element in the DOM.


(c) Count Elements

allElements.count();

Returns total number of elements on the page.


(d) Loop Through Elements

We iterate through each element using:

allElements.nth(i);


(e) Check Visibility

element.isVisible();

Returns true only if element is visible.


(f) Extract Tag Name

element.evaluate("el => el.tagName");

Uses JavaScript to retrieve the HTML tag name.


(g) Get Visible Text

element.innerText();

Returns only visible text content.


Using Visibility in Assertions

In automation testing, you often need to verify if an element is visible.

Example:

Locator successMessage = page.locator(".success");

if (successMessage.isVisible()) {
    System.out.println("Success message is visible");
}

Or using Playwright Assertions:

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

assertThat(successMessage).isVisible();

This ensures correct UI behavior.


Filtering Only Visible Elements

Playwright also allows filtering directly:

Locator visibleButtons = page.locator("button").filter(
    new Locator.FilterOptions().setHasText("Submit")
);

You can also use:

page.locator("button:visible");

This CSS pseudo-class selects only visible elements.


Real-World Use Cases

Handling visible elements is important in:

  • Dropdown menus

  • Modal dialogs

  • Pop-up alerts

  • Dynamic search results

  • Pagination controls

  • Navigation menus

Example:

A dropdown contains 10 items but only 5 are visible after clicking.

Your script should only interact with visible items.


Debugging Visible Elements

Sometimes testers log visible elements to debug UI rendering issues.

Example:

  • Checking which buttons are visible after login

  • Verifying menu items based on user roles

  • Confirming dynamic content loading

This helps ensure:

  • UI consistency

  • Correct rendering

  • Proper access control


Best Practices for Handling Visible Elements

To make automation stable:


1. Always Check Visibility Before Action

Even though Playwright auto-checks visibility, explicit checks improve clarity.


2. Use Assertions

Instead of printing results, assert visibility in test cases.


3. Avoid Force Click

Avoid using force options unless absolutely necessary.


4. Wait for Dynamic Elements

Use:

page.waitForSelector(".element");

before checking visibility.


5. Scroll Into View

If element is outside viewport:

element.scrollIntoViewIfNeeded();


Common Interview Questions

Q1: What is a visible element?

An element that is displayed and interactable on the web page.

Q2: Can an element exist in DOM but not be visible?

Yes.

Q3: How do you check visibility in Playwright?

Using:

element.isVisible();

Q4: Why is visibility important?

To simulate real user interactions.


Common Mistakes to Avoid

  • Interacting with hidden elements

  • Not waiting for dynamic rendering

  • Ignoring overlapping elements

  • Using static waits instead of smart waits


Advanced Tip: Handling Hidden Dropdown Elements

Some dropdown options are hidden until clicked.

Example:

page.locator("#dropdown").click();

Locator options = page.locator(".dropdown-item");

for (int i = 0; i < options.count(); i++) {
    if (options.nth(i).isVisible()) {
        System.out.println(options.nth(i).innerText());
    }
}

This ensures you only interact with displayed options.


Conclusion

Understanding visible elements in Playwright Java is fundamental for building realistic and reliable automation tests. Just because an element exists in the DOM does not mean it is visible or interactable.

In this complete guide, we covered:

  • What visible elements are

  • Why visibility matters

  • Common hidden element scenarios

  • How Playwright checks visibility

  • Java example to display visible elements

  • Best practices and interview questions

Mastering visibility handling ensures:

  • Stable automation

  • Realistic user simulation

  • Reduced flaky tests

  • Accurate UI validation

If you are serious about becoming an expert in Playwright automation, always prioritize working with visible and interactable elements.


Suggested Posts:

1. BrowserContext in Playwright
2. File Upload in Playwright
3. Comma Selectors in Playwright
4. Trace Viewer in Playwright
5. Page Object Model in Playwright

No comments:
Subscribe to: Comments (Atom)