有没有办法在 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();
}

Answer 4

这对我有用（我的例子）：

// reset state and remove all existing bookmarks
const bookmarkedItems = await page.locator('.bookmark img[src="/static/img/like_orange.png"]');
const bookmarkedItemsCounter = await bookmarkedItems.count();
if (bookmarkedItemsCounter) {
  for (let i = 0; i < bookmarkedItemsCounter; i++) {
    await bookmarkedItems.nth(i).click();
  }
}
await page.waitForTimeout(1000);

如果尝试解决您的任务应该是：

test('click by each li element in the list', async ({ page }) => {
  await page.goto(some_url);
  const liItems = await page.locator('ul > li');
  const liItemCounter = await liItems.count();
  if (liItemCounter) {
    for (let i = 0; i < liItemCounter; i++) {
      await liItems.nth(i).click();
    }
  }
  await page.waitForTimeout(1000);
});

Answer 5

您可以使用

$$eval

和纯客户端 JavaScript 来实现这一点。

const results = await page.$$eval(`ul > li`, (allListItems) => {
    allListItems.forEach(singleListItem => singleListItem.click()) 
});

请注意，您在回调中编写的内容将在浏览器上执行。所以如果你想输出什么，就需要返回它。这样它就会最终出现在

results

变量中。