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

Question

柏树说：

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

我也在其他地方见过

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

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

使用类星体，我无法使用'check（）'，因为类星体渲染的不是复选框，而是使用'click（）'，它会选中该框。

响应：

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

Answer 1

很明显，类星体没有使用'checked'属性来指示其复选框是选中还是未选中。

但是访问Quasar.dev (Vue Checkbox)可以看到他们改用了“ q-checkbox__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）中的开发人员工具，然后导航至检查器标签：

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

接下来，与元素进行交互，您可以在代码中实时查看其变化。

祝你好运。

Answer 2

@Kuranes给出的答案太笼统了，尽管可行，但它选择了太多元素，这就是为什么在示例中使用eq（0）的原因。

我的问题是基于使用data-cy属性选择要测试的元素的，这是赛普拉斯的最佳实践！

但是，我非常感谢@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')

我对解决方案仍然不完全满意，因为类星体的人们可能会一时兴起地改变他们的解决方案，而使我不得不进行一些破烂的测试，以使实际上仍然可以使用。