使用Cypress点击表格内单个图标遇到问题求助

我没法点击下图表格里的单个图标，试了下面这段代码但没用：

cy.get('table >tbody >tr td:nth-child(1) fa-icon:nth-child(1)').click({multiple: true})

界面展示：

检查DOM：

DOM文本：

<div _ngcontent-ixx-c110 stickything class="d-block grid is-sticky" style="z-index: 1; top: 0px; width: auto; left: auto; position: sticky;">
  <div _ngcontent-ixx-c110 class="d-flex ng-star-inserted"> 
    <table _ngcontent-ixx-c110 class="table table-sm table-bordered">
      <thead _ngcontent-ixx-c110 class="bg-color text-center text-black">...</thead>
      <tbody _ngcontent-ixx-c110 class="text-center ng-star-inserted"> 

        <tr _ngcontent-ixx-c110 class="bg-addition ng-star-inserted">
          <td _ngcontent-ixx-c110 class="stickyContainertd ng-star-inserted" style="width: 20px; padding-top: 4px !important;">
            <fa-icon _ngcontent-ixx-c110 size="sm" class="ng-fa-icon ng-star-inserted" css="6">...</fa-icon>
            <!-- -->
            <!-- -->
            Performance insights
          </td>
        </tr>

        ...

      </tbody>
    </table>
  </div>
</div>

解决方法尝试 #

1. 优化选择器，避免依赖子节点顺序
   原选择器用nth-child(1)容易受DOM结构变动影响，换成类名+属性定位更稳定：

   cy.get('td.stickyContainertd fa-icon[size="sm"]').click({multiple: true})
   

2. 处理元素不可交互/遮挡问题
   页面的sticky容器可能遮挡图标，或者元素未完全渲染，试试强制点击+等待可见：

   cy.get('fa-icon.ng-fa-icon')
     .should('be.visible')
     .click({multiple: true, force: true})
   

3. 逐行精准点击
   如果需要对每行第一个图标单独操作，可以遍历表格行：

   cy.get('tbody tr.bg-addition').each(($row) => {
     cy.wrap($row).find('fa-icon').first().click({force: true})
   })
   

4. 排查Angular动态渲染影响
   因为页面用了Angular的ng-star-inserted动态生成元素，建议等待组件稳定后再操作：

   cy.get('fa-icon').should('exist').click({multiple: true})
   

内容的提问来源于stack exchange，提问作者Mirage Kamran