Cypress - 复选框未选中

Question

这是 DOM 中的复选框元素：

这是定位器：

cy.get(':nth-child(4) > :nth-child(1) > .form-group > div.col-sm-4 > :nth-child(2) > .checkbox-label > input').check({force:true})

cypress 发现了该元素，并认为交互成功：

Cypress 检查成功

控制台检查

但是，此交互实际上并未检查该框。

我已经尝试了检查/单击和设置 {force:true} 的所有组合，但没有任何效果。

我还尝试了各种替代定位器策略，虽然总是成功找到该元素，但该复选框没有被选中。

其他人也有过这样的经历吗？这是我第一次无法成功操作复选框，这让我发疯。

所有想法均表示赞赏。

Answer 1

例如，查看 devtools 中元素上的事件监听器

并尝试为每个添加一个

.trigger()

cy.get('.checkbox-label > input')
  .check()
  .trigger('change')

Answer 2

根据具体情况，如果您要执行的第一个操作是点击事件，您可以考虑在测试顶部添加 cy.wait(1000)。

我正在努力解决同样的问题，出于绝望，我添加了 cy.wait()。测试通过了。我意识到 Cypress 的移动速度比页面加载速度快，导致点击失败。

最后，我使用 cy.intercept() 捕获所需的网络请求，并将其添加到 beforeEach 中测试文件的顶部。

beforeEach(() => {
  cy.login(Cypress.env("email"), Cypress.env("password"));
  cy.intercept("/network-request/the/test/depends-on").as(
    "networkRequest",
  );
  cy.visit("/url");
  cy.wait("@networkRequest");
});

希望这对某人有帮助！