Search code examples
javascriptcypressbrowser-automation

Cypress clicking element in drop down menu?


I'm currently trying to run a cypress test but unable to get this specific element.

Here is what I've tried but I'm running into this error. I thought this was an issue with my timeout. I've fixed my timeout but I'm still getting this error. My code is unable to find this. I'm trying to get to Dogs from the select menu but I'm unable to get cypress to locate that element.

Error:Timed out retrying after 4000ms: Expected to find element: ant-select-dropdown-menu-item-selected, but never found it.

cy.get('.ant-select-dropdown-menu-item-selected').click();
<div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: none; user-select: none;">Select Org</div><div class="ant-select-selection-selected-value" title="Dogs" style="display: block; opacity: 1;">Dogs</div><div class="ant-select-search ant-select-search--inline" style="display: none;"><div class="ant-select-search__field__wrap"><input autocomplete="off" class="ant-select-search__field" value=""><span class="ant-select-search__field__mirror">&nbsp;</span></div></div></div>

Solution

  • You don't have a class .ant-select-dropdown-menu-item-selected in the HTML. Instead you could use class .ant-select-selection-selected-value, like this

    cy.contains('.ant-select-selection-selected-value', 'Dog')
      .click()
    

    Using .contains() is better than cy.get() because usually there is more than one item to select, and you should therefore select based on the text "Dog" to get the exact item.