[Question] How to identify several elements with the same locator and click on each of them?

I have a list of checkboxes and I need to click on all of them. Depending on some factors, the list count can differ, but the locator will be the same for all checkboxes ('input[aria-label="Select All"]').

How do I iterate over them so I can click each one?

[yury-s]

Please use locators instead of element handles as the latter are more error prone. Assuming that the set of check-boxes stays static while you are checking individual items, you can implement it like this:

  // Locator will resolve to all elements matching the selector
  const checkboxes = page.locator('input[aria-label="Select All"]');
  const promises = [];
  // Get current number of elements in the page a click each of them concurrently
  for (let index = 0; index < await (checkboxes.count()); index++)
    promises.push(checkboxes.nth(index).click());
  // Wait for all clicks to finish
  await Promise.all(promises);

If the state of the page may change after clicking you may consider locator.evaluateAll to run some code on all elements in the page.

[DanielStoica85]

@yury-s Should such an example be added to the documentation? I could not find it and I think this is a pretty common use case.

For some strange reason, this doesn’t work for me. Using that locator doesn’t actually find those checkboxes, even though I know for sure that the locator is correct. But if, for example, I do something like const checkbox = page.locator('input[aria-label="Select All"]').first();, it does find it. Very very strange.