Question 10853 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Finding the right element using the drop down menu – Jquery

I have an interesting drop down menu. I"m trying to use cypress to select an item. I’ve seen videos and tutorials online on where people are using select as an option. The problem is that my html only has li as an option. I want to be able to select dogs without any issues. I"ve tried the select option and I’m currently doing cy.get command to get the dog but I’m unable to get it.

Here is my div:

<div class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft  ant-select-dropdown-hidden" style="width: 200px; left: 433px; top: 113px;">
  <div id="203aa95a-9c54-4b91-b3bb-48501f9d51e2" style="overflow: auto; transform: translateZ(0px);">
    <ul role="listbox" class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-selected" aria-selected="true" style="user-select: none;">Dogs</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Cats (Kitten)</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Owls</li>
      <li role="option" unselectable="on" class="ant-select-dropdown-menu-item" aria-selected="false" style="user-select: none;">Cows</li>
    </ul>
  </div>
</div>

Here is the code I’ve written:

 cy.get('li').select('Dogs)', li ).click()
Tags:

2

Answers


  1. 0

    You can directly use contains with selector and the innertext.

    cy.contains('li[role="option"]', 'Dogs').click()
    Login or Signup to reply.
  2. 0

    There is unselectable="on" on every option.

    Presume that does what it says in the antd framework, you would have to remove it before you could select anything.

    cy.contains('li[role="option"]', 'Dogs')
  .then($dogs => {
    $dogs[0].removeAttribute('unselectable')
  })
  .should('not.have.attr', 'unselectable')

cy.contains('li[role="option"]', 'Dogs')
  .click()

    Note, it’s not really a valid test if the user is unable to select the item.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search