Cypress + Vuetify checkbox not identified

Question

I am using Vuetify JS to create UI components in my VueJS app. Also I am using CypressJS as testing framework to test these UI components. 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 :)

Answer 1

I had a similar problem and I find a workaround :

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