如何在Cypress中验证展开列表完全未被遮挡

你之前的测试没检测出遮挡，核心问题在于：

• be.visible断言仅判断元素是否未被隐藏（如display:none、visibility:hidden）且有部分处于视口内，哪怕元素大部分被遮挡，只要露出一点就会通过。
• click()默认点击元素中心区域，只要中心没被遮挡就能触发点击，无法覆盖边缘被遮挡的场景。

下面是两种可靠的验证方案：

1. 校验元素的z-index层级最高 #

要让列表处于页面最上层，它的z-index必须比其他可能遮挡它的元素更高。可以直接断言列表的z-index值，或者和特定元素对比：

// 方式1：断言列表z-index大于合理阈值（根据页面样式调整数值）
cy.get('#list')
  .invoke('css', 'z-index')
  .then(zIndex => {
    expect(Number(zIndex)).to.be.greaterThan(1000);
  });

// 方式2：和页面中可能遮挡的元素对比z-index
cy.get('#list').invoke('css', 'z-index').then(listZ => {
  cy.get('.header, .fixed-sidebar') // 替换成你页面中可能遮挡的元素选择器
    .invoke('css', 'z-index')
    .then(otherZ => {
      expect(Number(listZ)).to.be.greaterThan(Number(otherZ));
    });
});

2. 检查元素关键点位的顶层归属 #

通过校验元素的四角、中心、四边中点等关键坐标，确认这些位置的最上层元素是列表本身或其子元素，以此验证整个列表无遮挡：

cy.get('#list').then($list => {
  const listElement = $list[0];
  const rect = listElement.getBoundingClientRect();
  
  // 定义需要校验的关键点位
  const checkPoints = [
    {x: rect.left, y: rect.top},
    {x: rect.right, y: rect.top},
    {x: rect.left, y: rect.bottom},
    {x: rect.right, y: rect.bottom},
    {x: rect.left + rect.width/2, y: rect.top + rect.height/2},
    {x: rect.left + rect.width/2, y: rect.top},
    {x: rect.left + rect.width/2, y: rect.bottom},
    {x: rect.left, y: rect.top + rect.height/2},
    {x: rect.right, y: rect.top + rect.height/2}
  ];

  checkPoints.forEach(point => {
    const topElement = document.elementFromPoint(point.x, point.y);
    // 校验当前点位的最上层元素是否属于列表
    expect(listElement.contains(topElement)).to.be.true;
  });
});

如果需要更极致的检查，还可以按固定像素间隔遍历元素的整个区域，但上述关键点位已经能覆盖绝大多数遮挡场景。

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