I am using Vuetify JS to create UI ponents in my VueJS app. Also I am using CypressJS as testing framework to test these UI ponents. One of the functionality I wish to test is simple check actions on these checkboxs.

As per the cypress documentation I gave these checkboxes a data-cy attribute like

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

However, in the cypress test, when I refer this element with selector like

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

the cypress is throwing and error as

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>

p.s. I think this problem is similar to this and this problem, yet even using the jQuery selector I am not able to perform the check on this element.

Any suggestion on how to solve this will certainly help.

Thanks :)

I am using Vuetify JS to create UI ponents in my VueJS app. Also I am using CypressJS as testing framework to test these UI ponents. One of the functionality I wish to test is simple check actions on these checkboxs.

As per the cypress documentation I gave these checkboxes a data-cy attribute like

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

However, in the cypress test, when I refer this element with selector like

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

the cypress is throwing and error as

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>

p.s. I think this problem is similar to this and this problem, yet even using the jQuery selector I am not able to perform the check on this element.

Any suggestion on how to solve this will certainly help.

Thanks :)

• javascript
• checkbox
• vue.js
• vuetify.js
• cypress

• It is clear from what you show that the Dom at runtime contains a div and not an <input type="checkbox">. It would be nice if cy.check() just set the checked property and ignored the element type, but in lieu of that you can use .invoke('attr', 'checked', true). You should inspect the DOM in devtools to see which element has the checked attribute (check your box and see the changes flash in devtools). That is the element to target in your cy.get(). – user8745435 Commented Jul 12, 2018 at 7:35

1 Answer 1

I had a similar problem and I find a workaround :

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