使用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' class 代替。所以你可以检查一下。这是一个测试，您可以运行针对提到的网站来确认它是否有效：

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 的人可能会随心所欲地改变他们的解决方案，让我对一些实际上仍在工作的东西进行失败的测试。

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

Test quasar q-checkbox is checked using cypress

cypress

quasar-framework