javascript - Cypress + Vuetify checkbox not identified - Stack Overflow

admin管理员组

文章数量:1391974

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

Share Improve this question Follow edited Jul 11, 2018 at 16:18 Suraj asked Jul 11, 2018 at 13:33 SurajSuraj 52111 gold badge99 silver badges1717 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

I had a similar problem and I find a workaround :

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

本文标签： javascriptCypressVuetify checkbox not identifiedStack Overflow