Can we have chaining for the element selectors?

[tw-anoopjadhav]

For eg .

const buttonInsideContainer = screen.getByTestId('container').getByRole('button', { name : 'Test Button'})

This strategy helps avoid a lot of errors due to the selector resulting in multiple elements. I found this strategy being used in playwright. It pretty easy to uniquely select a specific element.

Lets take an example -

suppose we have a button deep inside a container. currently we have to first get the container like -

const container = screen.getByTestId('container');

and then use this container to uniquely select the button.

getByRole(container, 'button', {name : 'Test Button'});

Imagine how simple it will to be if we have chaining.

[eps1lon]

I would really like to have an API that allows better composition. Today, you can already do what you're asking for with within(screen.getByTestId('container')).getByRole('button', { name : 'Test Button'}). Maybe we need to document that better.

Chaining is not something I would go for since the queries return well-known and specified instances of DOM elements. To allow chaining, we'd have to add expando properties on them.

An alternative would be an array of queries e.g. get([ByTestId('container'), ByRole('button', { name: 'Test Button' })]). That scales better with the number of queries compared to within: within(within(screen.getByTestId('container')).getByRole('section', { name : 'main'})).getByRole('button') vs get([ByTestId('container'), ByRole('section', { name : 'main'}), ByRole('button')])

[hjonasson]

@tw-anoopjadhav as @eps1lon says within exists already. For my uses that has always been enough, I am not sure what you are working on?

If getByRole finds more than one element matching your criteria it will error and not return multiple elements 😉. In that case, you can either use getAllByRole or, as you suggest which I think is the best way, getByRole(container, 'button', {name: 'Test Button'});

[tw-anoopjadhav]

@eps1lon Thanks for your time. I think "within" is the way to go then. also I liked your idea of query array.

[tw-anoopjadhav]

@hjonasson I hope you understand that this is feature request I was trying to make. well, we can get things done by existing selectors but it will allow us to write tests even faster if we have chaining. please go and check playwright if you haven't tried it yet 😉. although its not used for unit testing but surely we can take ideas from other places.