UI模式

简介​

UI模式让您能够通过时光旅行体验来探索、运行和调试测试，并配有监视模式。所有测试文件都显示在测试侧边栏中，您可以展开每个文件并描述块来单独运行、查看、监视和调试每个测试。通过名称、项目（在您的playwright.config文件中设置）、@标签或执行状态通过、失败和跳过来筛选测试。查看测试的完整跟踪，并在每个操作上前后悬停以了解每个步骤中发生的情况。您还可以将特定时刻的DOM快照弹出到单独窗口，以获得更好的调试体验。

打开UI模式​

要打开UI模式，请在终端中运行以下命令：

npx playwright test --ui

运行你的测试​

启动UI模式后，您将看到所有测试文件的列表。通过点击侧边栏中的三角形图标可以运行所有测试。您还可以将鼠标悬停在名称上并点击旁边的三角形来运行单个测试文件、一组测试或单个测试。

过滤测试​

通过文本或@tag筛选测试，或按通过、失败或跳过的测试进行筛选。您还可以根据playwright.config文件中设置的projects进行筛选。如果使用项目依赖关系，请确保在运行依赖它们的测试之前先运行设置测试。UI模式不会考虑设置测试，因此您必须手动先运行它们。

时间轴视图​

在追踪记录的顶部，您可以看到测试的时间轴视图，使用不同颜色来突出显示导航和操作。来回悬停可查看每个操作的图像快照。双击某个操作可查看该操作的时间范围。您可以使用时间轴中的滑块来增加选定的操作，这些操作将在"操作"选项卡中显示，并且所有控制台日志和网络日志将被过滤，仅显示选定操作的日志。

操作​

在"操作"选项卡中，您可以查看每个操作使用了哪个定位器以及每个操作运行所花费的时间。将鼠标悬停在测试的每个操作上，直观地查看DOM快照中的变化。您可以前后浏览时间轴，点击某个操作进行检查和调试。使用"操作前"和"操作后"选项卡可以直观地查看操作前后发生的变化。

弹出并检查DOM​

Pop out the DOM snapshot into its own window for a better debugging experience by clicking on the pop out icon above the DOM snapshot. From there you can open the browser DevTools and inspect the HTML, CSS, Console etc. Go back to UI Mode and click on another action and pop that one out to easily compare the two side by side or debug each individually.

选择定位器​

点击定位器选择按钮，将鼠标悬停在DOM快照上，当您悬停时可以看到每个元素高亮显示的定位器。点击元素将定位器添加到调试区。您可以在调试区修改定位器，并查看修改后的定位器是否与DOM快照中的任何定位器匹配。当您对定位器满意后，可以使用复制按钮复制定位器并粘贴到测试中。

源代码​

当您将鼠标悬停在测试的每个操作上时，该操作的代码行会在源代码面板中高亮显示。右上角的"Open in VSCode"按钮位于此部分的顶部。点击该按钮后，它将在VS Code中打开您的测试，并直接定位到您点击的那行代码。

调用​

调用选项卡显示有关操作的信息，例如所花费的时间、使用的定位器、是否处于严格模式以及使用的按键。

日志​

查看完整的测试日志，以更好地理解Playwright在后台执行的操作，例如滚动到视图、等待元素可见、启用并稳定，以及执行点击、填写、按下等操作。

错误​

如果测试失败，您将在"错误"选项卡中看到每个测试的错误信息。时间轴还会显示一条红线，高亮标记错误发生的位置。您也可以点击源代码选项卡查看错误发生在源代码的哪一行。

控制台​

查看来自浏览器以及测试的console日志。不同的图标会显示该日志是来自浏览器还是测试文件。

网络​

网络选项卡显示测试期间发出的所有网络请求。您可以按不同类型的请求、状态码、方法、请求内容、内容类型、持续时间和大小进行排序。点击某个请求可查看更详细信息，例如请求头、响应头、请求体和响应体。

附件​

"Attachments"（附件）选项卡允许您查看附件。如果您正在进行视觉回归测试，您将能够通过检查图像差异、实际图像和预期图像来比较屏幕截图。当您点击预期图像时，可以使用滑块将一个图像滑过另一个图像，这样您可以轻松查看屏幕截图之间的差异。

元数据​

在Actions选项卡旁边，您会找到Metadata选项卡，它将显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。

监视模式​

在侧边栏中每个测试名称旁边，您会看到一个眼睛图标。点击该图标将激活监视模式，当您对该测试进行更改时，它会自动重新运行。您可以通过点击每个测试旁边的眼睛图标同时监视多个测试，或者通过点击侧边栏顶部的眼睛图标来监视所有测试。

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