跳转到主要内容

入门指南 - VS Code

简介​

Playwright VS Code 扩展将 Playwright Test 的强大功能直接带入你的编辑器，让你能够通过无缝的 UI 驱动体验运行、调试和生成测试。本指南将引导你设置扩展并使用其核心功能来提升你的端到端测试工作流程。

先决条件​

开始之前，请确保已安装以下内容：

入门​

安装与设置​

  1. 安装扩展：在 VS Code 中打开扩展视图（Ctrl+Shift+X 或 Cmd+Shift+X），然后搜索“Playwright”。安装 Microsoft 官方扩展。
  1. 安装 Playwright：扩展安装完成后，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）并运行 Test: Install Playwright 命令。
  1. 选择浏览器：选择你想要用于测试的浏览器（例如，Chromium、Firefox、WebKit）。你还可以添加 GitHub Actions 工作流程以在 CI 中运行测试。这些设置以后可以在你的 playwright.config.ts 文件中更改。

打开测试侧边栏​

点击 VS Code 活动栏中的测试图标以打开测试资源管理器。在这里，你将找到你的测试，以及用于管理项目、工具和设置的 Playwright 侧边栏。

核心功能​

运行你的测试​

  • 运行单个测试：点击任何测试旁边的绿色“播放”图标即可运行它。如果测试通过，播放按钮将变为绿色对勾，如果测试失败，则变为红色叉。你将能够看到测试运行的时长显示在测试名称旁边。此外，测试结果面板将自动在 VS Code 底部打开，显示测试执行的摘要，包括运行了多少测试，有多少通过、失败或跳过，以及总执行时间。
  • 运行所有测试：你可以在不同级别运行所有测试。点击特定测试文件旁边的播放图标可运行该文件中的所有测试，或者点击测试资源管理器最顶部的播放图标可运行整个项目中的所有测试。
  • 在多个浏览器上运行：在 Playwright 侧边栏中，勾选你想要测试的项目的复选框（浏览器）。Playwright 中的项目代表不同的浏览器配置——每个项目通常对应一个特定的浏览器（如 Chromium、Firefox 或 WebKit），并有其自己的设置，例如视口大小、设备模拟或其他浏览器特定的选项。当你运行测试时，它将在所有选定的项目中执行，让你能够验证你的应用程序在不同浏览器和配置下都能正常工作。
  • 显示浏览器：要观看你的测试在实时浏览器窗口中执行，请在侧边栏中启用显示浏览器选项。禁用它可在无头模式下运行（测试在后台运行，不打开可见的浏览器窗口）。

调试你的测试​

VS Code 扩展提供了强大的调试工具，可帮助你识别和修复测试中的问题。你可以设置断点、检查变量、查看详细的错误消息、获取 AI 驱动的建议来解决测试失败，并使用全面的跟踪查看器逐步分析测试执行。

  • 使用断点：通过点击行号旁边的边槽来设置断点。右键点击测试并选择调试测试。测试将在你的断点处暂停，让你能够检查变量并单步执行代码。
  • 实时调试：启用显示浏览器后，点击代码中的定位器。Playwright 将在浏览器中高亮显示相应的元素，从而轻松验证定位器。
  • 查看错误消息：如果测试失败，扩展会在编辑器中直接显示详细的错误消息，包括预期值与实际值以及完整的调用日志。
  • 使用 AI 修复：当测试失败时，点击错误旁边的星形图标，从 Copilot 获取 AI 驱动的修复建议。Copilot 会分析错误并建议代码更改以解决问题。
  • 使用跟踪查看器进行调试：为了进行全面的调试，请在 Playwright 侧边栏中启用显示跟踪查看器选项。当你的测试完成后，详细的跟踪将自动打开，为你提供测试执行的完整时间线。跟踪查看器特别适用于：
  • 逐步分析：以精确的时间戳导航你测试执行的每个动作
  • DOM 检查：在测试执行期间的任何时间点查看 DOM 快照，以准确了解页面显示情况
  • 网络监控：检查测试期间发生的所有网络请求和响应
  • 控制台日志：访问浏览器中的所有控制台消息和错误
  • 源映射：直接跳转到执行每个动作的源代码
  • 可视化调试：查看屏幕截图并了解用户在每个步骤中会看到什么

跟踪查看器在调试不稳定的测试或理解复杂的用户交互时特别有价值。

要了解更多信息，请参阅我们的跟踪查看器指南。

使用 CodeGen 生成测试​

CodeGen 是 Playwright 强大的测试生成工具，它通过记录你与网页的交互来自动创建测试代码。你无需从头开始编写测试，只需浏览你的应用程序，CodeGen 就会捕获你的操作并将其转换为可靠的测试代码，其中包含适当的定位器和断言。

  • 录制新测试：点击侧边栏中的录制新测试。一个浏览器窗口将打开。当你与页面交互时，Playwright 将自动生成测试代码。你还可以从录制工具栏生成断言。
  • 在光标处录制：将光标放在现有测试中，然后点击在光标处录制以在该特定点添加新操作。
  • 选择定位器：使用选择定位器工具点击打开的浏览器中的任何元素。Playwright 将确定最佳定位器并将其复制到剪贴板，以便粘贴到你的代码中。

要了解更多信息，请参阅我们的CodeGen 指南。

高级功能​

项目依赖​

使用项目依赖定义在其他测试之前运行的设置测试。例如，你可以创建一个先运行的登录测试，然后将该认证状态重用于多个测试，而无需为每个测试重新登录。在 VS Code 中，你可以在测试资源管理器中看到这些设置测试，并在需要时独立运行它们。

要了解更多信息，请参阅我们的项目依赖指南。

全局设置​

对于需要在所有测试之前仅运行一次的任务（例如初始化数据库），请使用全局设置。你可以从 Playwright 侧边栏手动触发全局设置和拆卸。

多重配置​

如果你有多个 playwright.config.ts 文件，你可以使用 Playwright 侧边栏中的齿轮图标在它们之间切换。这使你可以轻松使用不同的测试套件或环境。

快速参考​

操作如何在 VS Code 中完成
安装 Playwright命令面板 → Test: Install Playwright
运行测试点击测试旁边的“播放”图标
调试测试设置断点，右键点击测试 → Debug Test
显示实时浏览器在 Playwright 侧边栏中启用 Show Browsers
录制新测试点击 Playwright 侧边栏中的 Record new
选择定位器点击 Playwright 侧边栏中的 Pick locator
查看测试追踪在 Playwright 侧边栏中启用 Show Trace Viewer

接下来​