文章总结： 本文介绍利用Playwright与pixelmatch实现Web视觉回归测试。内容涵盖环境搭建、依赖安装及脚本编写，展示了通过页面截图与基线图进行像素级比对的核心逻辑。文章详细说明了首次生成基线、后续对比及生成差异图的流程，并演示了通过调整threshold阈值解决像素噪点导致误报的方法，为自动化UI测试提供了可落地的实战方案。 综合评分： 90 文章分类： 安全开发,安全工具,实战经验,应用安全,WEB安全
; const baselinePath = path.join(BASELINE_DIR, `${testName}.png`); const diffPath = path.join(DIFF_DIR, `${testName}.png`); await page.screenshot({ path: actualPath, fullPage: true }); // 首次运行：保存为基线 if (!fs.existsSync(baselinePath)) { fs.copyFileSync(actualPath,baselinePath); console.log(`首次运行：已保存基线图 ${testName}`); return; } //读取图片 const img1 = PNG.sync.read(fs.readFileSync(baselinePath)); const img2 = PNG.sync.read(fs.readFileSync(actualPath)); const { width, height } = img1; const diff = new PNG({ width, height }); const mismatchedPixels = pixelmatch(img1.data,img2.data, diff.data, width, height, { threshold: 1 } ); if (mismatchedPixels > 100) { fs.writeFileSync(diffPath, PNG.sync.write(diff)); throw new Error(`视觉差异过大！${mismatchedPixels} 像素不同。差异图: ${diffPath}`); } else { console.log(`视觉比对通过 (${mismatchedPixels} 像素差异)`); }} const { test } = require('@playwright/test'); test('百度界面视觉回归测试', async ({ page }) => { // === 替换为你自己的地址 === await page.goto('https://www.baidu.com'); // 修改这里！ // 执行视觉比对 await visualCompare(page, 'audit-dashboard');});
</code></pre>
<p>(5)执行脚本</p>
<p>以上脚本创建完成之后，就可以开始执行脚本</p>
<pre><code>npx playwright test
</code></pre>
<p><img decoding=)
第一次执行脚本的时候，因为没有基线图，会自动生成一个基线图
需要再次执行一次脚本
在这里会发现视觉差距比较大，没有测试通过，查看报告
为什么两个相同的网页会校验不通过呢？是因为阈值设置比较小，将threshold值改大一点，比如改成1
const mismatchedPixels = pixelmatch( img1.data, img2.data, diff.data, width, height, { threshold: 1 } );
再次执行
npx playwright test
会发现测试通过了，执行
npx playwright show-report
查看测试报告，这里可以看到测试通过
欢迎关注「技术分享交流」公众号 ，如果有建议或者疑问的话，欢迎大家评论留言，如果喜欢公众号文章的话可以点【在看】，您的鼓励就是我的动力哈！！！
免责声明：
本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。
任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。
本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。
本文转载自：技术分享交流 TP微客《playwright+pixelmatch实现超强视觉回归测试》
版权声明
本站仅做备份收录，仅供研究与教学参考之用。
读者将信息用于其他用途的，全部法律及连带责任由读者自行承担，本站不承担任何责任。
评论