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

Posted 2023-02-18

【中文标题】有没有办法遍历 Playwright 中的 <li> 列表并单击每个元素？

【英文标题】：Is there a way to iterate over a <li> list in Playwright and click over each element?

【发布时间】：2022-01-05 08:07:24

【问题描述】：

我正在尝试使用 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();
)

【参考方案1】：

最近在 Playwright 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();

【讨论】：

这将立即将它们全部关闭，看来剧作家没有公开我们可以遍历的集合

@user1529413 除了一次性解雇他们，你还想要什么？每次点击（）后是否应该等待其他东西？关于 foreach 的集合，可以使用locator.elementHandles()，但通常 elementHandles 不如定位器那么容易。您应该在尽可能短的范围内使用它们，因为它们对应于浏览器 DOM 中的对象，这些对象可能会随意消失（取决于前端代码的工作方式）。定位器更安全，因为它们经过重新评估并自动等待。

感谢locator.elementHandles & for await ( 似乎适合我的情况。

@refactorreric 要回答您的问题，列表中的每个项目都可能会更新整个页面。 LI 列表就像要执行的操作队列，在执行单个操作后，整个页面状态都会更新。在网页测试中，我认为我们不应该假设有一种万能的