Playwright实战-用户界面模式

简介：Playwright作为一个功能丰富的自动化测试框架，UI Mode提供了许多强大功能，包括观察模式（Watch Mode）和时间线调试（Time Travel Debugging）等。此外，UI Mode仅支持Node.js，对于Python、Java、C#等并不支持。

UI Mode是什么

UI mode是一个强大的图形用户界面。提供了对每个测试过程的全面跟踪。通过UI模式，可以

1. 轻松地探索、运行和调试测试

2. 监视任何测试，并在每次代码更改时自动重新运行

3. 查看详细的测试结果，包括日志、DOM快照和跟踪信息

总的来说，Playwright的UI Mode提供了全面、用户友好的测试体验，让你能够快速轻松地识别和修复测试中的问题。

UI Mode具体使用

启动命令行

npx playwright test --ui

当启动UI Mode时，将看到所有测试文件的列表。要运行测试，有几个选项：

• 点击侧边栏中的三角形图标以运行所有测试

• 将鼠标悬停在测试文件名称上，然后单击其旁边的三角形以运行单个测试、一系列测试或整个测试文件

过滤用例

可以按文本或@标签、通过、失败或跳过的测试以及在的 playwright.config 文件中设置的项目来筛选测试。如果正在使用项目依赖项，请确保在运行依赖于它们的测试之前先运行设置测试。UI Mode不会考虑设置测试，因此需要先手动运行它们。可重用。

查看测试追踪

追踪提供了有关已执行的每个测试的详细信息。可以通过单击任何单个测试名称来访问追踪结果。通过检查追踪结果，可以确定测试运行过程中发生的任何失败或错误的原因，并采取适当的措施加以解决。

操作和元数据

Actons选项卡提供了丰富信息，可以查看每个操作使用的特定定位器以及完成该操作所花费的时间。当将鼠标悬停在每个操作上时，可以观察到 DOM 快照的变化。此外，可以在时间轴中向前和向后导航，并单击任何操作以进行检查和调试。在“之前”和“之后”选项卡中，可以直观地跟踪每个操作之前和之后发生的更改。

在Actions选项卡旁边，会找到Metadata选项卡。该选项卡为测试提供了其他信息，例如所使用的浏览器、视口大小、测试持续时间等。

源代码、控制台、日志和网络

当悬停在测试操作上时，其相应的源代码会在下方突出显示。要查看整个测试的源代码，请单击Source选项卡。分别单击Network和“Console”选项卡，即可访问每个操作的控制台日志和网络日志。

弹出并检查 DOM

为了提升您的调试体验，您可以点击位于快照上方的专用图标，将 DOM 快照弹出。这将在单独的窗口中打开快照，您可以使用浏览器 DevTools 检查 HTML、CSS 等内容。然后，您可以返回 UI 模式，弹出另一个操作的快照，以便进行比较或并行调试。

时间轴视图

在追踪的顶部，您可以看到测试的每个操作的时间轴视图。往前和往后悬停以查看每个操作的图像快照。

选取定位器

自动化测试中最重要的部分之一是识别要与之交互的页面元素。Playwright 的 UI Mode 中的选取定位器功能使这一过程变得更加容易，只需轻松选择一个元素并检索其定位器即可。

要使用选取定位器功能，只需在 UI Mode 工具栏中单击“选取定位器”按钮。这将激活该功能，并在悬停在元素上时突出显示页面上的所有元素。一旦点击一个元素，相应的定位器将显示在Locator字段中。点击复制按钮，然后将定位器粘贴到您的测试中。

Watch Mode

Watch Mode 是 Playwright UI Mode中的另一个有用功能，它允许在对代码进行更改时自动重新运行测试。在处理大型测试套件并且希望快速测试您所做更改时，这一功能尤其有用，无需每次手动重新运行测试。

要使用 Watch Mode，只需点击要观看的测试名称旁边的眼睛图标。这将激活该功能，并在对其代码进行更改时自动重新运行测试。可以通过单击每个测试旁边的眼睛图标来同时监视多个测试，或者通过单击侧边栏顶部的眼睛图标来监视测试套件中的所有测试。

如果正在使用 VS Code，则可以通过单击眼睛图标旁边的文件图标轻松在编辑器中打开测试文件。这将在 VS Code中打开测试文件，并直接跳转到当前正在观看的测试步骤对应的代码行。

结论

总之，Playwright 的 UI Mode 为探索、运行和调试自动化测试提供了强大的工具集。完整的时间旅行体验，包括观察模式、过滤和跟踪，使您能够快速识别和修复测试代码中的问题，而 Pick Locator 功能简化了在页面上选择和交互元素的过程。无论您是经验丰富的自动化测试专家还是刚开始尝试测试自动化，Playwright 的 UI Mode 值得一试。