用户界面模式

介绍

¥Introduction

UI 模式可让你探索、运行和调试测试，并通过监视模式获得时间旅行体验。所有测试文件都加载到测试侧栏中，你可以在其中展开每个文件并描述块以单独运行、查看、观察和调试每个测试。按文本或 @tag 或通过、失败和跳过的测试以及 playwright.config 文件中设置的 projects 过滤测试。查看测试的完整跟踪，并将鼠标悬停在每个操作上，以查看每个步骤中发生的情况，并将 DOM 快照弹出到单独的窗口，以获得更好的调试体验。

¥UI Mode let's you explore, run and debug tests with a time travel experience complete with watch mode. All test files are loaded into the testing sidebar where you can expand each file and describe block to individually run, view, watch and debug each test. Filter tests by text or @tag or by passed, failed and skipped tests as well as by projects as set in your playwright.config file. See a full trace of your tests and hover back and forward over each action to see what was happening during each step and pop out the DOM snapshot to a separate window for a better debugging experience.

打开 UI 模式

¥Opening UI Mode

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

¥To open UI mode, run the following command in your terminal:

npx playwright test --ui

运行你的测试

¥Running your tests

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

¥Once you launch UI Mode you will see a list of all your test files. You can run all your tests by clicking the triangle icon in the sidebar. You can also run a single test file, a block of tests or a single test by hovering over the name and clicking on the triangle next to it.

过滤测试

¥Filtering tests

按文本或 @tag 或通过、失败或跳过的测试过滤测试。你还可以按 playwright.config 文件中设置的 projects 进行过滤。如果你使用项目依赖，请确保先运行你的设置测试，然后再运行依赖于它们的测试。UI 模式不会考虑设置测试，因此你必须先手动运行它们。

¥Filter tests by text or @tag or by passed, failed or skipped tests. You can also filter by projects as set in your playwright.config file. If you are using project dependencies make sure to run your setup tests first before running the tests that depend on them. The UI mode will not take into consideration the setup tests and therefore you will have to manually run them first.

时间轴视图

¥Timeline view

在跟踪的顶部，你可以看到测试的时间线视图，用不同的颜色高亮导航和操作。来回悬停可查看每个操作的图片快照。双击某个操作可查看该操作的时间范围。你可以使用时间线中的滑块来增加所选操作，这些操作将显示在“操作”选项卡中，并且所有控制台日志和网络日志将被过滤，仅显示所选操作的日志。

¥At the top of the trace you can see a timeline view of your test with different colors to highlight navigation and actions. Hover back and forth to see an image snapshot for each action. Double click on an action to see the time range for that action. You can use the slider in the timeline to increase the actions selected and these will be shown in the Actions tab and all console logs and network logs will be filtered to only show the logs for the actions selected.

行动

¥Actions

在“操作”选项卡中，你可以查看每个操作使用的定位器以及每个操作运行的时间。将鼠标悬停在测试的每个操作上，并直观地查看 DOM 快照中的变化。及时返回和前进，然后单击一个操作来检查和调试。使用“之前”和“之后”选项卡可以直观地查看操作之前和之后发生的情况。

¥In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action.

弹出并检查 DOM

¥Pop out and inspect the DOM

单击 DOM 快照上方的弹出图标，将 DOM 快照弹出到其自己的窗口中，以获得更好的调试体验。从那里你可以打开浏览器 DevTools 并检查 HTML、CSS、控制台等。返回 UI 模式并单击另一个操作并将该操作弹出，以便轻松地并排比较两个操作或单独调试每个操作。

¥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.

拾取定位器

¥Pick locator

单击“选择定位器”按钮并将鼠标悬停在 DOM 快照上，即可在悬停时查看高亮的每个元素的定位器。单击一个元素以添加定位器在线运行。你可以修改 Playground 中的定位器，并查看修改后的定位器是否与 DOM 快照中的任何定位器相匹配。一旦你对定位器感到满意，你可以使用复制按钮复制定位器并将其粘贴到你的测试中。

¥Click on the pick locator button and hover over the DOM snapshot to see the locator for each element highlighted as you hover. Click on an element to add the locator playground. You can modify the locator in the playground and see if your modified locator matches any locators in the DOM snapshot. Once you are satisfied with the locator you can use the copy button to copy the locator and paste it into your test.

来源

¥Source

当你将鼠标悬停在测试的每个操作上时，该操作的代码行会在源面板中高亮。

¥As you hover over each action of your test the line of code for that action is highlighted in the source panel.

调用

¥Call

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

¥The call tab shows you information about the action such as the time it took, what locator was used, if in strict mode and what key was used.

日志

¥Log

