Is there a way to iterate over a <li> list in Playwright and click over each element?

Question

I'm trying to iterate over a list of dynamic elements with Playwright, I've tried a couple of things already, but none have been working:

await this.page.locator('li').click();
const elements = await this.page.locator('ul > li');
await elements.click()

await this.page.$$('ul > li').click();

await this.page.click('ul > li');

const divCounts = await elements.evaluateAll(async (divs) => await divs.click());

this.page.click('ul > li > i.red', { strict: false, clickCount: 1 },)

const elements = await this.page.$$('ul > li > i.red')

elements.forEach(async value => {
  console.log(value)
  await this.page.click('ul > li > i.red', { strict: false, clickCount: 1 },)
  await value.click();
})

Answer 1

Since https://playwright.dev/docs/api/class-locator#locator-element-handles doesn't have a good example on how to use .elementHandles().

Another way to solve this issue is as follows

const checkboxLocator = page.locator('tbody tr input[type="checkbox"]');
for (const el of await checkboxLocator.elementHandles()) {
  await el.check();
}

Answer 2

I managed to do it with the following code:

test('user can click multiple li', async ({ page }) => {
  const items = page.locator('ul > li');
  for (let i = 0; i < await items.count(); i++) {
    await items.nth(i).click();
  }
})