search

testing-library / playwright-testing-library

🔍 Find elements in Playwright with queries from Testing Library
MIT License
248 stars 9 forks source link

What if `locator.waitFor({ state: 'attached' })` but `options.hidden === false` in Testing Library? #506

Open sebinsua opened 2 years ago

sebinsua commented 2 years ago

One thing that I've noticed is the possibility of disagreement between the visibility checking of Playwright and Testing Library.

For example, what if internally we are executing locator.waitFor({ state: 'attached' }) but are also querying using options.hidden === false with Testing Library. The latter programmatically ensures that elements are not picked up due to "host language semantics specifying that the element is not displayed, such as CSS display: none, visibility: hidden, or the HTML hidden attribute".

I don't know a fix for this unless we automatically force options.hidden === true in these cases and haven't thought through the consequences of doing this.

jrolfs commented 2 years ago

This had occurred to me when I was implementing the find* queries, but I guess I kind of assumed that since hidden in Testing Library terms is more directly related to the accessibility tree, these concepts were sufficiently separated. However, as you pointed out, there is definitely an overlap between them.

I'll add some test cases for this soon to help get a feel for how big that overlap is and how confusing these things are when used together. Hopefully, that will give us a more clear path forward including the implications of this potential breaking change:

I don't know a fix for this unless we automatically force options.hidden === true in these cases and haven't thought through the consequences of doing this.

I was thinking that because of things like aria-hidden that the best we may be able to do is print an explicit warning when these options are combined in certain ways or when queries fail because of said combination. Bleh, idk, this is a tricky one. Thanks for raising this!