如何使用 Cypress select 具有动态 ID 的特定复选框

Question

我正在尝试 select 一个复选框，但没有一个标识符可以让我 select 一个特定的复选框。

HTML:

请注意，这是页面上三个复选框中的第二个。 ID会根据我的流量变化，所以我不能用ID来抓取这个。虽然它目前显示为 4，但到我的测试到达时可能会高得多。

这是我用来在当前页面上查找所有复选框的方法：cy.get('.mat-checkbox-input')

但是，我无法将 .eq() 用于 select 第二个选项，因为它会抛出一个错误，指出元素已从 DOM.

中分离出来

有什么好的方法可以获取复选框列表或一般的 selector，然后遍历它们以仅使用我想要的那个？在这种情况下，我知道复选框始终是第二个复选框。

除了 ID 之外，这张图片中的所有内容都与其他两个复选框相同。我想这就是 Angular 的工作方式。当然，如前所述，ID 会随着页面加载而变化，或者与事物交互，因此无法分辨数字是什么。

所有标签代码也相同：

编辑 2：我决定尝试 {force:true}，它起作用了。我删除了我之前的编辑，因为它是导致新问题的另一个元素。如果我添加 (force:true)，第一个响应有效。感谢您的帮助，我希望这可以帮助其他有类似问题的人。我会将第一个回复标记为正确答案。

cy.get('input[type="checkbox"]')
          .each(($elem, index) => {
            if(index === 1) {
                cy.wrap($elem).click({force:true});
            }
        });

Answer 1

您可以使用函数 each 遍历元素：

cy.get('input[type="checkbox"]')
  .each(($elem, index) => {
    if (index === 1) {
      cy.wrap($elem).click();
    }
  })

查看关于“每个”的文档here

如何使用 Cypress select 具有动态 ID 的特定复选框

How to select a specific checkbox with dynamic id's with Cypress

checkbox

dynamic

selector

angular

cypress