Requirement : Click on the drop down and the drop down should open.
DOM:
<span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" data-select2-id="3522" style="width: 208.328px;" xpath="1">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-_ID-container" aria-owns="select2_ID-results" aria-activedescendant="select2_ID-result-pwlg-2">
<span class="select2-selection__rendered" id="select2_ID-container" role="textbox" aria-readonly="true" title="Choose Inco Term">Choose Inco Term</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
The element is located on the UI:
But when I use the same id on the code as below:
cy.get('#select2_ID-container').click({force:true})
Then I get the following error:
Timed out retrying: Expected to find element: #select2_ID-container, but never found it.
I also tried {force: true}:
cy.get('#select2_ID-container').click({force:true})
There is a different id shown above, perhaps you want
cy.get('[id="select2_ID-container"]').click()
Perhaps you are looking for role="combobox", since this is likely to be the dropdown.
cy.get('span[role="combobox"]').click({force:true})
#select2_ID-container is the selector for the first option in the dropdown list which is Choose Inco Term. You can use this to open the drop down.
cy.get('[aria-owns="select2_ID-results"]').click()
OR
cy.get('[aria-activedescendant="select2_ID-result-pwlg-2"]').click()
Or, You can also use the text to find and click.
cy.contains('Choose Customer').click()