CODEWITHSUNDEEP
javascriptjquery-select2cypress
Petr Volny
Petr Volny

Reputation: 160

Cypress and select2 jquery plugin

How to use cypress with select2 I Have some problem while using Select2 Jquery Plugin and cypress My html

<div class="form__polozka-hodnota"><select name="client_type" data-cy="typ_klienta" data-dep="" class="form-control"
    id="frm-vehicleInsurance-form-client_type" required
    data-nette-rules='[{"op":":filled","msg":"Vyberte: Typ klienta"}]'>
    <option value="">---</option>
    <option value="1">Fyzická osoba</option>
    <option value="2">Právnická osoba</option>
</select></div>

Cypress:

cy.get('[data-cy=typ_klienta]').select('Fyzická osoba').should('have.value', '1')

CypressError: Timed out retrying: cy.select() failed because this element:

...

is being covered by another element:

...

Fix this problem, or use {force: true} to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with

Output console:

$('[data-cy="typ_klienta"]')

Object { 0: select#frm-vehicleInsurance-form-client_type.form-control.select2-hidden-accessible, length: 1, prevObject: {…} }

Upvotes: 2

Views: 1424

Answers (2)

Jascha
Jascha

Reputation: 111

Meanwhile there is a very good and detailed blogpost about cypress and select2, see https://www.cypress.io/blog/2020/03/20/working-with-select-elements-and-select2-widgets-in-cypress/

In my project I can now simply use "force:true" to select a value in my select2

cy.get('[data-cy=typ_klienta]').select('Fyzická osoba', {force: true})

Upvotes: 3

gleb bahmutov
gleb bahmutov

Reputation: 1919

I have started a recipe, for now showing how to select a single value (your use case), see https://github.com/cypress-io/cypress-example-recipes/pull/439

Upvotes: 1

Related Questions