Cypress使用.eq()选中列表项时仍校验其他项该如何解决？

错误根因 #

核心问题是对 Cypress 元素查询命令的作用范围理解有误：

• cy.get() 命令默认从整个DOM根节点开始查询元素，不会继承之前操作选中的元素上下文，所以你在.eq(1)选中第二个<ion-item>后调用的cy.get()依然是全局匹配元素，自然找到了第一个列表项的对应按钮文本，导致断言失败。
• 你的原代码中属性选择器未闭合右中括号（例如[data-cy=photo-add-button缺少结尾的]），也可能存在匹配异常的隐患。

修正方案 #

要在已选中的元素范围内查询子元素，需要使用.find()命令替代.get()，修正后的测试代码如下：

it('Ensures when Mangelzustand does contains photos, the "Hinzufügen" Button Text does not exist', () => {
    cy.get("ion-item")
      .eq(1)
      // 在当前选中的第二个ion-item子元素范围内查找
      .find("[data-cy=photo-add-button-text]")
      .should("not.contain", "Hinzufügen");
});

如果需要更严谨的校验，也可以直接断言该元素在第二个列表项中不存在：

cy.get("ion-item").eq(1).find("[data-cy=photo-add-button-text]").should("not.exist");

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