有没有办法迭代 Playwright 中的 <li> 列表并单击每个元素？

Question

我正在尝试使用 Playwright 迭代动态元素列表，我已经尝试了一些方法，但没有一个有效：

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

由于https://playwright.dev/docs/api/class-locator#locator-element-handles没有关于如何使用.elementHandles().

解决这个问题的另一种方法如下

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

Answer 2

我设法用以下代码来做到这一点：

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();
  }
})

Answer 3

最近，剧作家 Slack 社区上也有人提出了类似的问题。这是复制粘贴的，并根据其中一位维护者的答案进行了最低限度的调整。

let listItems = this.page.locator('ul > li');

// In case the li elements don't appear all together, you have to wait before the loop below. What element to wait for depends on your situation.
await listItems.nth(9).waitFor(); 

for (let i = 0; i < listItems.count(); i++) {
  await listItems.nth(i).click();
}