CODEWITHSUNDEEP
reactjscypressantd
dazunE
dazunE

Reputation: 328

How to implement the ant dropdown select in cypress

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.

Upvotes: 4

Views: 5485

Answers (4)

Vanja Žunić
Vanja Žunić

Reputation: 1

It helped me to just click on dropdown element with force: true to open it, and then to use cy.trigger with 'mousedown' on the last visible option value in dropdown menu - with that the option I was looking for became available so I clicked on it again. For me this seemed like the easiest solution regarding all the options I found around and tried.

Something like:

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

Upvotes: 0

philthathril
philthathril

Reputation: 506

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

Upvotes: 4

dazunE
dazunE

Reputation: 328

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.

Upvotes: 4

Gustav Örtenberg
Gustav Örtenberg

Reputation: 1

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

Upvotes: 0

Related Questions