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

egdjgwm8  于 2023-02-22  发布在  React
关注(0)|答案(4)|浏览(244)

我有一个使用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();
    }
  })

它来,直到下拉菜单打开,但下一步不起作用。apprice任何帮助和建议。

zd287kbt

zd287kbt1#

我能够自己解决这个问题,我把它贴在这里,希望它能帮助一些谁是使用Ant Design下拉菜单和柏树。

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

在这里我的下拉菜单支持搜索,所以,我已经使用搜索过滤选项。

jdzmm42g

jdzmm42g2#

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');
yptwkmov

yptwkmov3#

我不知道这是否是问题所在,但.click()的效果不会立即发生(取决于您单击的元素类型)。
我会放置某种类型的等待,以确保您想要与之交互的元素已经被正确地呈现和加载。
尝试是否有助于放入cyc.wait(1000);

qlvxas9a

qlvxas9a4#

它帮助我只需点击下拉元素与力量:true来打开它,然后在下拉菜单中最后一个可见的选项值上使用 * cy. trigger和'mousedown'*-这样我正在寻找的选项就变得可用了,所以我再次点击它。对我来说,这似乎是我找到并尝试过的所有选项中最简单的解决方案。
比如:

Page.elements.propertyDropDownMenu()
    .click({force: true});
Page.elements.lastVisibleValueOptionInDropDownMenu()
    .trigger('mousedown');
Page.elements.optionIwasLookingForInDropDownMenu()
    .click({force: true});

相关问题