运行和调试测试

介绍

使用 Playwright,您可以运行单个测试、一组测试或所有测试。通过使用 --project 标志,可以选择在一个浏览器或多个浏览器上运行测试。默认情况下,测试是并行运行的,并且在无头模式下执行,这意味着在运行测试时不会打开浏览器窗口,测试结果将显示在终端中。不过,您也可以使用 --headed CLI 参数以有头模式运行测试,或者使用 --ui 标志在 【UI 模式】 下运行测试。您可以查看完整的测试跟踪,并享受更多功能,如观看模式、时间旅行调试等。

你将学到:

  • 如何从命令行运行测试

  • 如何调试测试

  • 如何打开 HTML 测试报告

运行测试

命令行

您可以使用 playwright test 命令运行测试。这将根据 playwright.config 文件中配置的浏览器运行您的测试。默认情况下,测试将在无头模式下运行,即在运行测试时不会打开浏览器窗口,测试结果将在终端中显示。

npx playwright test
image 2024 12 15 21 14 56 891

在 UI 模式下运行测试

我们强烈推荐在 【UI 模式】 下运行测试,以获得更好的开发者体验。在 UI 模式下,您可以轻松查看每一步测试的执行过程,直观地了解每一步发生的情况。UI 模式还包含许多其他功能,如定位器选择器、观看模式等。

npx playwright test --ui
image 2024 12 15 21 16 02 609

查看我们 【关于 UI 模式的详细指南】,了解更多关于它的功能。

在有头模式下运行测试

要以有头模式运行测试,请使用 --headed 标志。这将使您能够直观地看到 Playwright 是如何与网站交互的。

npx playwright test --headed

在不同的浏览器上运行测试

要指定要在特定浏览器上运行测试,请使用 --project 标志,并指定浏览器的名称。

npx playwright test --project webkit

要在多个浏览器上运行测试,使用 --project 标志多次,并指定每个浏览器的名称。

npx playwright test --project webkit --project firefox

运行特定的测试

要运行单个测试文件,传入您要运行的测试文件的名称。

npx playwright test landing-page.spec.ts

要运行来自不同目录的一组测试文件,传入您希望运行的目录名称。

npx playwright test tests/todo-page/ tests/landing-page/

要运行文件名中包含 landinglogin 的文件,只需将这些关键词传递给 CLI。

npx playwright test landing login

要运行具有特定标题的测试,使用 -g 标志,并指定测试标题。

npx playwright test -g "add a todo item"

运行最后失败的测试

要仅运行上次测试中失败的测试,首先运行您的测试,然后再次使用 --last-failed 标志运行它们。

npx playwright test --last-failed

在 VS Code 中运行测试

您可以直接从 【VS Code】 中运行测试,前提是已安装 Playwright VS Code 扩展。安装后,您只需点击测试旁边的绿色三角形运行该测试,或从测试侧边栏运行所有测试。有关更多信息,请查看我们的 【VS Code 入门指南】。

image 2024 12 15 21 23 47 667

调试测试

由于 Playwright 运行在 Node.js 中,您可以使用您选择的调试器来调试它,例如使用 console.log 或在 IDE 中调试,或者直接在 VS Code 中使用 【VS Code 扩展】 调试。Playwright 提供了 【UI 模式】,您可以轻松地走过每一步测试,查看日志、错误、网络请求,检查 DOM 快照等。您还可以使用 【Playwright Inspector】,它允许您逐步执行 Playwright API 调用,查看调试日志并探索 【定位器】。

在 UI 模式下调试测试

我们强烈推荐在 【UI 模式】下调试测试,以获得更好的开发者体验,您可以轻松查看每一步测试的执行情况,直观了解每一步发生的事情。UI 模式还包含其他许多功能,例如定位器选择器、观看模式等。

npx playwright test --ui
image 2024 12 15 21 25 53 214

在调试时,你可以使用 “选择定位器” 按钮选择页面上的元素,并查看 Playwright 用来定位该元素的定位器。你还可以在定位器游乐场中编辑定位器,并实时查看它在浏览器窗口中的高亮显示。使用 “复制定位器” 按钮将定位器复制到剪贴板,然后将其粘贴到你的测试代码中。

image 2024 12 15 21 26 44 932

查看我们 【关于 UI 模式的详细指南】,了解更多关于其功能的信息。

使用 Playwright Inspector 调试测试

要调试所有测试,运行 Playwright 测试命令,后跟 --debug 标志。

npx playwright test --debug
image 2024 12 15 21 29 06 101

此命令将打开一个浏览器窗口以及 Playwright Inspector。您可以使用 Inspector 顶部的步进按钮逐步执行测试,或者按下播放按钮从头到尾运行测试。测试完成后,浏览器窗口将关闭。

要调试单个测试文件,请运行 Playwright 测试命令并在文件名后加上 --debug 标志。

npx playwright test example.spec.ts --debug

要调试特定测试,从定义 test(.. 的行号开始,添加冒号和行号,后跟 --debug 标志。

npx playwright test example.spec.ts:10 --debug

在调试时,您可以使用 Playwright Inspector 中的 Pick Locator 按钮选择页面上的元素,并查看 Playwright 用来定位该元素的定位器。您还可以编辑定位器,并查看浏览器窗口中元素的实时高亮显示。使用 Copy Locator 按钮将定位器复制到剪贴板,然后粘贴到测试中。

image 2024 12 15 21 31 02 569

查看我们的 【调试指南】,了解如何使用 【VS Code 调试器】、UI 模式和 【Playwright Inspector】 进行调试,以及如何使用 【浏览器开发者工具】 进行调试。

测试报告

HTML Reporter 显示完整的测试报告,允许您按浏览器、已通过的测试、失败的测试、跳过的测试和不稳定的测试进行过滤。默认情况下,如果某些测试失败,HTML 报告会自动打开,否则您可以使用以下命令打开它。

npx playwright show-report
image 2024 12 15 21 32 44 473

您可以过滤和搜索测试,并点击每个测试查看测试错误以及每一步测试的详细信息。

image 2024 12 15 21 33 08 143

接下来做什么

  • 使用 Codegen 生成测试

  • 查看测试追踪

  • 探索 UI 模式的所有功能

  • 使用 GitHub Actions 在 CI 上运行测试