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