Javascript 如何让Cypress在列表中选择某个图标？

我对柏树很陌生，在图书馆一直很走运。 但我发现自己被困在这个特殊的情况下

在一个包含特定文本的特定div上选择一个按钮时，我被卡住了。 我需要根据兄弟div包含的内容单击一个按钮

我们的布局如下所示：

<div class="MuiList-root">
  <div class="MuiListItem-root">
    <div class="MuiListItemText-root">
      Whatever 1
    </div>
    <div class="MuiListItemIcon-root">
      <button type="button" onClick={()=>{...}}>Delete</button
    </div>
  </div>
  <div class="MuiListItem-root">
    <div class="MuiListItemText-root">
      Delete This One
    </div>
    <div class="MuiListItemIcon-root">
      <button type="button" onClick={()=>{...}}>Delete</button
    </div>
  </div>
  <div class="MuiListItem-root">
    <div class="MuiListItemText-root">
      Whatever 2
    </div>
    <div class="MuiListItemIcon-root">
      <button type="button" onClick={()=>{...}}>Delete</button
    </div>
  </div>
</div>

我得到了更具体的一点，然后找到了元素的索引，该索引的内容是“deleteteisone”。

---

一旦我知道了索引，我就抓起按钮，点击特定索引的“删除”按钮。

有几种方法可以做到这一点。如您的描述所示，转到

.MuiListItemText根目录

，找到它的同级

cy.contains（'.MuiListItemText root'，'Delete This'）//获取包含文本的div
.sibles（）//获取同级元素
.eq（0）//取第一个（也是唯一的）
.find（'button'）//在中查找按钮
。单击（）

但是

.contains（）

也会在子体中查找文本，因此您可以直接将MuiListItem作为目标并保存一些步骤

cy.contains（'.MuiListItem root'，'Delete This'）//获取文本的祖父母
.find（'button'）//在中查找按钮
。单击（）

天哪，我发现如果是蛇，它肯定会跳起来咬我！就这样！非常感谢。

    // Clicks the edit button - There has to be a better way of clicking the elements delete button.
    cy.get("[id='stuff'] .MuiTypography-displayBlock").then((elements)=>{
      Object.keys(elements).forEach((item,index)=>{
        let classificationIndex
        if(elements[item].textContent === `Delete This One`) {
          classificationIndex = index

          cy.get("[type='button']").eq(classificationIndex).click()
        }
      })
    })