Cypress:如何滚动下拉菜单来查找项目
我需要单击下拉列表并滚动以按文本查找项目。
目前，我知道该项目在列表的底部，所以我可以这样做：
cy.get('.ng-dropdown-panel-items').scrollTo("bottom").contains(/test/i).click()
这是有效的，但如果项目移动，不再在底部，这将打破。
我尝试过scrollIntoView，但没有成功：
cy.get('.ng-dropdown-panel-items').contains(/test/i).scrollIntoView().click()
和
cy.get('.ng-dropdown-panel-items').scrollIntoView().contains(/test/i).click()
有人知道我怎么做吗？
更新:选项列表是动态生成的(并非所有选项最初都在DOM中)，因此需要滚动到底部才能获得所有选项。一旦所有选项都可用，就可以使用.contains()来查找元素。
回答 4
Stack Overflow用户
发布于 2021-05-19 11:46:37
虚拟模式中的Angular ng-select处理起来相当棘手。
它的list是虚拟的，这意味着它一次只有DOM中的一些项，所以您不能选择它们并遍历它们。
您可以递归地扫描选项列表并使用.type({downarrow})将新选项移动到DOM中(这是用户与之交互的一种方式)。
it('selects an option in a virtual-scroll ng-select', () => {
cy.visit('https://ng-select.github.io/ng-select#/virtual-scroll')
cy.get('ng-select').click(); // open the dropdown panel
cy.get('.ng-option')
.should('have.length.gt', 1); // wait for the option list to populate
function searchForOption(searchFor, level = 0) {
if (level > 100) { // max options to scan
throw 'Exceeded recursion level' // only useful for 100's
} // not 1000's of options
return cy.get('ng-select input')
.then($input => {
const activeOptionId = $input.attr('aria-activedescendant') // highlighted option
const text = Cypress.$(`#${activeOptionId}`).text() // get it's text
if (!text.includes(searchFor)) { // not the one?
cy.wrap($input).type('{downarrow}') // move the list
return searchForOption(searchFor, level + 1) // try the next
}
return cy.wrap(Cypress.$(`#${activeOptionId}`))
})
}
searchForOption('ad et natus qui').click(); // select the matching option
cy.get('.ng-value')
.should('contain', 'ad et natus qui'); // confirm the value
})请注意，递归可能会占用大量内存，并且可以对此代码进行一些优化。
Stack Overflow用户
发布于 2021-05-18 09:54:51
在大多数情况下，您需要cy.get().select，例如：
cy.get('.ng-dropdown-panel-items').select(/test/i)
Stack Overflow用户
发布于 2021-05-18 13:23:58
您可以使用each()遍历下拉元素，当您找到所需的文本时，创建一个click()。
cy.get('span.ng-option-label.ng-star-inserted').each(($ele) => {
if($ele.text() == 'desired text') {
cy.wrap($ele).click({force: true})
}
})https://stackoverflow.com/questions/67583714
复制
腾讯云开发者
