带有剑道下拉菜单的 Cypress 测试

Question

我第一次与 Cypress 合作以自动化一些测试，对此我很满意，但现在我被困在一些简单的事情上。

我们正在使用 kendo 来呈现一个下拉列表（在 HTML 中它是一个标准的选择，带有 kendo-drop-down-list 属性）。

在呈现的页面中，我可以看到带有可能值的选择项，但它被设置为不可见，因此 cypress 无法单击并选择它。

看起来每次我选择一个选项时，DOM 都会动态修改，以将下拉列表显示为一组动态创建的 span 元素。

这就是我在 Cypress 中所做的（其中sDir是选择元素的 id，而firstValue是下拉列表的第一个选项）

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

哪个是与 Cypress 的剑道下拉交互的正确方法？

谢谢

Answer 1

看到了一些与此相关的其他帖子，但我使用以下方法与剑道下拉菜单进行交互：

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

您可能必须使用click({force: true})