Cypress tests with kendo dropdown

Question

I'm working for the first time with Cypress to automate some tests, and I'm pleased with that, but now I'm stuck on something simple.

We are using kendo to render a dropdown (in the HTML it is a standard select, with kendo-drop-down-list attribute).

In the rendered page, I can see the select item with the possible values, but it is set as not visible, so cypress cannot click and select on this.

It looks like that every time I select an option, the DOM is dynamically modified to show me the dropdown as a set of span elements, that are created on the fly.

This is what I'm doing in Cypress (where sDir is the id of the select element and firstValue is the first option of the dropdown list)

    cy.get('#sDir').select('firstValue')

Which is the right way to interact with a kendo drop down with Cypress?

Thanks

Could you please share the full html of the drop down please. — soccerway

Mihai Marinescu Mihai Marinescu · Accepted Answer · 2020-07-30T12:34:26

Saw some other posts related to this, but I'm using the following method to interact with kendo drop down:

cy.get('[data-container-for="YourItem"] > .k-widget > .k-dropdown-wrap > .k-select').click({force: true})
cy.get('.k-list-filter > .k-textbox').type('Value')
cy.get('k-list-scrooler').contains('Value').click()

You may have to use click({force: true})

Cypress tests with kendo dropdown

1 Answers