Cypress click操作随机失效：如何提升测试稳定性？

我们正将Selenium测试迁移至Cypress，初期效果不错，但后续测试稳定性极差，频繁出现随机失败。排查后发现最常见的问题是click()操作失效（比如点击删除图标时），导致测试直接执行下一步，最终在断言元素是否已删除时失败。

我们已经尝试过cy.get().click({force: true})、cy.get().trigger('click')，也在click前后添加了cy.wait，但测试仍有大约50%的概率失败，这类问题在多个点击场景中都存在。

示例测试代码 #

cy.contains("div", "item1").should("exist").and("be.visible");
cy.get('[data-test-id="UnassignItem_1"]')
    .should("exist")
    .should("be.visible")
    .click({ force: true });
cy.contains("div", "item1").should("not.exist");

对应的HTML结构 #

<div>
    <table>
        <tbody>
            <tr>            
                <td class="d-flex align-items-center justify-content-between">
                    <div class="item-container " data-test-id="item1">item1</div>
                    <i class="icon-close-bold-sm unassign-item" data-test-id="UnassignItem_1"></i>
                </td>                       
            </tr>
        </tbody>
    </table>
</div>

可尝试的解决方案 #

• 确保元素完全可交互：除了断言be.visible，还要验证元素be.enabled且not.be.disabled，部分元素可能可见但未绑定事件或处于禁用状态：

  cy.get('[data-test-id="UnassignItem_1"]')
    .should("exist")
    .should("be.visible")
    .should("be.enabled")
    .click();
  

• 指定点击位置：默认点击元素中心，若图标过小或有隐形元素覆盖，可指定点击坐标，比如左上角：

  cy.get('[data-test-id="UnassignItem_1"]').click('topLeft');
  

• 等待事件绑定/请求完成：如果元素是动态渲染的，可能DOM已加载但事件还未挂载，或是删除操作依赖接口返回，可通过cy.intercept等待相关请求完成：

  cy.intercept('DELETE', '/api/items/1').as('deleteItem');
  cy.get('[data-test-id="UnassignItem_1"]').click();
  cy.wait('@deleteItem');
  

• 使用真实浏览器点击：Cypress默认的click()是模拟事件，安装cypress-real-events插件后用realClick()触发真实点击：

  cy.get('[data-test-id="UnassignItem_1"]').realClick();
  

• 等待动画/过渡结束：若元素有加载动画或过渡效果，Cypress可能在动画过程中点击失效，可等待动画相关属性完成：

  cy.get('[data-test-id="UnassignItem_1"]')
    .should("exist")
    .should("be.visible")
    .should('have.css', 'opacity', '1') // 等待透明度过渡完成
    .click();
  

• 避免滥用force: true：强制点击会跳过Cypress的可交互性检查，可能导致实际点击无效，优先排查元素不可交互的根本原因。
• 自定义重试点击命令：针对不稳定的点击，添加重试逻辑：

  Cypress.Commands.add('retryClick', { prevSubject: 'element' }, (subject, options = {}) => {
    const maxRetries = options.maxRetries || 3;
    let retryCount = 0;
  
    const attemptClick = () => {
      cy.wrap(subject)
        .click(options)
        .catch((err) => {
          if (retryCount < maxRetries) {
            retryCount++;
            cy.wait(500);
            return attemptClick();
          }
          throw err;
        });
    };
  
    return attemptClick();
  });
  
  // 使用方式
  cy.get('[data-test-id="UnassignItem_1"]').retryClick();
  

内容的提问来源于stack exchange，提问作者maryam ghani