在Playwright中如何遍历<li>列表并逐个点击对应元素？

DevOps 小满

2026-9-24

错误原因

page.locator() 返回的是动态定位器而非静态元素数组，直接调用click()只会点击第一个匹配的元素
搭配forEach使用异步函数时，不会按顺序等待异步操作执行，会导致逻辑混乱
page.$$()获取的是静态元素快照，页面刷新或列表更新后会出现元素陈旧报错
evaluateAll内的代码运行在浏览器上下文，无法直接调用Playwright的Node层API，直接调用divs.click()不会生效

正确实现方案

方案1：动态定位遍历（推荐，适配动态加载/刷新的列表）

每次操作都实时查询元素状态，不会出现元素失效问题：

// 定义目标元素定位器
const targetLocator = this.page.locator('ul > li > i.red');
// 获取当前匹配的元素总数
const elementCount = await targetLocator.count();

// 使用for循环按顺序遍历操作
for (let index = 0; index < elementCount; index++) {
  // 点击第index个匹配元素
  await targetLocator.nth(index).click();
  // 如果点击后页面有加载逻辑，可按需添加等待
  // await this.page.waitForTimeout(300);
  // await this.page.waitForLoadState('networkidle');
}

如果点击操作会导致列表元素数量变化，可改用while循环实时获取数量：

const targetLocator = this.page.locator('ul > li > i.red');
let index = 0;
while (index < await targetLocator.count()) {
  await targetLocator.nth(index).click();
  index++;
}

方案2：静态元素遍历（仅适用于不会动态刷新的列表）

// 获取所有匹配的静态元素句柄
const elements = await this.page.$$('ul > li > i.red');
// 用for of循环保证异步操作按顺序执行
for (const element of elements) {
  await element.click();
}