Playwright系列：第15章 Playwright可视化测试和差异对比

在前面的学习中,我们通过编写Playwright测试脚本来自动执行测试并验证结果。这种纯代码的测试方式有时会面临一些问题:

1. 难以调试:当测试失败或出现bug时,通过日志和报错信息难以快速定位问题。

2. 无法还原手工测试:手工测试时的操作和效果难以在自动化测试中还原和表现。

3. 测试报告不直观:通过测试报告(日志、测试结果等)难以直观地查看测试执行过程和验证结果。

为了解决以上问题,Playwright提供了录制和回放测试、屏幕截图和视频录制、以及可视化差异对比等功能。这使测试工程师可以:

1. 通过录制和回放还原手工测试,并在此基础上生成自动化测试脚本。

2. 通过屏幕截图和视频,记录下测试执行全过程,便于回顾和分析。

3. 通过可视化差异对比,直观地查看自动化测试与基线的差异,快速定位问题。

本章我们主要来学习Playwright的可视化和差异对比功能。通过这些功能的应用,可以更高效地编写、调试和维护自动化测试。

Playwright测试录制和回放

Playwright测试录制器可以录制用户在浏览器中手工执行的操作,并生成相应的Playwright测试脚本。这简化了从无到有编写测试脚本的难度,让测试工程师可以快速生成自动化测试。

测试录制步骤:

1. 打开Playwright Test Recorder应用

2. 选择浏览器类型:Chrome、Firefox或WebKit

3. 访问要测试的网页URL

4. 在网页上执行测试操作:点击元素、输入文本、拖拽等

5. 点击停止录制按钮,生成测试

6. Playwright Test Recorder会生成对应的Playwright测试脚本。

注：我们也可以在此基础上添加断言、优化测试等。

测试回放功能可以直接执行已录制的测试操作,而无需生成完整的测试脚本。这在调试测试时非常有用,能快速确定测试哪个步骤出了问题。

测试回放步骤:

1. 打开Playwright Test Recorder应用

2. 访问要测试的网页URL

3. 点击开始回放按钮,选择已录制的测试文件

4. 浏览器会自动执行测试文件中的步骤,回放测试操作

5. 我们可以添加断点,查看测试状态,方便调试

6. 回放完成后,点击停止回放按钮结束测试

通过测试录制和回放,我们可以轻松实现手工测试到自动化测试的转变,大大节省编写测试脚本的时间。这是Playwright一个非常实用的功能。

屏幕截图和视频记录

在测试执行过程中,Playwright可以捕获浏览器窗口的屏幕截图和视频。这使我们可以在测试报告中,以视觉的形式查看整个测试运行的细节,包括页面内容、执行步骤等。

- page.screenshot([options]):对当前页面截图,返回Buffer对象。

- page.video.startRecording(options):开始录制视频,需要调用`page.video.stopRecording()`结束录制。

- page.video.path():获取视频文件路径。

视频录制选项:

- format:视频格式,可选'flv'、'm3u8'、'mp4'、'webm'等。默认mp4。

- frameRate:视频帧率,默认30。

- dir:视频文件目录。

- size:视频大小,默认页面视窗大小。可以设置宽和高。

Python示例:

# 首页截图
home_page = page.screenshot()
# 开始录制视频 
page.video.startRecording()
# 测试操作...
# 结束录制
video_path = page.video.stopRecording()
# 添加测试报告
report.addScreenshot(home_page, 'Home Page')
report.addVideo(video_path, 'Test Video')

通过网络存储服务,我们可以永久保存测试过程中的屏幕截图和视频,并在测试报告中嵌入展示。这让测试报告从简单的文本变成生动的多媒体展示,更加直观地反映出测试执行的全过程及结果。

可视化差异对比

当测试作用于可变化的页面元素时,通过日志和测试报告难以确定测试是否真正通过。因为我们无法知道测试期间页面元素的具体变化。

Playwright的可视化差异对比功能可以解决这个问题。它可以对两个页面截图进行智能对比,高亮显示两次测试之间元素的差异,让测试工程师快速验证测试结果的正确性。

差异对比步骤:

1. 首次运行测试,调用`page.screenshot()`获取基线截图。

2. 再次运行测试,获取当前截图。

3. 使用`compareSnapshots()`方法对两次截图进行差异对比。

4. 对比结果中,绿色高亮显示新增元素,红色高亮显示移除元素。

5. 分析高亮区域,判断测试通过与否。

6. 如果测试未通过,需要修正测试脚本。

Python示例:

# 首次测试,获取基线页截图
baseline_img = page.screenshot()
# 第二次测试,获取当前页截图
current_img = page.screenshot()
# 对比两次截图
diff = compareSnapshots(baseline_img, current_img)
# 如果diff为空,测试通过,否则有差异 
if not diff:
    print("Test passed.")
else:
    #显示差异截图
    display(diff)
print("Test failed.")

可视化差异对比功能是Playwright测试工具箱中最实用的功能之一。它使自动化测试的判断不再局限于简单的测试结果(Passed/Failed),我们可以更加直观和准确地分析两个测试运行之间的差异,快速定位测试失败的原因。

这种通过人眼识别的半自动化测试方式,可以有效补充全自动化测试的不足,实现测试自动化与手工测试的完美结合。

总结

本章主要学习了Playwright的可视化和差异对比功能,包括:

1. 测试录制和回放:通过录制和回放手工测试,生成自动化测试脚本。

2. 屏幕截图和视频:在测试运行期间捕获屏幕截图和视频,生成生动的测试报告。

3. 可视化差异对比:智能对比两次测试的截图,高亮显示差异元素,辅助判断测试结果。

这些功能使Playwright从一款纯自动化测试工具,升级为集成了手工测试和自动化测试的平台。从而实现手工测试到自动化测试无缝过渡,以及自动化测试与手工测试的完美结合。

通过本章的学习,应掌握这些功能的使用方法和在实际测试案例中的应用。结合前面学习到的其他技能,可以设计出体现高效和智能的Playwright测试方案。

开源优测