在Cypress测试中处理Angular CDK Overlay的CI/CD运行问题

针对你遇到的本地测试通过但CI/CD（Docker）环境失败的问题，结合DOM结构和错误提示，以下是几个可行的解决方向：

1. 精确选择显示中的遮罩层 #

从你提供的DOM结构来看，目标遮罩层带有cdk-overlay-backdrop-showing类，说明这是当前激活的遮罩。直接用这个类过滤，避免选中隐藏的残留元素：

cy.get(".cdk-overlay-backdrop.cdk-overlay-backdrop-showing").click();

这样只会匹配处于显示状态的遮罩，从根源上避免多元素问题。

2. 强制选择单个元素并等待就绪 #

如果确实存在多个同class元素，可通过first()或eq(0)指定操作第一个元素，同时添加可见性断言确保元素已渲染完成（CI环境可能存在渲染延迟）：

cy.get(".cdk-overlay-backdrop")
  .should("be.visible")
  .first()
  .click();

3. 清理DOM中残留的隐藏遮罩层 #

Docker环境下可能存在弹窗关闭后遮罩层未被正确移除的情况，先清理不可见的残留元素再操作：

// 移除所有不可见的遮罩层
cy.get(".cdk-overlay-backdrop").each(($el) => {
  if (!$el.is(":visible")) {
    $el.remove();
  }
});
// 再点击可见的遮罩
cy.get(".cdk-overlay-backdrop:visible").click();

4. 排查CI环境的DOM状态差异 #

如果以上方法无效，建议在CI流程中添加调试步骤，确认运行时的实际DOM状态：

// 打印容器内的HTML结构
cy.get(".cdk-overlay-container").invoke("html").then(console.log);
// 截图保存当前页面状态
cy.screenshot("overlay-dom-state");

通过日志或截图对比本地与CI环境的DOM差异，定位是否存在渲染异常或元素残留问题。

关于{multiple:true}无效的说明 #

通常这个参数失效是因为部分元素处于不可见状态，Cypress默认不会对不可见元素执行点击操作，即便传入multiple:true，实际只会操作可见元素，但错误提示仍会统计所有匹配到的元素（包括不可见的）。因此优先过滤可见元素才是解决核心。

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