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