Tutorials123: Show Visible Elements in Playwright

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 the user.

An element may exist in the DOM (Document Object Model) but still not be visible. For example:

It may be hidden using CSS (display:none, visibility:hidden, or opacity:0).
It may be outside the current viewport (scrolled out of view).
It may be overlapped by another element.
It may not yet be rendered because of delayed loading or dynamic conditions.

Why Visibility Matters in Playwright?

Playwright ensures realistic testing: it doesn’t just check if an element exists in the DOM, but also if it is visible for interaction.
Actions like click, fill, or type only work on visible elements (to simulate real user behavior).
This helps avoid false positives in test automation, where a script might interact with hidden elements that a real user cannot.

When you want to show or check visible elements in Playwright, the goal is to filter or interact only with the elements that are currently visible on the page. Here’s how it works in theory:

Locating Elements

You start by locating elements using selectors (like buttons, links, rows, etc.)
This might return multiple elements (some visible, some hidden).

Filtering Visible Ones

Playwright allows filtering the located elements so only the visible ones are considered.
This ensures your script only interacts with those elements that a real user can see.

Extracting Visible Elements

Once filtered, you can fetch the text, attributes, or other properties of the visible elements.
For example, if you have a menu with hidden dropdown options, Playwright can extract only the items that are currently shown.

Using Visibility for Assertions

You can verify if a particular element is visible at a given time (for example, a success message should be visible after form submission).
This ensures UI behavior matches expected user experience.

Debugging / Displaying Visible Elements

Sometimes testers print or log the list of visible elements (like all visible links or buttons).
This helps confirm that the UI is rendering the expected items.

To show all visible elements on a web page using Playwright Java, you can:

Use a general selector like "*" to target all elements.

Filter them using elementHandle.isVisibleAsync().

Here’s how you can do it with Playwright Java, using

https://example.com for demonstration:

Java Code: Show All Visible Elements on a Webpage

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 a sample website
            page.navigate("https://example.com");

            // Get all elements on the page using the universal selector '*'
            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()) {
                    System.out.println("Tag: " + element.evaluate("el => el.tagName") +
                            ", Text: " + element.innerText().trim());
                }
            }

            browser.close();
        }
    }
}

Code explanation:

(a) Navigate to website by page.vavigate()

(b) Get all elements on the page by using page.locator("*")

(d) Iterate all web elements by using for loop and display on console.

Please Note:

page.locator("*"): Selects all elements.
element.isVisible(): Filters only visible elements.
element.evaluate("el => el.tagName"): Fetches tag name using JavaScript.
element.innerText(): Gets the visible text content of the element.

How to Show Visible Elements in Playwright

Code explanation: