如何在cypress中实现ant下拉选择

Posted 2023-02-18

【中文标题】如何在cypress中实现ant下拉选择

【英文标题】：How to implement the ant dropdown select in cypress

【发布时间】：2022-01-23 08:25:24

【问题描述】：

我有一个使用 ant design (React JS) 开发的应用程序，我开始为该应用程序集成 cypress e2e 测试。 但是，当涉及到下拉菜单时，我无法让它工作，包括多选下拉菜单。 这是代码。

cy.getBySelector('.settings-tab .ant-tabs-tab-active > div').invoke('text').then((text) => 
    if( text === 'Teams')
      cy.getBySelector('.btn-Team').click()
      cy.getBySelector('.model-Team .ant-input').type('Cypress Tests');
      cy.get('[name=googleGroupIds]').click();
      cy.get('[name=googleGroupIds]').parent().find('.rc-select-selection-search-input').type('Amazon').click();
    
  )

直到下拉菜单打开，但后续步骤不起作用。应用任何帮助和建议。

【问题讨论】：

请为您的下拉菜单添加 html

【参考方案1】：

我不知道这是否是问题所在，但 .click() 的效果不会立即发生（取决于您单击的元素类型）。

我会进行某种等待，以确保您要与之交互的元素已正确呈现和加载。

试试是否有助于放入 cy.wait(1000);

【参考方案2】：

我自己解决了这个问题，我把它贴在这里，希望它可以帮助一些使用 ant design dropdowns 和 cypress 的人。

Cypress.Commands.add( 'multiSelect', ( selector , text) => 
  cy.get(`.ant-select$selector > .ant-select-selector > .ant-select-selection-overflow`).click();
  cy.get(`.ant-select$selector .ant-select-selection-search input`).clear()
  cy.get(`.ant-select$selector .ant-select-selection-search input`).invoke('attr', 'id').then((selElm) => 
    const dropDownSelector = `#$selElm_list`;
    cy.get(`.ant-select$selector .ant-select-selection-search input`).type(`$text`);
    cy.get(dropDownSelector).next().find('.ant-select-item-option-content').click()
  )
)

您可以将上面的代码添加到commands.js然后使用这样的代码

cy.multiSelect( selector , option );

这里我的下拉菜单支持搜索，所以我使用搜索来过滤选项。