按钮被透明元素覆盖时Cypress误判通过测试，如何检测元素遮挡？

方案一：使用真实点击模拟命令 #

Cypress默认的click()是直接触发DOM元素的点击事件，不会考虑元素是否被其他层级元素遮挡。改用realClick()（由cypress-real-events插件提供）可以模拟真实用户的点击行为，会识别元素的视觉层级，若按钮被覆盖则测试会失败。

步骤：

1. 安装插件：

npm install cypress-real-events --save-dev

2. 在Cypress支持文件中导入（比如cypress/support/e2e.js）：

import 'cypress-real-events/support'

3. 修改测试代码：

cy.get('.btn-main').realClick();

方案二：自定义断言检查元素遮挡 #

通过获取按钮的位置坐标，检查该区域最顶层的元素是否为按钮本身，以此验证按钮未被遮挡。

测试代码示例：

cy.get('.btn-main').then($btn => {
  const btn = $btn[0];
  const rect = btn.getBoundingClientRect();
  // 取按钮中心位置作为检测点
  const centerX = rect.left + rect.width / 2;
  const centerY = rect.top + rect.height / 2;
  
  // 获取该坐标点最上层的DOM元素
  const topElement = document.elementFromPoint(centerX, centerY);
  
  // 断言顶层元素是按钮本身或其子元素（确保点击能触发目标按钮）
  expect(btn.contains(topElement)).to.be.true;
});

为什么默认断言不生效？ #

• cy.get('.btn-main').should('be.visible') 仅验证元素是否满足可见条件（比如display不为none、visibility不为hidden、opacity大于0且元素在视口内），但不检查是否被其他元素覆盖。
• 默认click()是直接触发元素的click事件，跳过了真实点击的视觉层级判断，所以即使被覆盖也能“成功点击”。

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