运行和调试测试
介绍
¥Introduction
使用 Playwright，你可以运行单个测试、一组测试或所有测试。测试可以在一个或多个浏览器上运行，使用 --project 标志。测试默认以并行和无头模式运行，这意味着运行测试时不会打开浏览器窗口，结果会显示在终端中。你可以使用 --headed CLI 参数在 headed 模式下运行测试，或者使用 --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 using the --project flag. Tests run in parallel by default and in headless mode, meaning no browser window opens while running the tests and results appear in the terminal. You can run tests in headed mode using the --headed CLI argument, or run your tests in UI mode using the --ui flag to see a full trace of your tests.
你将学习
¥You will learn
运行测试
¥Running tests
命令行
¥Command line
你可以使用 playwright test 命令运行测试。这将按照 playwright.config 文件中的配置在所有浏览器上运行测试，结果将显示在终端中。测试默认以无头模式运行，这意味着运行测试时不会打开浏览器窗口。
¥You can run your tests with the playwright test command. This runs your tests on all browsers as configured in the playwright.config file, and results appear in the terminal. Tests run in headless mode by default, meaning no browser window opens while running the tests.
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 our detailed guide on UI Mode to learn more about its features.
在 Head 模式下运行测试
¥Run tests in headed mode
要在 head 模式下运行测试，请使用 --headed 标志。这使你能够直观地看到 Playwright 如何与网站交互。
¥To run your tests in headed mode, use the --headed flag. This gives 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 browser name.
npx playwright test --project webkit
要指定在多个浏览器上运行测试，请多次使用 --project 标志，后跟每个浏览器名称。
¥To specify multiple browsers to run your tests on, use the --project flag multiple times followed by each browser name.
npx playwright test --project webkit --project firefox
运行特定测试
¥Run specific tests
要运行单个测试文件，请传入要运行的测试文件名。
¥To run a single test file, pass in the test file name 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 directory names 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 中运行，你可以使用你选择的调试器进行调试，例如在 IDE 中使用 console.log，或直接在 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, 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 in the browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into your test.
查看我们的 UI 模式详细指南 以了解有关其功能的更多信息。
¥Check out our detailed guide on UI Mode to learn more about its 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 opens 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 finishes, the browser window closes.
要调试一个测试文件，请使用要调试的测试文件名和 --debug 标志运行 Playwright test 命令。
¥To debug one test file, run the Playwright test command with the test file name 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 in 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 opens automatically if some 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 test errors and explore each step of the test.
下一步是什么
¥What's next