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 快照中的任何定位符匹配。确定定位符后，你可以使用复制按钮复制该定位符并将其粘贴到你的测试中。
源
当你将鼠标悬停在测试的每个操作上时，该操作对应的代码行会在源面板中高亮显示。“在 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，端口默认只能从你的账户访问。