使用 PyCharm 和 Test Automation 插件结合 Playwright 完成自动化测试框架

在本文中，我们将使用 PyCharm 和 Test Automation 插件，结合 Playwright 完成一个自动化测试框架，并演示如何利用 Playwright 的截图结合对比功能进行 UI 回归验证。

回归测试是软件开发中至关重要的一部分。随着自动化测试框架的成熟，开发人员和测试人员可以更高效地进行变更验证，减少人工测试工作量。利用和提供的截图对比功能，让回归验证自动化成为可能。

环境搭建

1.1 安装插件

安装不必多说，官网下载安装即可。自动化插件 Test Automation 的安装步骤如下：

1. 在“设置”对话框 ( ) 中，选择“插件”。
2. 切换到选项卡，输入，然后单击。

1.2 安装 Node.js

确保已经安装了。在终端中运行以下命令确认是否已安装：

如果没有安装，可以访问官网进行下载并安装。

1.3 创建 Playwright 项目

1. 打开，点击。
2. 在左侧的选项中选择，右侧会自动显示环境。
3. 确保使用的是正确的版本，点击。
4. 会自动运行来初始化项目，生成项目结构。此时，会为我们创建一个包含文件和配置的项目。

1.4 初始化项目

生成的项目，这里都用默认选项，一路回车即可。

等项目初始化完成

修改下配置文件，注释掉不需要的浏览器支持，例如 Firefox

修改下 tests/examples.spec.ts 后运行即可

运行下，结果显示通过

1.5 安装图像对比库

接下来，我们将使用库来进行图像对比。运行以下命令来安装它：

安装完成后如图所示：

项目结构完成上述步骤后，项目的目录结构如下所示：

自动化回归测试

在文件夹下，创建一个名为的文件，编写以下代码来实现截图和对比功能：

代码解析

1. ：此函数使用库对比两张截图，判断它们是否一致。
2. ：打开淘宝首页，作为回归验证的目标页面。
3. ：捕获页面截图并保存。
4. 基准截图：如果是第一次运行，脚本会将当前截图保存为基准截图，后续测试中将与该基准截图进行对比。

运行测试

1. 打开终端，导航到项目目录。

2. 运行以下命令启动测试：

3. 脚本将自动打开浏览器，访问淘宝首页，捕获当前截图，并与基准截图进行对比。

4. 如果截图一致，输出 "UI回归测试通过，截图一致！"；

如果有差异，输出 "UI回归测试失败，截图有差异！"。

总结

通过以上步骤，我们使用和创建了一个回归验证的自动化测试框架。核心步骤如下：

• 创建项目：在中选择模板，并初始化项目。借助于测试框架样例可以快速开始新的测试编写。
• 实现了回归测试：使用捕获页面截图，并通过对比截图判断是否发生变化。这里演示了和测试框架示例不一样的写法，更贴近开发人员的实现思路。
• 运行和分析测试结果：运行测试脚本并分析截图对比结果，确保页面没有出现不期望的变动。

以上，开发人员和测试人员能够高效地完成回归验证工作。如果你觉得本教程对你有帮助，还请点个赞，关个注，下次更新不迷路！

原文转载自：https://mp.weixin.qq.com/s/aMuf1yW5xrpeig7JB6etKQ