查看测试的完整日志，以更好地了解 Playwright 在幕后所做的事情，例如滚动到视图中、等待元素可见、启用和稳定以及执行单击、填充、按下等操作。

¥See a full log of your test to better understand what Playwright is doing behind the scenes such as scrolling into view, waiting for element to be visible, enabled and stable and performing actions such as click, fill, press etc.

错误

¥Errors

如果测试失败，你将在“错误”选项卡中看到每个测试的错误消息。时间线还将显示一条红线，高亮错误发生的位置。你还可以单击“源代码”选项卡来查看错误出现在源代码的哪一行。

¥If your test fails you will see the error messages for each test in the Errors tab. The timeline will also show a red line highlighting where the error occurred. You can also click on the source tab to see on which line of the source code the error is.

控制台

¥Console

查看来自浏览器和测试的控制台日志。将显示不同的图标来显示控制台日志是来自浏览器还是来自测试文件。

¥See console logs from the browser as well as from your test. Different icons are displayed to show you if the console log came from the browser or from the test file.

网络

¥Network

“网络”选项卡显示测试期间触发的所有网络请求。你可以按不同类型的请求、状态代码、方法、请求、内容类型、持续时间和大小进行排序。单击请求可查看有关该请求的更多信息，例如请求标头、响应标头、请求正文和响应正文。

¥The Network tab shows you all the network requests that were made during your test. You can sort by different types of requests, status code, method, request, content type, duration and size. Click on a request to see more information about it such as the request headers, response headers, request body and response body.

附件

¥Attachments

"附件" 选项卡允许你浏览附件。如果你正在执行 视觉回归测试，你将能够通过检查图片差异、实际图片和预期图片来比较屏幕截图。当你单击所需的图片时，你可以使用滑块将一张图片滑动到另一张图片上，以便你可以轻松地看到屏幕截图中的差异。

¥The "Attachments" tab allows you to explore attachments. If you're doing visual regression testing, you'll be able to compare screenshots by examining the image diff, the actual image and the expected image. When you click on the expected image you can use the slider to slide one image over the other so you can easily see the differences in your screenshots.

元数据

¥Metadata

在“操作”选项卡旁边，你将找到“元数据”选项卡，它将显示有关测试的更多信息，例如浏览器、视口大小、测试持续时间等。

¥Next to the Actions tab you will find the Metadata tab which will show you more information on your test such as the Browser, viewport size, test duration and more.

监视模式

¥Watch mode

在侧边栏中每个测试的名称旁边，你会发现一个眼睛图标。单击该图标将激活监视模式，当你对其进行更改时，该模式将重新运行测试。你可以通过单击侧边栏顶部的眼睛图标，单击每个或所有测试旁边的眼睛图标，同时监视多个测试。如果你使用 VS Code，那么你可以通过单击眼睛图标旁边的文件图标轻松打开测试。这将在 VS Code 中在你单击的代码行处打开你的测试。

¥Next to the name of each test in the sidebar you will find an eye icon. Clicking on the icon will activate watch mode which will re-run the test when you make changes to it. You can watch a number of tests at the same time be clicking the eye icon next to each one or all tests by clicking the eye icon at the top of the sidebar. If you are using VS Code then you can easily open your test by clicking on the file icon next to the eye icon. This will open your test in VS Code right at the line of code that you clicked on.

Docker 和 GitHub 代码空间

¥Docker & GitHub Codespaces

对于 Docker 和 GitHub Codespaces 环境，你可以在浏览器中运行 UI 模式。为了使端点可以在容器外部访问，需要将其绑定到 0.0.0.0 接口：

¥For Docker and GitHub Codespaces environments, you can run UI mode in the browser. In order for an endpoint to be accessible outside of the container, it needs to be bound to the 0.0.0.0 interface:

npx playwright test --ui-host=0.0.0.0

对于 GitHub Codespaces，端口为 自动转发，因此你可以通过单击终端中的链接在浏览器中打开 UI 模式。

¥In the case of GitHub Codespaces, the port gets forwarded automatically, so you can open UI mode in the browser by clicking on the link in the terminal.

要拥有静态端口，你可以传递 --ui-port 标志：

¥To have a static port, you can pass the --ui-port flag:

npx playwright test --ui-port=8080 --ui-host=0.0.0.0

注意

请注意，当指定 --ui-host=0.0.0.0 标志、带有跟踪的 UI 模式时，可以从网络内的其他计算机访问密码和密钥。对于 GitHub Codespaces，默认情况下只能从你的账户访问端口。

¥Be aware that when specifying the --ui-host=0.0.0.0 flag, UI Mode with your traces, the passwords and secrets is accessible from other machines inside your network. In the case of GitHub Codespaces, the ports are only accessible from your account by default.