Cypress迭代要点击的元素，不好的做法？

Question

在我的场景中，我单击一个下拉选项，它生成要单击的子元素。我想点击第一个元素/选项，这是我的方法，正在工作。

cy.get( 'ul[role="listbox"]' ).children().each(( $btn, index ) => {
      
      // clicks first option in dropdown
      if( index === 0 ) {
         cy.get( $btn ).click();
      }
          
    });

我这样做的原因是，当我尝试直接单击元素而不迭代子元素时，有时会得到错误“cy.click()‘failed，因为这个元素与DOM分离”。

但是，按照我现在实现的方式，错误不会发生。

下拉列表的HTML (在本例中有两个选项，可以是任意数量)：

<div role="listbox" class="hd"> 
    <ul role="listbox" tabindex="0" data-baseweb="menu" id="bui-3" aria-multiselectable="false" class="dc au b4 b3 b5 ba he hf ay az dd de df dg h8 cv dr hg">
        <li role="option" aria-disabled="false" aria-selected="false" id="bui-5" class="ae e2 ag ga au e5 hl e9 ao hi ei d7 b3 he hf hj hk dr">
            <div aria-selected="false" class="e9 ag">Dropdown Option 1 </div>
        </li>
        <li role="option" aria-disabled="false" aria-selected="false" id="bui-6" class="ae e2 ag ga au e5 hl e9 ao hi ei d7 b3 he hf hj hk dr">
            <div aria-selected="false" class="e9 ag">Dropdown Option 2 </div>
        </li>
    </ul>
</div>

Answer 1

您试过使用Cypress的.find()命令找到第一个.find()吗？我猜这是可行的，希望不会给你描述的错误信息。

cy.get( 'ul[role="listbox"]' )
  .find('li') // searches for all `li` underneath the yielded element
  .eq(0) // selects the item at the index
  .click();