下拉元素未定位

Question

要求：点击下拉菜单，下拉菜单应打开。

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>

该元素位于 UI 上：
但是当我在下面的代码中使用相同的 id 时：

cy.get('#select2_ID-container').click({force:true})

然后我收到以下错误：

Timed out retrying: Expected to find element: #select2_ID-container, but never found it.

我也试过{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是下拉列表中第一个选项的选择器，即Choose Inco Term 。 您可以使用它来打开下拉菜单。

cy.get('[aria-owns="select2_ID-results"]').click()
OR
cy.get('[aria-activedescendant="select2_ID-result-pwlg-2"]').click()

或者，您也可以使用文本查找并单击。

cy.contains('Choose Customer').click()

Answer 4

jQuery select2 有一个可见的文本框，可以点击它来显示选项。

如果您在使用 ID 时遇到问题，这就是我将如何进行测试

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

有时 cypress 需要鼠标移动。 也试试这个：

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

还要通过检查命令日志确保元素存在/未超时： https ://docs.cypress.io/api/commands/click#Command-Log

Answer 6

最后我找到了解决方案。 我尝试了上述所有解决方案，但都不适合我。 这是由于版本问题。 我简单地将 Cypress 更新到了最新版本 10.0.1 并运行了测试，它工作正常。 此外，由于页面未正确加载，因此未找到下拉列表。 单击操作是在页面完全加载之前对自动化执行的。 所以我在单击下拉列表之前添加了 cy.wait(10000) 。 我认为版本不是主要问题。 主要问题是页面加载。 谢谢大家的时间。 :)