Cypress + Vuetify 复选框未识别答案

【问题标题】：Cypress + Vuetify checkbox not identifiedCypress + Vuetify 复选框未识别
【发布时间】：2018-12-19 13:47:46
【问题描述】：

我正在使用 Vuetify JS 在我的 VueJS 应用程序中创建 UI 组件。我也使用 CypressJS 作为测试框架来测试这些 UI 组件。我希望测试的功能之一是对这些复选框进行简单的 check 操作。

根据 cypress 文档，我给这些复选框一个 data-cy 属性，例如

<v-checkbox data-cy="app-checkbox>".

但是，在 cypress 测试中，当我使用选择器引用此元素时，例如

cy.get('[data-cy="app-checkbox"]').check({force: true});

柏树正在抛出并且错误为

CypressError: cy.check() can only be called on :checkbox and :radio. Your subject contains a: <div class="v-input v-input--selection-controls v-input--checkbox v-input--is-label-active v-input--is-dirty" data-cy="app-layer-checkbox">...</div>

附言我认为这个问题类似于this 和this 问题，但即使使用jQuery 选择器我也无法对这个元素执行检查。

任何有关如何解决此问题的建议肯定会有所帮助。

谢谢:)

【问题讨论】：

从您所展示的内容中可以清楚地看出，运行时的 Dom 包含一个 div 而不是 <input type="checkbox">。如果cy.check() 只设置checked 属性并忽略元素类型，那就太好了，但您可以使用.invoke('attr', 'checked', true) 代替它。您应该在 devtools 中检查 DOM 以查看哪个元素具有选中的属性（选中您的框并查看 devtools 中的更改）。这是您的 cy.get() 中要定位的元素。

标签： javascript checkbox vue.js vuetify.js cypress

【解决方案1】：

我遇到了类似的问题，我找到了解决方法：

cy.get('input[data-cy=app-checkbox]')
  .parent()
  .click();

【讨论】：

这不是表示复选框实际上是 cypress 的按钮而不是复选框吗？仍然是一个不错的解决方法，所以它并不重要。