Why the heck isn't there an equivalent to Playwright's locator?

[anthonyma94]

I'm trying to use play functions for testing, but the lack of ability to search by css selector is very frustrating. In Playwright, I can do something like page.locator("label[data-attribute='test']"), and it would find the component without issue. Without this, there's no way to do serious testing. It's 2025, play functions are built on Playwright, there's no reason that this feature is omitted.

[shilman]

Storybook uses Testing Library DOM because it's executable in every browser, not just Playwright's special browser. You can read about why TL doesn't support CSS queries here.

https://testing-library.com/docs/dom-testing-library/intro/

We are considering adding the locator API though. Request noted!

[igrlk]

You can query elements using css selectors in Storybook by using querySelector/querySelectorAll like so:

play: async ({ canvasElement }) => {
	const body = canvasElement.ownerDocument.body;
	const input = body.querySelector('input[data-attribute="test"]')
	await userEvent.click(input);
}

Although, as people mentioned above, relying on CSS selectors is fragile. Testing library has a great read on Query Priorities explaining it in more details.
tldr: write tests the same way users would interact with the UI, e.g. aria-role=name is better than .name-input-classname-SIQIj4