Playwright如何实现DOM中未找到指定元素时循环执行操作？

原代码失效原因 #

page.locator()返回的是Playwright的定位器对象，本身无论对应元素是否存在都是真值，直接对该对象取反的判断!page.locator('.list-empty')永远为假，循环自然不会执行。

正确实现方案 #

你需要调用定位器的状态检测方法来判断元素的实际存在/展示状态，以下是两种常用实现：

基础实现

// 只要.list-empty元素不可见，就持续执行操作
while (!(await page.locator('.list-empty').isVisible())) {
  await removeAllRoles();
  // 可选添加短延迟，避免频繁查询DOM消耗性能
  await page.waitForTimeout(100);
}

如果你的判断条件是「元素不存在于DOM树中」而非「元素存在但不可见」，可以把isVisible()替换为count()判断：

while ((await page.locator('.list-empty').count()) === 0) {
  await removeAllRoles();
  await page.waitForTimeout(100);
}

带超时保护的实现

为了避免页面异常导致元素永远不出现、进入死循环，建议添加超时逻辑：

const maxWaitTime = 30 * 1000; // 最长等待30秒
const startTime = Date.now();

while (!(await page.locator('.list-empty').isVisible())) {
  if (Date.now() - startTime > maxWaitTime) {
    throw new Error('等待.list-empty元素出现超时，已终止循环');
  }
  await removeAllRoles();
  await page.waitForTimeout(100);
}

优化建议 #

如果removeAllRoles()执行后页面会产生异步更新，建议在操作后添加对应状态的等待逻辑，替代固定时长的waitForTimeout，可以进一步提升代码稳定性。

内容的提问来源于stack exchange，提问作者Paul