[Feature]: Add option to filter Locators by visibility

[rob4629]

🚀 Feature Request

TestCafe has an option to filter elements by their visibility, either using .filterVisible or using with (their version of filter) visibilityCheck.

It would be great to have something similar with Playwright, to help keep tests stable

Example

const myVisibleButton = page.getByRole('button', { name: 'My Button' }).filterVisible();

Can be used to target hidden elements too, by specifying visible: false for the filter method:

const myHiddenButton = page.getByRole('button', { name: 'My Button' }).filter({ visible: false });
await expect(myHiddenButton).toBeHidden();

Motivation

We have some elements which are named the same (e.g. submit button), and it will make the tests more readable than using .nth(x)... especially since we have a lot of variations of the same page, and x could change depending on the variation

[dgozman]

@rob4629 Take a look at this documentation page.

[mxschmitt]

Closing as per above.