Select Kendo 赛普拉斯中的组合框

Question

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

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() 在你想要 select 的元素上。这是所有模仿 select 行为的自定义插件的方式。

Answer 2

我解决了。

在元素上制作cy.click()
找到带有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 等待下拉菜单变为 non-disabled，滚动到下拉菜单，单击下拉菜单，等待下拉菜单完成动画，然后单击项目而不进一步滚动。

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

Select Kendo 赛普拉斯中的组合框

Select Kendo ComboBox in Cypress

testing

automation

kendo-ui

cypress