在 Cypress 中选择 Kendo ComboBox答案

【问题标题】：Select Kendo ComboBox in Cypress在 Cypress 中选择 Kendo ComboBox
【发布时间】：2018-11-21 14:39:33
【问题描述】：

我在从赛普拉斯的组合框中选择值时遇到问题。它总是这样写道：

CypressError: cy.select() can only be called on a <select>. Your subject is a: <span unselectable="on" class="k-select" aria-label="select" role="button" tabindex="-1" aria-controls="fabric_listbox">...</span>
Types text into numeric inputs

我的代码如下所示：

describe('KendoUI', () => {

  it('types text into numeric inputs', () => {

    cy.visit('https://demos.telerik.com/kendo-ui/combobox/index');

    cy.get(':nth-child(4) > .k-dropdown-wrap > .k-select').select('Polyester')
  })
})

你能给我一些帮助吗？你可以在这个页面上试试：https://demos.telerik.com/kendo-ui/combobox/index

谢谢。

【问题讨论】：

标签： testing kendo-ui automation cypress

【解决方案1】：

cy.select() 仅适用于原生 HTML <select> 元素。在您的情况下，您应该在要选择的元素上简单地cy.click()。这是所有模仿选择行为的自定义插件的方式。

【讨论】：

好的，但是如何在 Playground 中找到我想要选择的值？在我点击后它只显示获取功能。

【解决方案2】：

我解决了。

在元素上设置cy.click()
找到带有cy.contains() 文本框的内容，然后单击它 (cy.contains('text').click)

【讨论】：

【解决方案3】：

cy.get('kendo-popup').contains('Foobar').click({force:true})

您可能需要强制单击，因为该元素可能不可见

【讨论】：

【解决方案4】：

cy.get('combobox').contains('value').click()

【讨论】：

【解决方案5】：

我发现赛普拉斯将视口滚动到所选选项会导致下拉菜单关闭。该命令告诉赛普拉斯等待下拉菜单变为非禁用状态，滚动到下拉菜单，单击下拉菜单，等待下拉菜单完成动画，然后单击该项目而无需进一步滚动。

使用 Kendo UI v2016.1.226 测试

commands.js中的声明：

Cypress.Commands.add('selectKendoDropdownItem', (dropdownName, item) => {
    cy.get(`span[aria-disabled="false"][aria-owns="${dropdownName}_listbox"]`)
        .click()
        .get(`div#${dropdownName}-list li.k-item`)
        .contains(item)
        .click({ waitForAnimations: true, scrollBehavior: false, force: true });
});

在规范中使用： cy.selectKendoDropdownItem('dropdownElementId', 'Text of option to select');

【讨论】：