赛普拉斯遍历要点击的元素，不好的做法？

Question

在我的场景中，我单击了一个下拉选项，它会生成要单击的子元素。我想点击第一个 element/option，这是我的有效方法。

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

我这样做的原因是，当我尝试直接单击元素而不遍历子元素时，我有时会收到错误消息“cy.click()` 失败，因为这元素与 DOM."

分离

但是按照我现在的实现方式，并没有出现这个错误。

HTML 用于下拉菜单（在本例中有 2 个选项，可以是任意数量）：

<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() 命令找到第一个 li？我想这会起作用 并且希望不会给您描述的错误消息。

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

赛普拉斯遍历要点击的元素，不好的做法？

Cypress iterating through elements to click on, bad practice?

testing

automated-tests

cypress