运行和调试测试
介绍
¥Introduction
使用 Playwright，你可以运行单个测试、一组测试或所有测试。使用 --project 标志可以在一个浏览器或多个浏览器上运行测试。默认情况下，测试是并行运行的，并且以无头方式运行，这意味着运行测试时不会打开浏览器窗口，并且结果将在终端中看到。但是，你可以使用 --headed CLI 参数在 head 模式下运行测试，也可以使用 --ui 标志在 用户界面模式 中运行测试。查看测试的完整跟踪，包括监视模式、时间旅行调试等。
¥With Playwright you can run a single test, a set of tests or all tests. Tests can be run on one browser or multiple browsers by using the --project flag. Tests are run in parallel by default and are run in a headless manner, meaning no browser window will be opened while running the tests and results will be seen in the terminal. However, you can run tests in headed mode by using the --headed CLI argument, or you can run your tests in UI mode by using the --ui flag. See a full trace of your tests complete with watch mode, time travel debugging and more.
你将学习
¥You will learn
运行测试
¥Running tests
命令行
¥Command line
你可以使用 playwright test 命令运行测试。这将在 playwright.config 文件中配置的所有浏览器上运行你的测试。默认情况下，测试在无头模式下运行，这意味着运行测试时不会打开浏览器窗口，并且结果将在终端中看到。
¥You can run your tests with the playwright test command. This will run your tests on all browsers as configured in the playwright.config file. Tests run in headless mode by default meaning no browser window will be opened while running the tests and results will be seen in the terminal.
npx playwright test
在 UI 模式下运行测试
¥Run tests in UI mode
我们强烈建议你使用 用户界面模式 运行测试，以获得更好的开发者体验，你可以轻松地完成测试的每个步骤，并直观地查看每个步骤之前、期间和之后发生的情况。UI 模式还具有许多其他功能，例如定位器选择器、监视模式等。
¥We highly recommend running your tests with UI Mode for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during and after each step. UI mode also comes with many other features such as the locator picker, watch mode and more.
npx playwright test --ui
查看 或 UI 模式详细指南 以了解有关其功能的更多信息。
¥Check out or detailed guide on UI Mode to learn more about it's features.
在 Head 模式下运行测试
¥Run tests in headed mode
要在 head 模式下运行测试，请使用 --headed 标志。这将使你能够直观地看到 Playwright 如何与网站交互。
¥To run your tests in headed mode, use the --headed flag. This will give you the ability to visually see how Playwright interacts with the website.
npx playwright test --headed
在不同浏览器上运行测试
¥Run tests on different browsers
要指定要在哪个浏览器上运行测试，请使用 --project 标志，后跟浏览器名称。
¥To specify which browser you would like to run your tests on, use the --project flag followed by the name of the browser.
npx playwright test --project webkit
要指定多个浏览器来运行测试，请多次使用 --project 标志，后跟每个浏览器的名称。
¥To specify multiple browsers to run your tests on, use the --project flag multiple times followed by the name of each browser.
npx playwright test --project webkit --project firefox
运行特定测试
¥Run specific tests
要运行单个测试文件，请传入要运行的测试文件的名称。
¥To run a single test file, pass in the name of the test file that you want to run.
npx playwright test landing-page.spec.ts
要从不同目录运行一组测试文件，请传入要在其中运行测试的目录的名称。
¥To run a set of test files from different directories, pass in the names of the directories that you want to run the tests in.
npx playwright test tests/todo-page/ tests/landing-page/
要运行文件名中包含 landing 或 login 的文件，只需将这些关键字传递到 CLI 即可。
¥To run files that have landing or login in the file name, simply pass in these keywords to the CLI.
npx playwright test landing login
要运行具有特定标题的测试，请使用 -g 标志，后跟测试标题。
¥To run a test with a specific title, use the -g flag followed by the title of the test.
npx playwright test -g "add a todo item"
运行上次失败的测试
¥Run last failed tests
要仅运行上次测试运行中失败的测试，请先运行测试，然后使用 --last-failed 标志再次运行它们。
¥To run only the tests that failed in the last test run, first run your tests and then run them again with the --last-failed flag.
npx playwright test --last-failed
在 VS Code 中运行测试
¥Run tests in VS Code
可以使用 VS Code 扩展 直接从 VS Code 运行测试。安装后，你只需单击要运行的测试旁边的绿色三角形，或从测试侧边栏运行所有测试。请查看我们的 VS Code 入门 指南了解更多详细信息。
¥Tests can be run right from VS Code using the VS Code extension. Once installed you can simply click the green triangle next to the test you want to run or run all tests from the testing sidebar. Check out our Getting Started with VS Code guide for more details.
调试测试
¥Debugging tests
由于 Playwright 在 Node.js 中运行，因此你可以使用你选择的调试器来调试它，例如 使用 console.log 或在 IDE 中或直接在 VS Code 中使用 VS Code 扩展。Playwright 附带 用户界面模式，你可以轻松地完成测试的每个步骤，查看日志、错误、网络请求、检查 DOM 快照等。你还可以使用 Playwright 检查器，它允许你单步执行 Playwright API 调用、查看其调试日志并探索 locators。
¥Since Playwright runs in Node.js, you can debug it with your debugger of choice e.g. using console.log or inside your IDE or directly in VS Code with the VS Code Extension. Playwright comes with UI Mode, where you can easily walk through each step of the test, see logs, errors, network requests, inspect the DOM snapshot and more. You can also use the Playwright Inspector, which allows you to step through Playwright API calls, see their debug logs and explore locators.
在 UI 模式下调试测试
¥Debug tests in UI mode
我们强烈建议使用 用户界面模式 调试你的测试，以获得更好的开发者体验，你可以轻松地完成测试的每个步骤，并直观地查看每个步骤之前、期间和之后发生的情况。UI 模式还具有许多其他功能，例如定位器选择器、监视模式等。
¥We highly recommend debugging your tests with UI Mode for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during and after each step. UI mode also comes with many other features such as the locator picker, watch mode and more.
npx playwright test --ui
调试时，你可以使用“选择定位器”按钮选择页面上的一个元素，并查看 Playwright 用于查找该元素的定位器。你还可以在定位器在线运行中编辑定位器，并在浏览器窗口中查看它实时高亮。使用“复制定位器”按钮将定位器复制到剪贴板，然后将其粘贴到测试中。
¥While debugging you can use the Pick Locator button to select an element on the page and see the locator that Playwright would use to find that element. You can also edit the locator in the locator playground and see it highlighting live on the Browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into you test.
查看我们的 UI 模式详细指南 以了解有关其功能的更多信息。
¥Check out our detailed guide on UI Mode to learn more about it's features.
使用 Playwright Inspector 调试测试
¥Debug tests with the Playwright Inspector
要调试所有测试，请运行 Playwright test 命令，后跟 --debug 标志。
¥To debug all tests, run the Playwright test command followed by the --debug flag.
npx playwright test --debug
此命令将打开浏览器窗口以及 Playwright 检查器。你可以使用检查器顶部的逐步按钮来逐步完成测试。或者，按播放按钮从头到尾运行测试。测试完成后，浏览器窗口将关闭。
¥This command will open up a Browser window as well as the Playwright Inspector. You can use the step over button at the top of the inspector to step through your test. Or, press the play button to run your test from start to finish. Once the test has finished, the browser window will close.
要调试一个测试文件，请运行 Playwright test 命令，其中包含要调试的测试文件的名称，后跟 --debug 标志。
¥To debug one test file, run the Playwright test command with the name of the test file that you want to debug followed by the --debug flag.
npx playwright test example.spec.ts --debug
要从定义 test(.. 的行号调试特定测试，请在测试文件名末尾添加一个冒号，后跟行号，然后添加 --debug 标志。
¥To debug a specific test from the line number where the test(.. is defined, add a colon followed by the line number at the end of the test file name, followed by the --debug flag.
npx playwright test example.spec.ts:10 --debug
调试时，你可以使用“选择定位器”按钮选择页面上的一个元素，并查看 Playwright 用于查找该元素的定位器。你还可以编辑定位器并查看它在浏览器窗口中实时高亮。使用“复制定位器”按钮将定位器复制到剪贴板，然后将其粘贴到测试中。
¥While debugging you can use the Pick Locator button to select an element on the page and see the locator that Playwright would use to find that element. You can also edit the locator and see it highlighting live on the Browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into your test.
查看我们的 调试指南，了解有关使用 VS Code 调试器、UI 模式和 Playwright 检查器 进行调试以及使用 浏览器开发者工具 进行调试的更多信息。
¥Check out our debugging guide to learn more about debugging with the VS Code debugger, UI Mode and the Playwright Inspector as well as debugging with Browser Developer tools.
测试报告
¥Test reports
HTML 报告器 向你显示完整的测试报告，允许你按浏览器、通过的测试、失败的测试、跳过的测试和不稳定测试来过滤报告。默认情况下，如果某些测试失败，则会自动打开 HTML 报告，否则你可以使用以下命令打开它。
¥The HTML Reporter shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. By default, the HTML report is opened automatically if some of the tests failed, otherwise you can open it with the following command.
npx playwright show-report
你可以过滤和搜索测试，也可以单击每个测试来查看测试错误并探索测试的每个步骤。
¥You can filter and search for tests as well as click on each test to see the tests errors and explore each step of the test.
下一步是什么
¥What's next