下拉元素未定位

Question

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

Answer 1

上面显示了一个不同的 id，也许你想要

cy.get('[id="select2_ID-container"]').click()

Answer 2

也许您正在寻找role="combobox" ，因为这很可能是下拉菜单。

cy.get('span[role="combobox"]').click({force:true})

Answer 3

#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()

Answer 4

The jQuery select2 has a visible textbox which can be clicked to show the options.

If you're having trouble with the ID, this is how I would approach the test

cy.get('.select2 [title="Choose Inco Term"]')
  .as('select2')                              // alias the textbox
  .click()                                    // open the options list

// Options now open
cy.contains('li.select2-results__option', 'TextOfOption').click()  // choose an option

// Verify
cy.get('@select2')
  .find('li.select2-selection__choice')     // choice is listed under textbox
  .should('contain', 'TextOfOption')        // check the text

// Remove
cy.get('@select2')
  .find('.select2-selection__choice__remove')  // remove button
  .click()

cy.get('@select2')
  .should('not.contain', 'TextOfOption')       // check text has gone

Answer 5

Sometimes cypress requires a mouse move. Try this too:

cy.get('[id="select2_ID-container"]').trigger('mousemove').click()

Also make sure the element is present / not timedout by checking the command logs : https://docs.cypress.io/api/commands/click#Command-Log

Answer 6

Finally I found a solution to this. I tried all of the above solutions, but neither worked for me. This was due to the version issue. I simple updated the Cypress to the latest version 10.0.1 and ran the test and it worked. Also the dropdown is not located because the page was not loaded properly. The click action was performed on the automation before the page loads completely. So I added cy.wait(10000) before clicking the dropdown. I think the version is not the main problem. The main problem is the page load. Thank you all for your time. :)