How to implement the ant dropdown select in cypress

Question

I have an application developed using ant design ( React JS ), and I started integrating the cypress e2e test for the application. However, I could not get it to work when it comes to dropdowns, including multi-select dropdowns. Here is the code.

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

It comes until the dropdown is opens , but next steps are not working. Appricate any helps and suggestions.

Answer 1

I was able to solve the issue by myself, I am posting it here and hope it would help some on who is using ant design dropdowns and 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()
  })
})

You can add the above code to commands.js then use the code like this

cy.multiSelect( selector , option );

Here my dropdown supports the search so, I have used the search to filter the option.

Answer 2

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

And invoke via...

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

Answer 3

I don't know if this is the issue, but the effect of .click() does not happen at once (depending on what type of element you click).

I'd put in some kind of wait that ensures that the element you want to interact with has been rendered and loaded properly.

Try if it helps to put in a cy.wait(1000);