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

开源优测 2023-06-29 发布于广东

展开全文

下方查看历史精选文章

重磅发布 - 自动化框架基础指南pdfv1.1
大数据测试过程、策略及挑战

测试框架原理，构建成功的基石

在自动化测试工作之前，你应该知道的10条建议

在自动化测试中，重要的不是工具

在前面的学习中,我们通过编写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.")