UI 模式可以让你通过可视化界面探索、运行和调试测试，并提供类似“时间旅行”的调试体验，同时支持监听模式。所有测试文件都会显示在测试侧边栏中，你可以展开每个文件以及 describe 测试块，然后单独运行、查看、监听或调试某个测试。
你可以按测试名称、playwright.config 中配置的项目、@tag 标签，或者按执行状态过滤测试，例如已通过、失败或已跳过。
在 UI 模式中，你可以查看测试的完整 trace，并在每个动作之间前后悬停，观察该步骤发生了什么。你也可以把某一时刻的 DOM 快照弹出到单独窗口中，以获得更好的调试体验。
打开 UI 模式
Section titled “打开 UI 模式”要打开 UI 模式，请在终端中运行下面的命令：
npx playwright test --ui启动 UI 模式后，你会看到所有测试文件的列表。点击侧边栏中的三角形图标，可以运行全部测试。
你也可以只运行某一个测试文件、某一个测试块，或者某一个单独测试。将鼠标悬停在对应名称上，然后点击旁边出现的三角形图标即可。
你可以通过文本、@tag 标签，以及已通过、失败或已跳过状态来过滤测试。也可以按 playwright.config 文件中设置的项目进行过滤。
在 trace 顶部可以看到测试的时间线视图。时间线会使用不同颜色突出显示导航和动作。
你可以在时间线上来回悬停，查看每个动作对应的图片快照。双击某个动作可以查看该动作的时间范围。还可以使用时间线中的滑块扩大所选动作范围；这些动作会显示在 Actions 标签页中，并且控制台日志和网络日志也会被过滤，只显示所选动作相关的日志。
Actions
Section titled “Actions”在 Actions 标签页中，你可以看到每个动作使用了哪个 locator，以及每个动作运行花费的时间。
将鼠标悬停在测试中的每个动作上，可以直观看到 DOM 快照中的变化。你可以在时间上前后移动，并点击某个动作进行检查和调试。使用 Before 和 After 标签页，可以直观查看动作执行前后发生了什么。
弹出并检查 DOM
Section titled “弹出并检查 DOM”点击 DOM 快照上方的弹出图标，可以将 DOM 快照弹出到独立窗口，从而获得更好的调试体验。
在弹出的窗口中，你可以打开浏览器 DevTools，并检查 HTML、CSS、Console 等内容。回到 UI 模式后，可以点击另一个动作并将它也弹出，这样就能轻松并排比较两个状态，或者分别调试它们。
选择 locator
Section titled “选择 locator”点击选择 locator 按钮，然后将鼠标悬停在 DOM 快照上，可以看到每个元素对应的 locator 被高亮显示。
点击某个元素后，会将 locator 添加到 locator playground。你可以在 playground 中修改 locator，并查看修改后的 locator 是否能匹配 DOM 快照中的元素。确认 locator 满足要求后，可以使用复制按钮将它复制并粘贴到测试中。
Source
Section titled “Source”当你将鼠标悬停在测试的每个动作上时，源代码面板中会高亮显示该动作对应的代码行。
该区域右上角有一个 Open in VSCode 按钮。点击后，会在 VS Code 中打开测试文件，并定位到你点击的那一行代码。
Call 标签页会显示动作相关的信息，例如动作耗时、使用的 locator、是否处于 strict mode，以及使用了哪个按键等。
你可以查看测试的完整日志，从而更好地理解 Playwright 在后台执行了什么操作。
这些日志会展示诸如滚动到可见区域、等待元素变为可见、等待元素启用、等待元素稳定，以及执行点击、填充、按键等动作的过程。
Errors
Section titled “Errors”如果测试失败，你会在 Errors 标签页中看到每个测试的错误消息。时间线也会显示红色标记，用来突出显示错误发生的位置。
你还可以点击 Source 标签页，查看错误对应到源代码的哪一行。
Console
Section titled “Console”你可以查看来自浏览器的控制台日志，也可以查看来自测试代码的日志。
不同图标会用来区分日志来源：有些日志来自浏览器，有些日志来自测试文件。
Network
Section titled “Network”Network 标签页会显示测试期间发出的所有网络请求。
你可以按不同请求类型、状态码、方法、请求、内容类型、耗时和大小进行排序。点击某个请求后，可以查看更多信息，例如请求头、响应头、请求体和响应体。
Attachments
Section titled “Attachments”Attachments 标签页用于查看附件。
如果你正在进行视觉回归测试，可以在这里比较截图，包括图片差异、实际图片和期望图片。点击期望图片后，可以使用滑块将一张图片滑过另一张图片，从而更容易看到截图之间的差异。
Metadata
Section titled “Metadata”在 Actions 标签页旁边可以找到 Metadata 标签页。它会显示测试的更多信息，例如浏览器、视口大小、测试耗时等。
在侧边栏中，每个测试名称旁边都有一个眼睛图标。点击该图标会激活监听模式。当你修改该测试时，测试会自动重新运行。
你可以同时监听多个测试，只需分别点击每个测试旁边的眼睛图标即可。也可以点击侧边栏顶部的眼睛图标，监听所有测试。
Docker 和 GitHub Codespaces
Section titled “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