如何使用Playwright截取整页截图用于视觉对比测试？

当然可以用Playwright实现整页截图用于视觉回归测试，只需要给toHaveScreenshot方法添加fullPage配置参数即可。

修改后的代码示例 #

import { test, expect } from '@playwright/test';

test('full page visual regression test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  // 启用fullPage参数捕获整页内容
  await expect(page).toHaveScreenshot({ fullPage: true });
});

参数说明 #

• fullPage: true：让Playwright自动滚动页面，捕获从页面顶部到底部的全部内容，而非仅当前视口范围。

额外优化建议 #

如果页面存在动态变化的元素（比如广告、实时更新的内容），可以通过mask参数遮挡这些元素，避免干扰视觉对比结果：

await expect(page).toHaveScreenshot({
  fullPage: true,
  // 遮挡指定元素，这里以动态广告为例
  mask: [page.locator('.dynamic-ad')]
});

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