5

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 :)

Suraj
  • 451
  • 1
  • 9
  • 17
  • It is clear from what you show that the Dom at runtime contains a div and not an ``. 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()`. –  Jul 12 '18 at 07:35

1 Answers1

7

I had a similar problem and I find a workaround :

cy.get('input[data-cy=app-checkbox]')
  .parent()
  .click();
Vincent Bisserié
  • 86
  • 1
  • 3
  • 1
    Wouldn't this indicate that the checkbox was in fact a button according to cypress and not a checkbox? Still a decent workaround so it doesn't matter much. – MrSmiley Oct 18 '19 at 13:09