Javascript CypresError:cy.find（）失败，因为此元素已从DOM分离

有几个问题与这个错误，但我似乎得到了这个错误，而元素肯定存在

这是测试代码：

it.only('changes product attributes and sku', () => {
  cy.visit('/product/hoganrebel-r261-sneaker-6708K62AZC-grey/M0E20000000DX1Y');
  cy.get('[data-test=product-data]')
    .then(($product) => {
      cy.wrap($product)
        .find('[data-test=attribute-select-Size]')
        .select('6');
      cy.url().should('include', 'M0E20000000DX20');

      cy.wrap($product)
        .pause()//here I can see the element but when I step into find it fails
        .find('[data-test=attribute-select-Size]')
        .select('7');
      cy.url().should('include', 'M0E20000000DX22');
    });
});

我使用

npmci

安装依赖项，并使用

warn start

运行项目。 在另一个终端选项卡中，我使用

/node\u modules/cypress/bin/cypress open

启动测试，然后选择“运行所有规范”（仅运行

it.only

测试）。当它暂停时，我可以清楚地看到元素，但当打开devtools并在控制台中运行

document.querySelector（'[data test=“attribute select Size”]'）

时，它会显示null。然后我右键单击清晰可见的元素并选择inspect，它将显示该元素。然后返回控制台并运行

document.querySelector（'[data test=“attribute select Size”]'）

它再次为我提供了元素

在暂停之前添加一个

.wait（5000）

无法解决此问题，可以尝试等待xhr完成，但它在5秒后已经完成，因此不太可能是问题所在

---

这显然是一个bug，但我不确定如何解决这个问题。

分离的元素通常是由于框架使用以前使用的相同数据选择器（

[data test=product data]

）重新编写DOM的部分，但创建了元素的新实例

当您使用测试代码（如

）保留引用时（$product）=>{cy.wrap（$product）

，$product在重新写入后不再有效（我猜是由

引起的。请选择（'6'）

，但我没有深入查看您的应用程序代码进行验证）

简短的回答是重复

cy.get（'[data test=product data]'）

选择，没有理由获取该元素的特定引用

it（'更改产品属性和sku'，（）=>{
cy.visit（'/product/hoganrebel-r261-sneaker-6708K62AZC-GRY/M0E20000000DX1Y'）；
cy.get（“[data test=产品数据]”）
.find（“[data test=属性选择大小]”）
.select（'6'）；//是否在此处更改DOM？
cy.url（）应该（'include'，'M0E20000000DX20'）；
cy.get（'[data test=product data]'）//刷新DOM查询
.find（“[data test=属性选择大小]”）
.选择（'7'）；
cy.url（）应该（'include'，'M0E20000000DX22'）；
});