WebDriverIO中使用execute移除并追加子元素报错如何解决

你踩了WebDriver协议的元素引用机制坑：

• 所有从浏览器执行上下文通过browser.execute返回到Node.js测试脚本侧的DOM元素，本质是WebDriver生成的元素引用ID，不是浏览器JS内存里的原生DOM对象引用，这个ID的有效性完全绑定元素在当前DOM树的挂载状态。
• 一旦元素被从DOM树中移除，之前拿到的对应元素引用ID会立刻被标记为失效（stale），后续你再把这个失效ID当参数传给browser.execute，WebDriver在DOM树里找不到对应挂载的节点，就会直接抛出stale引用错误。
• 你误以为跨browser.execute调用传递的是JS上下文里留存的DOM对象，实际上每次browser.execute都是独立的跨进程调用，参数会经过WebDriver的序列化、反序列化流程，根本不是浏览器内存里的同一个对象。

方案1：DOM操作全放在同一个execute调用里（最推荐，无额外副作用） #

把移除、追加的逻辑全部放在同一次浏览器执行上下文中运行，全程不把DOM元素引用传回Node侧，从根源上避免触发stale校验：

const selector = '#unique-id';
await browser.execute((targetSelector) => {
  // 所有DOM查询、操作全程在浏览器侧完成，不跨execute传元素引用
  const child = document.querySelector(targetSelector).parentElement.parentElement;
  const parent = child.parentElement;
  // 移除目标子元素
  const removedNode = parent.removeChild(child);
  // 此处可插入元素移除阶段需要执行的其他浏览器侧逻辑
  // 重新将子元素追加回父元素
  parent.appendChild(removedNode);
}, selector);

方案2：需要分步骤操作时使用浏览器全局临时变量存引用 #

如果你确实需要在元素移除后、追加回DOM前，在Node.js测试侧执行其他断言/操作，可以在移除元素时把节点存在浏览器的全局临时变量上，追加时直接从全局变量取，不要跨execute传失效的元素引用：

const selector = '#unique-id';
// 第一步：移除元素，将节点和父元素存在浏览器全局临时变量
await browser.execute((targetSelector) => {
  const child = document.querySelector(targetSelector).parentElement.parentElement;
  const parent = child.parentElement;
  window.__wdioTempRemovedChild = parent.removeChild(child);
  window.__wdioTempParent = parent;
}, selector);

// 此处可编写元素脱离DOM状态下的测试逻辑、断言

// 第二步：从全局临时变量取节点完成追加，清理临时变量
await browser.execute(() => {
  window.__wdioTempParent.appendChild(window.__wdioTempRemovedChild);
  // 清理全局变量避免污染页面执行环境
  delete window.__wdioTempRemovedChild;
  delete window.__wdioTempParent;
});

你写的复现代码里四次browser.execute是完全独立的跨进程调用，stale报错触发链路非常明确：

1. 第一次execute查询child元素，此时child挂载在DOM上，返回的引用ID有效
2. 第二次execute传入child的有效引用查询parent，此时两个元素都在DOM上，返回的parent引用ID有效
3. 第三次execute传入parent、child的有效引用执行removeChild，child被从DOM树摘除，返回值对应的节点已经脱离DOM，转成WebDriver引用ID时直接是stale状态
4. 第四次execute传入已经失效的parent、child引用ID执行appendChild，WebDriver层校验到引用对应的节点不在当前DOM树中，直接抛出stale element错误

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