UI 模式
简介
UI 模式让您可以体验“时间穿梭”功能来探索、运行和调试测试，并配备了监听模式（watch mode）。所有测试文件都会显示在测试侧边栏中，您可以展开每个文件和 describe 块，从而单独运行、查看、监听和调试每个测试。可以通过名称、项目（在 playwright.config 文件中设置）、@标签，或按执行状态（通过、失败和跳过）来筛选测试。查看测试的完整追踪记录，并在每个操作上来回悬停，以查看每一步的具体执行情况。您还可以将给定时刻的 DOM 快照弹出到一个单独的窗口中，以获得更好的调试体验。
打开 UI 模式
要打开 UI 模式，请在终端中运行以下命令
npx playwright test --ui
运行测试
启动 UI 模式后，您将看到所有测试文件的列表。您可以点击侧边栏中的三角形图标运行所有测试。您也可以通过将鼠标悬停在名称上并点击旁边的三角形来运行单个测试文件、测试块或单个测试。
筛选测试
可以通过文本或 @标签，或者按通过、失败或跳过的测试来筛选测试。您还可以按在 playwright.config 文件中设置的项目进行筛选。如果您正在使用项目依赖项，请确保在运行依赖于它们的测试之前，先运行设置测试（setup tests）。UI 模式不会自动考虑设置测试，因此您必须手动先运行它们。
时间轴视图
在追踪记录的顶部，您可以看到测试的时间轴视图，并使用不同颜色来突出显示导航和操作。来回悬停以查看每个操作的图像快照。双击某个操作可查看该操作的时间范围。您可以使用时间轴中的滑块来增加所选的操作，这些操作将显示在“操作”（Actions）选项卡中，所有的控制台日志和网络日志都将被过滤，仅显示所选操作的日志。
操作 (Actions)
在“操作”选项卡中，您可以看到每个操作使用的定位器及其运行时间。将鼠标悬停在测试的每个操作上，即可直观地看到 DOM 快照的变化。在时间轴上来回移动，单击某个操作进行检查和调试。使用“之前”和“之后”选项卡可直观地查看操作发生之前和之后的情况。
弹出并检查 DOM
点击 DOM 快照上方的弹出图标，将 DOM 快照弹出到其自己的窗口中，以获得更好的调试体验。在此窗口中，您可以打开浏览器开发工具（DevTools）并检查 HTML、CSS、控制台等。回到 UI 模式并点击另一个操作，然后将其弹出，以便轻松地并排比较两者或分别进行调试。
拾取定位器（Pick locator）
点击“拾取定位器”按钮，并将鼠标悬停在 DOM 快照上，即可查看悬停时突出显示的每个元素的定位器。点击一个元素以将其添加到定位器演练场（playground）。您可以在演练场中修改定位器，并查看修改后的定位器是否匹配 DOM 快照中的任何元素。一旦对定位器满意，可以使用复制按钮将其复制并粘贴到您的测试中。
源代码 (Source)
当您将鼠标悬停在测试的每个操作上时，该操作的代码行会在源代码面板中突出显示。本节右上角有“在 VS Code 中打开”（Open in VSCode）按钮。点击该按钮，它将直接在 VS Code 中打开您的测试文件，并定位到您点击的代码行。
调用 (Call)
“调用”选项卡显示有关操作的信息，例如它花费的时间、使用的定位符、是否处于严格模式以及使用的键。
日志 (Log)
查看测试的完整日志，以更好地了解 Playwright 在幕后正在做什么，例如滚动到视图中、等待元素可见、启用和稳定，以及执行点击、填充、按下等操作。
错误 (Errors)
如果您的测试失败，您将在“错误”选项卡中看到每个测试的错误消息。时间线还将显示一条红线，突出显示错误发生的位置。您还可以单击“源”选项卡以查看错误在源代码的哪一行。
控制台 (Console)
查看来自浏览器以及测试的控制台日志。显示不同的图标以显示控制台日志是来自浏览器还是来自测试文件。
网络
“网络”选项卡显示测试期间发出的所有网络请求。您可以按不同的请求类型、状态码、方法、请求、内容类型、持续时间和大小进行排序。单击请求可查看有关它的更多信息，例如请求头、响应头、请求体和响应体。
附件
“附件”选项卡允许您查看附件。如果您正在进行视觉回归测试，您可以通过检查图像差异、实际图像和预期图像来比较截图。点击预期图像时，可以使用滑块在另一张图像上滑动，以便轻松查看截图之间的差异。
元数据 (Metadata)
在“操作”选项卡旁边，您会找到“元数据”选项卡，其中会显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。
监听模式（Watch mode）
在侧边栏中每个测试名称旁边，您会发现一个眼睛图标。点击该图标将激活监听模式，当您更改测试时，它会自动重新运行测试。您可以点击每个测试旁边的眼睛图标来同时监听多个测试，或者点击侧边栏顶部的眼睛图标来监听所有测试。
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，默认情况下端口仅能被您的帐户访问。