Playwright Selecting Visible Elements

Profile picture for user arilio666

What's a visible element?

Element is considered visible if it has a non-empty bounding box and doesn't have visibility:hidden style.

In playwright, we can select visible elements using two ways.

  1. :visible
  2. visible=
  • If the need for a selector is CSS, and you don't want to rely on chaining, then :visible pseudo-class is the thing for you.
  • If the need of selector is preferring combining selector engines input >> visible=true is the right thing for you.

Using any one of these selectors will only match visible inputs.

Let us use this button page.

Here's the DOM-level view. We can see that the button has visible.

const text = await page.locator("button:visible").textContent();
const textt = await page.locator("button >> visible = true").textContent();

This will also find the button visible and get text content.

await page.locator('button').click();

This will get the button in the first index and wait for it to become visible because its visibility is turned off and timeout while waiting.