playwright-testing-library
playwright-testing-library copied to clipboard
✨ Separate fixtures for locator-based queries
Alright, here's my take on an API that returns Locator
instead of ElementHandle
. It builds off of the following prior art, thanks to @sebinsua, @petetnt, and (once again) @Zache:
- https://github.com/testing-library/playwright-testing-library/pull/330
- https://gist.github.com/sebinsua/205682c7af6966fdadc103b4e15d0d8b
- https://gist.github.com/sebinsua/205682c7af6966fdadc103b4e15d0d8b?permalink_comment_id=4005229#gistcomment-4005229
There's still some stuff to figure out here:
- [x] Scoped queries (implementing
within()
and ensuring that is at least as powerful as selector combinators>>
) - [ ] Handling waiting for elements (an alternative to the
findBy*
queries as they don't really work as part of the selector engine which expects synchronous selection as far as I can tell) - [ ] Configuration via the
configure()
API
The general idea is that, while exposing a selector engine directly is powerful, I'd like to adhere to the Testing Library API as much as possible as well as continue to delegate element selection to Testing Library queries. I do think we need to be careful here as Playwright Locator
s have their own way of enforcing single/multiple element selection and I'd like to keep any interaction as idiomatic as possible from the perspective of a Testing Library user.
Let me know what y'all think so far and whether this would be useful going in this direction. It seems like you probably have your own interim solutions like the linked Gist or potentially something built off of the experimental role
support Playwright is adding.
Thanks for the review @sebinsua! — I'll follow up with some changes and finish up within
etc. when I get a chance.
@sebinsua made some changes per your feedback, let me know what you think


I'm not sure it's worth trying to take this any further now that things are more readable. It's pretty convenient to be able to serialize args
via JSON.stringify
JSON.parse
.
For anyone looking to test drive this while I sort the last two bits up there, see this comment: https://github.com/testing-library/playwright-testing-library/issues/430#issuecomment-1144201901
This is in beta now, I'll finish the findBy*
stuff in a separate PR.