microsoft / microsoft/playwright
[Feature]: all locators only select visible elements by default
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 96.3k
- Forks
- 6.5k
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 180
Description
### 🚀 Feature Request
Please add an option or other possibility to set all locators to ignore invisible elements by default. Currently this is not possible and people have to add `.locator('visible=true')` or newly introduced `.filter({ visible: true })` everywhere which is easy to forget and pollutes the tests.
Consider making it a default behavior in the future versions.
### Example
This would introduce a new option in the Playwright config `selectInvisibleElements: boolean` (or similar with better name) to allow locators select invisible elements by default or not as discussed in https://github.com/microsoft/playwright/issues/31840.
As stated in https://github.com/microsoft/playwright/issues/31840#issuecomment-2260158837 this may be trimodal option but when using it as option in the config I believe 2 options have more sense.
### Motivation
For testing a react-native-web applications this is really important because the routing works by hiding the pages and stack them one on another. Then selecting base things like navigation can lead to multiple elements found in all tests. Adding a global option to ignore invisible/hidden elements would be really a great help here so we don't have to add `.filter({ visible: true })` to every selector.
The package react-native-testing-library [changed the default behavior](https://callstack.github.io/react-native-testing-library/docs/migration/v12#1-all-queries-exclude-elements-hidden-from-accessibility-by-default) to exclude elements hidden from accessibility by default so maybe you can inspire or talk to them about this. It was a big help for our tests.
I understand this may be seen as a breaking change but I believe this is a good one. Considering people are currently probably testing with selectors catching on hidden elements they would actually catch bugs in their code after a break change. I can imagine someone not practicing TDD and not seeing red test in the first place writing a green test assuming everything is working when the actual user would not be able to do an action because of some hidden element. So it's more like fixing an important bug in the testing framework :) Also, for people whose tests are properly written nothing would break because they are already selecting visible elements.
In conclusion, this is only a breaking change for people with false-green tests and by updating they catch bugs in their app. Also, if that helps, it is possible without hard breaking change. With config flag and a warning, everyone can migrate smoothly, fix this issue with config and then migrate on next version with turned this by default.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the referenced issue 31840 and the current locator('visible=true') and filter({ visible: true }) behavior. Decide whether the configuration should be binary or trimodal, define how it affects all locators and how existing tests can opt out, then verify the behavior across the locator APIs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing-qa
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100