使用Playwright检测元素对用户可见性（含z-index遮挡场景）

我需要测试元素被其他元素遮挡的场景（比如通过z-index属性实现的遮挡）。Playwright的isVisible断言仅检测元素是否设置了visibility:"hidden"或display:"none"这类样式，但我需要验证用户是否能实际看到该元素。目前我想到的方法是点击特定点位并检查被点击的元素，但有没有现成的断言方法可以实现？

Playwright本身没有直接断言元素是否被视觉遮挡的内置方法，但可以通过以下几种实用方式实现需求：

1. 结合视口检测与层级判断 #

先确认元素在视口范围内（不在视口的话用户本来就看不到），再通过元素的堆叠层级判断是否被遮挡：

const targetElement = page.locator('#target');
// 先验证元素在视口内
await expect(targetElement).toBeInViewport();
// 检查是否被更高层级元素遮挡
const isOccluded = await targetElement.evaluate(el => {
  const rect = el.getBoundingClientRect();
  // 获取目标元素的z-index，默认0
  const targetZIndex = parseInt(window.getComputedStyle(el).zIndex) || 0;
  // 获取覆盖目标中心位置的所有元素
  const elementsUnderPoint = document.elementsFromPoint(rect.left + rect.width/2, rect.top + rect.height/2);
  // 排除自身，检查是否存在z-index更高的元素
  return elementsUnderPoint.some(elem => elem !== el && parseInt(window.getComputedStyle(elem).zIndex) > targetZIndex);
});
// 根据测试需求断言（比如toBe(true)表示预期被遮挡）
await expect(isOccluded).toBe(true);

2. 模拟点击验证实际触发元素 #

这就是你想到的思路，可通过更严谨的方式实现：

const targetElement = page.locator('#target');
const targetBox = await targetElement.boundingBox();
// 点击目标元素的中心位置
await page.click({
  x: targetBox.x + targetBox.width/2,
  y: targetBox.y + targetBox.height/2
});
// 检查实际接收点击的元素是否为目标元素
const clickedElementId = await page.evaluate(() => document.activeElement.id);
// 如果被遮挡，这里的id应该不等于目标元素id
await expect(clickedElementId).not.toBe('target');

3. 截图像素对比（复杂场景适用） #

如果需要精准的视觉验证，可通过截图对比目标区域的像素差异：

const fs = require('fs');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');

const targetElement = page.locator('#target');
// 截取当前目标元素的截图
const currentScreenshot = await targetElement.screenshot();
// 读取预先保存的未被遮挡的基准截图
const baselineScreenshot = fs.readFileSync('./baseline-target.png');

const currentImg = PNG.sync.read(currentScreenshot);
const baselineImg = PNG.sync.read(baselineScreenshot);
const diff = new Uint8Array(currentImg.width * currentImg.height * 4);

// 对比像素差异，阈值0.1表示允许微小差异
const mismatchCount = pixelmatch(
  currentImg.data,
  baselineImg.data,
  diff,
  currentImg.width,
  currentImg.height,
  { threshold: 0.1 }
);

// 差异像素数超过0则说明被遮挡
await expect(mismatchCount).toBeGreaterThan(0);

注：这种方式需要依赖pixelmatch和pngjs第三方库，适合对视觉准确性要求极高的场景。

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