Select 柏树剑道 ComboBox

Question

我在从赛普拉斯的 combobox 中选择值时遇到问题。 它总是写给我：

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

谢谢你。

Answer 1

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

Answer 2

我解决了。

1. 在元素上制作cy.click()

2. 用cy.contains()文本找到框中的内容，然后单击它（ cy.contains('text').click ）

Answer 3

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

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

Answer 4

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

Answer 5

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

使用 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');