Playwright跳转回原页面报Element is not attached to the DOM如何解决

报错根本原因 #

你提前获取的tbody子元素列表，在跳转页面再返回原页面后，原页面的整个DOM树已经被重新渲染，你之前存储的元素引用指向的是已经被销毁的旧DOM节点，自然会抛出未挂载到DOM的错误。

低改造成本解决方案 #

方案1：调整元素获取逻辑（改动最小，几乎不用修改原有业务流程） #

不要在遍历一开始就一次性把所有要遍历的选项元素全查出来存成固定数组，改成每次循环都从最新DOM中查询对应元素即可：

// 原有错误写法示例
const items = await page.locator('tbody tr').all();
for (let i = 0; i < items.length; i++) {
  await items[i].click();
  // 跳转操作、返回原页面逻辑
  await page.goBack();
}

// 修正后写法
const itemCount = await page.locator('tbody tr').count();
for (let i = 0; i < itemCount; i++) {
  // 每次都从当前DOM中获取第i个元素，引用永远是最新的
  const currentItem = page.locator('tbody tr').nth(i);
  await currentItem.click();
  // 原有跳转、采集数据、返回逻辑完全不用改
  await page.goBack();
  // 可选补充：等待列表渲染完成再进入下一次循环，避免偶现渲染未完成报错
  await page.locator('tbody tr').first().waitFor({state: 'attached'});
}

方案2：补充元素等待校验 #

如果不想调整遍历逻辑，可以在每次返回原页面操作元素前，增加挂载状态校验：

// 操作元素前先等待元素处于挂载状态，Playwright会自动重试直到超时
await targetElement.waitFor({state: 'attached', timeout: 3000});
await targetElement.click();

方案3：针对多级选项场景的优化 #

你当前是五级下拉选项依次遍历，也可以完全不依赖索引定位，直接通过文本属性定位目标选项，比如选择Indice-Échelon下的选项时，直接用page.getByRole('option', {name: '目标选项名称'})定位，完全不受页面刷新、DOM重建的影响。

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