入门 - VS Code

介绍

🌐 Introduction

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

🌐 The Playwright VS Code extension brings the power of Playwright Test directly into your editor, allowing you to run, debug, and generate tests with a seamless UI-driven experience. This guide will walk you through setting up the extension and using its core features to supercharge your end-to-end testing workflow.

先决条件

🌐 Prerequisites

开始之前，请确保已安装以下软件：

🌐 Before you begin, make sure you have the following installed:

• Node.js (LTS version recommended)
• Visual Studio Code

入门

🌐 Getting Started

安装和设置

🌐 Installation & Setup

1. 安装扩展：在 VS Code 中打开扩展视图（Ctrl+Shift+X 或 Cmd+Shift+X），然后搜索“Playwright”。安装微软官方扩展。

1. 安装 Playwright：安装扩展后，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），然后运行 Test: Install Playwright 命令。

3. 选择浏览器：选择你希望用于测试的浏览器（例如 Chromium、Firefox、WebKit）。你还可以添加 GitHub Actions 工作流程以在 CI 中运行测试。这些设置可以稍后在你的 playwright.config.ts 文件中更改。

打开测试侧边栏

🌐 Opening the Testing Sidebar

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

🌐 Click the Testing icon in the VS Code Activity Bar to open the Test Explorer. Here, you'll find your tests, as well as the Playwright sidebar for managing projects, tools, and settings.

核心功能

🌐 Core Features

运行测试

🌐 Running Your Tests

• 运行单个测试：点击任何测试旁的绿色“播放”图标即可运行该测试。如果测试通过，播放按钮会变为绿色对勾；如果测试失败，则会变为红色X。你将能够在测试名称旁看到测试运行所花的时间。此外，测试结果面板会自动在 VS Code 底部打开，显示测试执行的摘要，包括运行了多少测试、通过了多少、失败了多少或被跳过了多少，以及总执行时间。

• 运行所有测试：你可以在不同级别运行所有测试。点击特定测试文件旁的播放图标，运行该文件内的所有测试，或者点击测试资源管理器顶部的播放图标，在整个项目中运行所有测试。

• 在多浏览器上运行：在 Playwright 侧边栏中，勾选你想进行测试的项目（浏览器）。Playwright 中的项目代表不同的浏览器配置——每个项目通常对应一个特定的浏览器（如 Chromium、Firefox 或 WebKit），并拥有自己的设置，例如视口大小、设备模拟或其他浏览器特定选项。当你运行测试时，它将在所有选定的项目中执行，从而让你验证应用在不同浏览器和配置下都能保持一致运行。

• 显示浏览器：要在实时浏览器窗口中查看测试执行情况，请在侧边栏启用 显示浏览器 选项。禁用此选项可在无头模式下运行（测试在后台运行而不会打开可见的浏览器窗口）。

调试测试

🌐 Debugging Your Tests

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

🌐 The VS Code extension provides powerful debugging tools to help you identify and fix issues in your tests. You can set breakpoints, inspect variables, view detailed error messages, get AI-powered suggestions to resolve test failures, and use the comprehensive trace viewer to analyze test execution step-by-step.

• 使用断点：通过点击行号旁的边栏来设置断点。右键点击测试并选择 调试测试。测试将在断点处暂停，允许你检查变量并逐步执行代码。

  

• 实时调试：启用 显示浏览器 后，点击代码中的定位器。Playwright 会在浏览器中高亮显示对应的元素，方便验证定位器是否正确。

  

• 查看错误信息：如果测试失败，扩展会直接在编辑器中显示详细的错误信息，包括预期值与实际接收值的对比以及完整的调用日志。

• 用 AI 修复：当测试失败时，点击错误旁边的闪光图标，以获取 Copilot 提供的 AI 驱动修复建议。Copilot 会分析错误并建议相应的代码修改以解决问题。

• 使用 Trace Viewer 调试：要进行全面调试，请在 Playwright 侧边栏中启用 显示 Trace Viewer 选项。当测试完成时，详细的跟踪会自动打开，为你提供完整的测试执行时间线。Trace Viewer 尤其适用于：

  • 逐步分析：使用精确的时间戳浏览测试执行的每个操作
  • DOM 检查：在测试执行的任何时刻查看 DOM 快照，准确了解页面的实际显示情况
  • 网络监控：检查测试期间发生的所有网络请求和响应
  • 控制台日志：访问浏览器中的所有控制台消息和错误
  • 源映射：直接跳转到执行每个操作的源代码
  • 可视化调试：查看屏幕截图，了解用户在每一步会看到什么

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

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

🌐 To learn more, see our Trace Viewer guide.

使用 CodeGen 生成测试

🌐 Generating Tests with CodeGen

CodeGen 是 Playwright 强大的测试生成工具，它可以通过记录你与网页的交互来自动创建测试代码。你无需从头编写测试，只需在应用中进行操作，CodeGen 就会捕捉你的操作，并将其转换为具有正确定位器和断言的可靠测试代码。

🌐 CodeGen is Playwright's powerful test generation tool that automatically creates test code by recording your interactions with a web page. Instead of writing tests from scratch, you can simply navigate through your application while CodeGen captures your actions and converts them into reliable test code with proper locators and assertions.

• 记录新测试：在侧边栏中点击 记录新建。浏览器窗口将会打开。当你与页面交互时，Playwright 会自动生成测试代码。你也可以从录制工具栏生成断言。

• 在光标处录制：将光标放在现有测试中，然后点击 在光标处录制，在该特定位置添加新操作。
• 选择定位器：使用选择定位器工具点击已打开浏览器中的任何元素。Playwright 会自动确定最佳定位器，并将其复制到剪贴板，准备粘贴到你的代码中。

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

🌐 To learn more, see our CodeGen guide.

高级功能

🌐 Advanced Features

项目依赖

🌐 Project Dependencies

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

🌐 Use project dependencies to define setup tests that run before other tests. For example, you can create a login test that runs first, then reuse that authenticated state across multiple tests without having to log in again for each test. In VS Code, you can see these setup tests in the Test Explorer and run them independently when needed.

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

🌐 To learn more, see our Project Dependencies guide.

全局设置

🌐 Global Setup

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

🌐 For tasks that need to run only once before all tests (like seeding a database), use Global Setup. You can trigger the global setup and teardown manually from the Playwright sidebar.

多种配置

🌐 Multiple Configurations

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

🌐 If you have multiple playwright.config.ts files, you can switch between them using the gear icon in the Playwright sidebar. This allows you to easily work with different test suites or environments.

快速参考

🌐 Quick Reference

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

下一步是什么

🌐 What's Next

• 使用 Web 优先断言、页面夹具和定位器编写测试
• 在 CI 上运行你的测试
• 了解有关追踪查看器的更多信息