Protractor迭代WebDriver元素时遭遇stale element reference错误

这个问题我之前也踩过坑！核心原因很简单：你一开始把所有元素存在els数组里，但当你删除第一个非索引0的元素后，页面DOM结构发生了变化——原来数组里剩下的元素引用已经和当前页面的文档脱节了，自然就会抛出stale element reference错误。

为什么你的for of循环行不通？ #

当你执行const els = await this.el.getElements(...)时，拿到的是当时页面元素的快照引用，一旦其中某个元素被删除（DOM更新），数组里剩下的元素就变成了“无效链接”，后续循环访问它们时，WebDriver就会报错说元素不在页面文档里了。

正确的解决思路：每次操作前重新获取元素 #

既然DOM会动态变化，那我们就不能依赖一开始的快照，而是每次循环都重新获取当前页面的最新元素列表，只保留第一个，删除剩下的。这里有两种靠谱的实现方式：

方式1：for循环结合重新获取元素

先获取初始元素总数，然后循环执行删除操作，每次都拉取最新的元素集合：

// 获取初始需要处理的元素总数
const initialCount = (await this.el.getElements(this.s.tm.button.remove)).length;

// 只删除索引>=1的元素，所以循环initialCount-1次
for (let i = 1; i < initialCount; i++) {
  // 每次都重新获取最新的元素列表，避免stale引用
  const currentElements = await this.el.getElements(this.s.tm.button.remove);
  
  // 确保还有至少2个元素（要保留第一个）
  if (currentElements.length > 1) {
    // 执行删除操作（这里假设是点击删除按钮，根据你的实际逻辑调整）
    await this.h.clickElement(currentElements[1]);
    
    // 用显式等待代替固定sleep，等待DOM更新完成（更可靠）
    await driver.wait(async () => {
      const newCount = (await this.el.getElements(this.s.tm.button.remove)).length;
      return newCount === currentElements.length - 1;
    }, 5000);
  }
}

方式2：while循环持续检查元素数量

只要页面上的元素数量大于1，就删除第二个元素，直到只剩第一个：

let currentElements = await this.el.getElements(this.s.tm.button.remove);

// 只要元素数量>1，就继续删除
while (currentElements.length > 1) {
  // 删除第二个元素（索引1）
  await this.h.clickElement(currentElements[1]);
  
  // 等待元素重新加载完成，再获取最新列表
  await driver.wait(until.elementsLocated(this.s.tm.button.remove), 5000);
  currentElements = await this.el.getElements(this.s.tm.button.remove);
}

关键注意点 #

1. 别依赖初始元素数组：DOM变化后，旧的元素引用必然失效，必须重新获取。
2. 优先用显式等待：不要用固定的sleep，而是等待元素数量变化或状态改变，适配不同页面的加载速度。
3. 删除顺序的选择：这里选择删除索引1的元素，因为每次删完后，后面的元素会自动往前移，下一次重新获取后，新的索引1就是原来的索引2，刚好符合删除除第一个之外所有元素的需求。

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