The drop down element is not locating-CodePudding

Requirement : Click on the drop down and the drop down should open.

DOM:

<span  dir="ltr" data-select2-id="3522" style="width: 208.328px;" xpath="1">
<span >
<span  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  id="select2_ID-container" role="textbox" aria-readonly="true" title="Choose Inco Term">Choose Inco Term</span>
<span  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-Shipment_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-Shipment_ID-container').click({force:true})

CodePudding user response：

There is a different id shown above, perhaps you want

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

CodePudding user response：

Perhaps you are looking for role="combobox", since this is likely to be the dropdown.

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

CodePudding user response：

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

CodePudding user response：

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