[Feature] Nicer API to wait for multiple elements

When I want to get some content in a span in a <td> element, I have to do the below. I was just wondering if there is a nicer API for this, or if not, there should be?

It is quite common to want to get multiple elements like this, but only after the selector is visible (or even better possibly using the Auto-waiting functionality.

await page.waitForSelector('#users-table tr td span');
const text = await page.$$eval('#users-table tr td span', (spans) =>
  spans.map((span) => span.textContent)
);

[aslushnikov]

We find this used in about 30% of our test cases where we look for lists of things (tables, grids/flexbox items etc.).

@thernstig Let’s live for some more time and see. Hopefully more use-cases will emerge, and we might be able to come up with a good API!

[thernstig]

My reasoning is that the only way to get multiple elements is with page.$$ as of now. Now all the $ functions has no wait functionality, they just execute immediately. This means I anyway have to have a waitForSelector in this cases to wait for some kind of element to exist in the DOM (or to be visible).

I believe I was after a one-liner that combines them. But you are much more adapt at all things DOM. So maybe there is a better idea? Or it is possible the current way of doing this (like in my original post) is the best way and should not change?

I’ve just felt it looks a bit “ugly” and it could be nicer, but I am also not entirely sure. I am reasoning that the above must be common enough to do in tables, lists etc. of sorts.

Note that lately I’ve been doing this instead:

await page.waitForSelector('#users-table tr td span');
const spans = await page.$$eval('#users-table tr td span');
const text = spans.map((span) => span.textContent());