时间戳

首页 > 解决方案 > 你如何让赛普拉斯选择列表中的某个图标？

javascript - 你如何让赛普拉斯选择列表中的某个图标？

问题描述

我对赛普拉斯很陌生，并且在图书馆方面一直很幸运。但是发现自己陷入了这种特定情况。

我被困在选择包含特定文本的特定 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>

目标是单击包含“删除这个”的“.MuiListItem-root”上的“删除”按钮。该列表是动态的，因此我无法使用该项目的位置。

**行之有效的 Hacky 解决方案 - 必须有更好的方法**

    // 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()
        }
      })
    })

我更具体一点，然后找到显示“删除这个”的元素的索引。一旦我知道索引，然后我抓住按钮并单击该特定索引的“删除”。

标签： javascriptjqueryreactjscypress

解决方案

有几种方法可以做到这一点。正如你的描述所说，去.MuiListItemText-root寻找它的兄弟姐妹，

cy.contains('.MuiListItemText-root', 'Delete This One')  // get the div with the text
  .siblings()                                            // get sibling elements
  .eq(0)                                                 // take the first (and only)
  .find('button')                                        // find button within
  .click()

但.contains()也可以在后代中找到文本，因此您可以直接定位 MuiListItem 并节省一些步骤

cy.contains('.MuiListItem-root', 'Delete This One')      // get grandparent of text 
  .find('button')                                        // find button within
  .click()

推荐阅读