运行和调试测试
介绍
🌐 Introduction
使用 Playwright，你可以运行单个测试、一组测试或所有测试。测试可以使用 --project 标志在一个浏览器或多个浏览器上运行。测试默认并行运行并以无头模式执行，这意味着运行测试时不会打开浏览器窗口，结果会显示在终端中。你可以使用 --headed CLI 参数以有头模式运行测试，或者使用 --ui 标志在 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.
你将学习
运行测试
🌐 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 模式 运行测试，以获得更好的开发者体验，在该模式下，你可以轻松浏览测试的每一步，并直观地看到每一步之前、期间和之后的发生情况。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
要以有界面模式运行测试，请使用 --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 的文件，只需将这些关键字传递给命令行即可。
🌐 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 提供了 UI 模式，你可以轻松地逐步执行测试的每一步，查看日志、错误、网络请求、检查 DOM 快照等。你还可以使用 Playwright 检查器，它允许你逐步执行 Playwright API 调用，查看它们的调试日志，并探索 定位器。
🌐 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 模式调试你的测试，以获得更好的开发体验，在这里你可以轻松地逐步查看测试的每一步，并直观地看到每一步之前、期间和之后发生的情况。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 测试命令并加上 --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.
要调试一个测试文件，请运行 Playwright 测试命令，并在命令中加入要调试的测试文件名，后面加上 --debug 标志。
🌐 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