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.