如何在 cypress 中实现蚂蚁下拉 select

Question

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

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();
    }
  })

在打开下拉菜单之前出现，但后续步骤不起作用。应用任何帮助和建议。

Answer 1

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

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

尝试输入 cy.wait(1000);

是否有帮助

Answer 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 );

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

Answer 3

function selectDropdown(testId: string, optionText: string) {
  // open select
  getById(testId).click();

  return cy
    .get('.ant-select-dropdown :not(.ant-select-dropdown-hidden)')
    .find('.ant-select-item-option')
    .each(el => {
      if (el.text() === optionText) {
        cy.wrap(el).click();
      }
    });
}

并通过...调用...

cy.selectDropdown('select-test-id', 'Some Option Text');

如何在 cypress 中实现蚂蚁下拉 select

How to implement the ant dropdown select in cypress

reactjs

antd

cypress