跳到主要内容

UI 模式

简介​

UI 模式让您能够以时间旅行的体验来探索、运行和调试测试，并包含观察模式。所有测试文件都会显示在测试侧边栏中，您可以展开每个文件和描述块来单独运行、查看、观察和调试每个测试。可以通过名称、项目（在 playwright.config 文件中设置）、@标签或执行状态（通过、失败和跳过）来筛选测试。查看完整的测试轨迹，并可以前后悬停每个操作来查看每个步骤中发生的情况。您还可以将特定时刻的 DOM 快照弹出到单独窗口中以获得更好的调试体验。

开启 UI 模式​

要开启 UI 模式，请在终端中运行以下命令：

npx playwright test --ui

运行测试​

启动 UI 模式后，您将看到所有测试文件的列表。可以通过点击侧边栏中的三角形图标来运行所有测试。也可以通过悬停在名称上并点击旁边的三角形来运行单个测试文件、一组测试或单个测试。

在 ui 模式中运行测试

测试筛选​

通过文本、@tag 标签或通过已通过/失败/跳过的测试来筛选测试。您还可以根据 playwright.config 文件中设置的项目进行筛选。如果使用了项目依赖关系，请确保先运行设置测试，再运行依赖它们的测试。UI 模式不会自动考虑设置测试，因此您需要手动先运行它们。

在 UI 模式中筛选测试

时间轴视图​

在追踪记录的顶部，您可以看到测试的时间轴视图，使用不同颜色突出显示导航和操作。悬停查看每个操作的图像快照。双击操作可查看该操作的时间范围。您可以使用时间轴中的滑块来扩大选中的操作范围，这些操作将显示在"操作"选项卡中，所有控制台日志和网络日志将被筛选为仅显示选中操作的日志。

UI 模式中的时间轴视图

操作​

在"操作"选项卡中，您可以看到每个操作使用了什么定位器以及每个操作的执行时长。悬停在测试的每个操作上，直观地查看 DOM 快照的变化。在时间轴中前后移动并点击操作进行检查和调试。使用"操作前"和"操作后"选项卡直观查看操作前后的变化。在 UI 模式中使用操作前后对比

弹出并检查 DOM​

点击 DOM 快照上方的弹出图标，可以将 DOM 快照弹出到独立窗口中以便获得更好的调试体验。在此窗口中，您可以打开浏览器开发者工具来检查 HTML、CSS、控制台等。返回 UI 模式后，点击另一个操作并弹出其快照，即可轻松进行并排比较或单独调试。

在 UI 模式中弹出 DOM 快照

选择定位器​

点击选择定位器按钮，将鼠标悬停在 DOM 快照上时，会高亮显示每个元素对应的定位器。点击元素即可将该定位器添加到定位器调试区。您可以在调试区修改定位器，并查看修改后的定位器是否与 DOM 快照中的元素匹配。对定位器满意后，可以使用复制按钮复制定位器并粘贴到测试中。

在 UI 模式中选择定位器

源代码​

当您将鼠标悬停在测试的每个操作上时，源代码面板会高亮显示该操作对应的代码行。此部分右上角有"在 VSCode 中打开"按钮。点击该按钮后，将在 VS Code 中直接打开您点击的那行代码。

在 UI 模式中显示测试源代码

调用​

调用标签页会显示操作的相关信息，包括执行时间、使用的定位器、是否处于严格模式以及使用的按键等。

在 UI 模式中显示调用标签页

日志​

查看完整的测试日志，深入了解 Playwright 在后台执行的操作，例如滚动到视图、等待元素可见、可操作且稳定，以及执行点击、填写、按键等操作。

在 UI 模式下显示测试日志

错误​

如果测试失败，您可以在"错误"选项卡中查看每个测试的错误信息。时间轴还会用红线标记错误发生的位置。您也可以点击"源代码"选项卡查看错误发生在源代码的哪一行。

在 UI 模式下显示错误

控制台​

查看来自浏览器和测试的控制台日志。系统会显示不同的图标来区分日志是来自浏览器还是测试文件。

在 UI 模式下显示测试控制台日志

网络​

"网络"选项卡显示测试期间发起的所有网络请求。您可以按请求类型、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击请求可查看详细信息，包括请求头、响应头、请求体和响应体。

在 UI 模式下显示测试网络请求

附件​

"附件"选项卡允许您查看测试附件。如果您正在进行视觉回归测试，您可以通过检查图像差异、实际图像和预期图像来比较截图。点击预期图像时，可以使用滑块将一个图像叠加在另一个图像上，从而轻松查看截图之间的差异。

带附件的UI模式界面

元数据​

在"操作"选项卡旁边，您可以找到"元数据"选项卡，其中会显示有关测试的更多信息，例如浏览器类型、视口大小、测试持续时间等。

UI模式中的元数据选项卡

监视模式​

在侧边栏中每个测试名称旁边，您会看到一个眼睛图标。点击该图标将激活监视模式，当您对测试进行更改时会自动重新运行该测试。您可以通过点击每个测试旁边的眼睛图标同时监视多个测试，或者通过点击侧边栏顶部的眼睛图标监视所有测试。

UI模式中的监视功能

Docker 与 GitHub Codespaces​

在 Docker 和 GitHub Codespaces 环境中，您可以在浏览器中运行 UI 模式。为了使端点能在容器外部访问，需要将其绑定到 0.0.0.0 接口：

npx playwright test --ui-host=0.0.0.0

对于 GitHub Codespaces 的情况，端口会自动转发，因此您可以通过点击终端中的链接在浏览器中打开 UI 模式。

要使用静态端口，可以传递 --ui-port 参数：

npx playwright test --ui-port=8080 --ui-host=0.0.0.0

:::注意 请注意，当指定 --ui-host=0.0.0.0 参数时，包含追踪记录、密码和密钥的 UI 模式将可以从您网络中的其他机器访问。在 GitHub Codespaces 的情况下，默认情况下端口仅对您的账户开放访问。 :::