Cypress：如何滚动下拉菜单来查找项目 [英] Cypress: How to scroll a dropdown to find item

问题描述

我需要单击下拉列表并滚动以按文本查找项目。

目前我知道该项目在列表的底部，所以我可以这样做：

cy.get('.ng-dropdown-panel-items').scrollTo("bottom").contains(/test/i).click()

此操作有效，但如果项目移动并且不再位于底部，则此操作将中断。

我尝试了scroll IntoView，但没有成功：

cy.get('.ng-dropdown-panel-items').contains(/test/i).scrollIntoView().click()

和

cy.get('.ng-dropdown-panel-items').scrollIntoView().contains(/test/i).click()

有人知道我怎么做吗？

更新：选项列表是动态生成的(并非所有选项最初都在DOM中)，因此需要滚动到底部才能获得所有选项。一旦所有选项都可用，.contains()即可用于查找元素。

推荐答案

虚拟模式下的角度ng-SELECT处理起来相当棘手。

它的列表是虚拟的，这意味着它一次只有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 

})

请注意，递归可能会占用大量内存，此代码可以稍作优化。

这篇关于Cypress：如何滚动下拉菜单来查找项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！