仅楼主可见

仅楼主可见

加 1，卡在自动化这，没有太明显进度。希望有人能给指导一下

请教一下反向有哪些场景呢？没做过这块的测试，想了解一下

同求！！

以下是基于 Cursor + 自动化截图对比 的快速实施方案，可在 4 小时内搭建完整流程：

一、环境准备（15 分钟）

安装核心工具链
npm install playwright playwright-extra pixelmatch fs-extra
pip install Pillow opencv-python numpy
# 二、基础脚本开发（30 分钟）

1. 截图采集脚本 (capture.js) const { chromium } = require('playwright'); const fs = require('fs-extra');

async function captureScreenshots(urls, outputDir) {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1280, height: 720 }
});

for (const [index, url] of urls.entries()) {
const page = await context.newPage();
await page.goto(url);
await page.waitForLoadState('networkidle');

// 核心截图逻辑
await page.screenshot({
path: ${outputDir}/screenshot_${index}.png,
fullPage: true,
animations: 'disabled'
});
}

await browser.close();
}

// 示例调用
captureScreenshots(
['http://old-editor/doc/123', 'http://new-editor/doc/123'],
'./screenshots'
);

1. 差异对比脚本 (compare.py) import cv2 import numpy as np from PIL import Image, ImageChops

def compare_images(old_path, new_path, diff_path):
old_img = Image.open(old_path).convert('RGB')
new_img = Image.open(new_path).convert('RGB')

# 智能对比算法
diff = ImageChops.difference(old_img, new_img)
diff_array = np.array(diff)

# 差异可视化增强
_, threshold = cv2.threshold(
cv2.cvtColor(diff_array, cv2.COLOR_RGB2GRAY),
25, 255, cv2.THRESH_BINARY
)
contours, _ = cv2.findContours(
threshold, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE
)

# 生成差异标注图
result = cv2.imread(new_path)
for cnt in contours:
x,y,w,h = cv2.boundingRect(cnt)
cv2.rectangle(result, (x,y), (x+w,y+h), (0,0,255), 2)

cv2.imwrite(diff_path, result)
return len(contours) > 0

三、高级配置技巧

1. 动态内容过滤（解决时间戳等干扰） // 在截图前执行页面清理 await page.addScriptTag({ content: document.querySelectorAll('.timestamp, .ads').forEach(el => el.remove()); });
2. 抗锯齿处理 # 在对比前添加模糊处理 old_img = old_img.filter(ImageFilter.GaussianBlur(radius=1)) new_img = new_img.filter(ImageFilter.GaussianBlur(radius=1))
3. 多分辨率适配（移动端兼容） const devices = [ 'iPhone 13 Pro', 'Desktop Chrome' ];

for (const device of devices) {
const deviceSpec = playwright.devices[device];
const context = await browser.newContext(deviceSpec);
// ...截图逻辑...
}

四、自动化执行流程（使用 Cursor AI）

文档列表准备

导出所有文档 ID

mongoexport --uri=mongodb://localhost:27017/docs --collection=articles --fields=_id --type=csv > docs.csv
并行执行命令

使用 xargs 并行处理

cat docs.csv | xargs -P 8 -I {} node capture.js --docId {}
差异报告生成

生成 HTML 报告

from dominate import document
from dominate.tags import *

with document(title='Diff Report') as doc:
h1('Content Diff Report')
for diff in diffs:
div(img(src=diff['old']), img(src=diff['new']), img(src=diff['diff']))

with open('report.html', 'w') as f:
f.write(doc.render())

五、性能优化方案

优化策略 实施方法 效果提升
智能缓存 对未修改文档跳过截图 减少 60% 工作量
增量对比 仅对比修改时间>上次运行的文档 缩短 70% 时间
GPU 加速 启用 playwright._impl._driver_process GPU 支持 提速 3x
分布式 使用 K8s Job 分片处理 线性扩展
# 六、灰度验证策略
影子模式对比
// 同时加载新旧编辑器进行实时对比
async function shadowCompare(docId) {
const [oldPage, newPage] = await Promise.all([
browser.newPage().goto(oldUrl),
browser.newPage().goto(newUrl)
]);

const [oldShot, newShot] = await Promise.all([
oldPage.screenshot(),
newPage.screenshot()
]);

return compare(oldShot, newShot);
}
渐进式验证

第一阶段 → 对比核心文档（1000 篇）
第二阶段 → 对比模板文档（所有模板类型）
第三阶段 → 全量文档滚动对比
# 七、操作成本对比
方案 5000 文档耗时 准确率 硬件成本
人工抽查 40 人天 65% 0
文本对比 2 小时 92% 低
截图对比 25 分钟 98% 中
通过该方案，可实现每小时验证 12,000+ 文档 的视觉一致性。建议结合文本对比方案使用，先执行快速文本对比，再对存在差异的文档进行精准截图对比。
以上步骤如果楼主执行了，请反馈一下。以上答案是问的 deepseek.我没有具体的系统场景，所以想了解一下最终问题是否有效解决！

点赞

谢谢大家的建议，我先调研一下 airtest 和 minium，Appium+chrimedriver 这三种哪种更适合我的小程序测试。和研发确认了一下，小程序并非微信纯原生开发。是使用的 H5 套壳微信小程序。如果大家有更合适的建议，可以提出。谢谢！！

感谢！我试一下的。

学到了。感谢！

感谢提醒。已移除这个 raise 添加了更具体的 except Exception 语句替换

还真的是。我用了 span 就能成功定位了。但是按理来说 id 应该是最唯一可以定位的呀。怎么这里用 span 就行了呢。求大佬顺带答惑一下。感谢！！

关于上边提到的 firebug 和 firepath。我进行相关资料搜索发现自 Firefox 59 发布以来，Firebug 已经不再被官方支持或维护。想请教一下楼主是降了 Firefox 的版本。还是有了别的替代插件呢？