用户界面模式
介绍
🌐 Introduction
UI 模式让你以时光旅行的体验来探索、运行和调试测试，同时提供观看模式。所有测试文件都会显示在测试侧边栏中，允许你展开每个文件和 describe 块，单独运行、查看、观察和调试每个测试。可以按名称、项目（在你的 playwright.config 文件中设置）、@标签，或按执行状态 通过、失败 和 跳过 来筛选测试。查看测试的完整追踪，并在每个操作上来回悬停，以查看每个步骤期间发生了什么。你还可以将特定时刻的 DOM 快照弹出到单独窗口，以获得更好的调试体验。
🌐 UI Mode lets you explore, run, and debug tests with a time travel experience complete with a watch mode. All test files are displayed in the testing sidebar, allowing you to expand each file and describe block to individually run, view, watch, and debug each test. Filter tests by name, projects (set in your playwright.config file), @tag, or by the execution status of passed, failed, and skipped. See a full trace of your tests and hover back and forward over each action to see what was happening during each step. You can also pop out the DOM snapshot of a given moment into 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 文件中设置的 项目 进行筛选。如果你使用项目依赖，请确保在运行依赖它们的测试之前先运行设置测试。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 快照弹出到独立窗口，以获得更好的调试体验。然后，你可以打开浏览器开发者工具，检查 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 快照上，以查看在悬停时高亮显示的每个元素的定位器。点击某个元素即可将该定位器添加到定位器操作台。你可以在操作台中修改定位器，并查看修改后的定位器是否与 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
当你将鼠标悬停在测试的每个操作上时，该操作对应的代码行会在源代码面板中高亮显示。"在 VSCode 中打开"按钮位于该部分的右上角。点击该按钮后，它会在 VS Code 中打开你的测试，并直接跳转到你点击的代码行。
🌐 As you hover over each action of your test the line of code for that action is highlighted in the source panel. The button "Open in VSCode" is at the top-right of this section. Upon clicking the button, it will open your test in VS Code right at the line of code that you clicked on.
调用
🌐 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
在侧边栏每个测试的名称旁，你会看到一个眼睛图标。点击该图标将激活观察模式，当你对测试进行更改时，它会重新运行该测试。你可以同时观察多个测试，只需点击每个测试旁边的眼睛图标，或者点击侧边栏顶部的眼睛图标来观察所有测试。
🌐 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.
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，端口默认情况下只对你的账户可访问。