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