使用cypress选中测试类星体q复选框

柏树说：

cy.get('[data-cy="my-checkbox"]')
  .click()
  .should('be.checked')

我在其他地方也看到：

cy.get('[data-cy="my-checkbox"]')
  .click()
  .should('have.attr', 'checked')

尽管上面的测试实际上是'not.have.attr'，这可能是一个较弱的测试，因为这可能意味着任何事情！它在我的测试中不起作用

使用quasar我无法使用“check（）”，因为quasar渲染的内容不是复选框，但我使用“click（）”，它确实选中了复选框

答复如下：

CypressError: Timed out retrying: expected '<div.q-checkbox.cursor-pointer.no-outline.row.inline.no.wrap.items-center>' to have attribute 'checked'

CypressError:重试超时：应为“”检查属性'

很明显，quasar没有使用“checked”属性来指示其复选框是选中还是未选中

但是我可以看到他们使用了“q-checkbox\uuu-inner--active”类。所以你可以检查一下。 以下是您可以针对上述网站运行的测试，以确认此功能是否有效：

it('Unchecks and checks the first checkbox on the quasar demo website', function() {
    cy.visit('https://quasar.dev/vue-components/checkbox')
    cy.get('.q-checkbox').eq(0).click()
    cy.get('.q-checkbox__inner').eq(0).should('not.have.class', 'q-checkbox__inner--active')
    cy.get('.q-checkbox').eq(0).click()
    cy.get('.q-checkbox__inner').eq(0).should('have.class', 'q-checkbox__inner--active')
})

将来，当您不确定元素的行为方式或与元素交互时其属性如何更改时，请使用所选浏览器（F12）中的开发人员工具，并导航到inspector选项卡：

然后，您可以切换左上角的第一个按钮（鼠标指针），单击网页上的元素，检查器将跳转到代码中的该元素

接下来，与元素交互，您可以在代码中看到它是如何实时变化的

---

祝你好运。

由@Kuranes给出的答案太笼统了，虽然有效，但它选择了太多的元素，这就是为什么在他们的示例中使用了等式（0）

我的问题是基于使用数据cy属性选择要测试的元素，这是cypress的最佳实践

不过，我还是要感谢@Kuranes帮助我了解需要测试的内容

我的工作方案如下：

cy.get('[data-cy="my-checkbox"] .q-checkbox__inner')
  .should('be.visible')
  .and('not.have.class', 'q-checkbox__inner--active')
  .click()
  .should('have.class', 'q-checkbox__inner--active')

---

我仍然对这个解决方案不太满意，因为quasar的员工可能会一时兴起而改变他们的解决方案，这给我留下了一些坏的测试，这些测试可能仍然有效。

使用或不使用数据cy与您的问题完全无关，取决于个人选择和您实现HTML的方式。谢谢你的诚实