playwright 页面对比

### 使用 Playwright 实现网页截图对比 为了实现网页截图并进行可视化差异检测，Playwright 提供了强大的 API 来捕获页面的快照，并通过第三方库来比较这些图片之间的差异。 #### 1. 安装依赖项 首先，在项目中安装必要的包： ```bash npm install @playwright/test pixelmatch sharp ``` `pixelmatch` 和 `sharp` 是用于处理图像和计算像素级差别的两个重要工具。 #### 2. 编写测试脚本 创建一个简单的 JavaScript 文件 (例如 test.js)，编写如下代码以获取两次渲染后的页面截图并保存下来： ```javascript const { chromium } = require('@playwright/test'); const fs = require('fs/promises'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); // 打开目标网站 await page.goto('https://example.com'); // 获取首次加载时的截图 await page.setViewportSize({ width: 1920, height: 1080 }); await page.screenshot({ path: 'screenshot-before.png' }); // 进行某些操作改变界面状态... // 再次截取修改后的画面 await page.reload(); // 或者其他交互行为触发的变化 await page.screenshot({ path: 'screenshot-after.png' }); console.log("Screenshots taken."); await browser.close(); })(); ``` 这段代码会访问指定 URL 并分别拍摄两张不同时间点上的屏幕快照[^3]。 #### 3. 图像比较逻辑 接下来定义函数来进行两幅图之间视觉上的区别分析: ```javascript const compareImages = async function(imageAPath, imageBPath){ const PixelMatch = require('pixelmatch'); const { PNG } = require('pngjs'); const fs = require('fs').promises; let imgA = new Promise((resolve,reject)=>{ fs.createReadStream(imageAPath).pipe(new PNG()).on('parsed', resolve); }).then(data=>new Uint8ClampedArray(data.data)); let imgB = new Promise((resolve,reject)=>{ fs.createReadStream(imageBPath).pipe(new PNG()).on('parsed', resolve); }).then(data=>new Uint8ClampedArray(data.data)); return Promise.all([imgA,imgB]).then(([dataA,dataB])=>{ var diff = new Uint8ClampedArray(dataA.length); const result = PixelMatch( dataA, dataB, diff, 1920, // Width of the images 1080, // Height of the images {threshold: 0.1} ); console.log(`Difference found at ${result} pixels`); if(result>0){ const outPng = new PNG({width: 1920, height: 1080}); outPng.data = Buffer.from(diff.buffer); fs.writeFile('diff.png', PNG.sync.write(outPng), ()=>console.log('Diff saved')); } return result; }) }; ``` 此部分利用 `pixelmatch` 库逐个像素地检查前后两张照片的不同之处，并生成一张高亮显示所有变动位置的新图片作为输出文件 "diff.png"[^1]. #### 4. 调用比较功能 最后一步是在之前编写的测试完成后调用上述方法完成最终的结果验证工作： ```javascript // ...前面的部分保持不变... await page.screenshot({path:'screenshot-after.png'}); console.log("Screenshots taken."); // 添加这行来执行图像间的差异检测 await compareImages('screenshot-before.png','screenshot-after.png'); await browser.close(); ``` 这样就可以得到经过智能算法筛选过的真正有意义的 UI 变更提示了。对于持续集成环境中自动化的回归测试来说非常有用处[^2]。