使用 cypress 检查测试类星体 q-checkbox

Question

柏树说：

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'

Answer 1

很明显，quasar 不使用 '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')

我仍然对解决方案并不完全满意，因为 quasar 的人可能会一时兴起改变他们的解决方案，让我对实际上可能仍在工作的东西进行错误的测试。