Skip to main content

入门 - 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:

入门​

¥Getting Started

安装和设置​

¥Installation & Setup

  1. 安装扩展程序：在 VS Code 中打开扩展程序视图（Ctrl+Shift+X 或 Cmd+Shift+X）并搜索 "Playwright"。安装 Microsoft 官方扩展。

    ¥Install the Extension: Open the Extensions view in VS Code (Ctrl+Shift+X or Cmd+Shift+X) and search for "Playwright". Install the official extension from Microsoft.

  1. 安装 Playwright：扩展程序安装完成后，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P）并运行测试：安装 Playwright 命令。

    ¥Install Playwright: Once the extension is installed, open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and run the Test: Install Playwright command.

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

    ¥Select Browsers: Choose the browsers you want for your tests (e.g., Chromium, Firefox, WebKit). You can also add a GitHub Actions workflow to run tests in CI. These settings can be changed later in your playwright.config.ts file.

打开测试侧边栏​

¥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

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

    ¥Run a Single Test: Click the green "play" icon next to any test to run it. The play button will change to a green checkmark if the test passes or a red X if the test fails. You'll be able to see how long the test took to run displayed next to the test name. Additionally, the Test Results panel will automatically open at the bottom of VS Code, showing a summary of the test execution including how many tests ran, how many passed, failed, or were skipped, along with the total execution time.

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

    ¥Run All Tests: You can run all tests at different levels. Click the play icon next to a specific test file to run all tests within that file, or click the play icon at the very top of the Test Explorer to run all tests across your entire project.

  • 在多个浏览器上运行：在 Playwright 侧边栏中，勾选你要测试的项目（浏览器）对应的复选框。Playwright 中的项目代表不同的浏览器配置。 - 每个项目通常对应一个特定的浏览器（例如 Chromium、Firefox 或 WebKit），并具有其自己的设置，例如视口大小、设备模拟或其他特定于浏览器的选项。运行测试时，它将在所有选定的项目中执行，让你可以验证应用在不同的浏览器和配置中是否一致地运行。

    ¥Run on Multiple Browsers: In the Playwright sidebar, check the boxes for the projects (browsers) you want to test against. Projects in Playwright represent different browser configurations - each project typically corresponds to a specific browser (like Chromium, Firefox, or WebKit) with its own settings such as viewport size, device emulation, or other browser-specific options. When you run a test, it will execute across all selected projects, allowing you to verify your application works consistently across different browsers and configurations.

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

    ¥Show Browser: To watch your tests execute in a live browser window, enable the Show Browser option in the sidebar. Disable it to run in headless mode (where tests run in the background without opening a visible browser window).

调试测试​

¥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.

  • 使用断点：通过点击行号旁边的空白处来设置断点。右键单击测试并选择“调试测试”。测试将在断点处暂停，以便你检查变量并单步执行代码。

    ¥Using Breakpoints: Set a breakpoint by clicking in the gutter next to a line number. Right-click the test and select Debug Test. The test will pause at your breakpoint, allowing you to inspect variables and step through the code.

  • 实时调试：启用“显示浏览器”后，点击代码中的定位器。Playwright 将在浏览器中高亮显示相应的元素，方便你验证定位器。

    ¥Live Debugging: With Show Browsers enabled, click on a locator in your code. Playwright will highlight the corresponding element in the browser, making it easy to verify locators.

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

    ¥Viewing Error Messages: If a test fails, the extension displays detailed error messages, including the expected vs. received values and a full call log, directly in the editor.

  • 修复 AI:当测试失败时，点击错误旁边的闪烁图标，即可从 Copilot 获取 AI 支持的修复建议。Copilot 会分析错误并建议修改代码以解决问题。

    ¥Fix with AI: When a test fails, click the sparkle icon next to the error to get an AI-powered fix suggestion from Copilot. Copilot analyzes the error and suggests a code change to resolve the issue.

  • 使用跟踪查看器调试：要进行全面调试，请在 Playwright 侧边栏中启用“显示跟踪查看器”选项。测试完成后，将自动打开详细的跟踪信息，为你提供测试执行的完整时间表。跟踪查看器在以下情况下特别有用：

    ¥Debugging with Trace Viewer: For comprehensive debugging, enable the Show Trace Viewer option in the Playwright sidebar. When your test finishes, a detailed trace will automatically open, providing you with a complete timeline of your test execution. The trace viewer is particularly useful for:

  • 分步分析：使用精确的时间戳导航测试执行的每个操作

    ¥Step-by-step analysis: Navigate through each action your test performed with precise timestamps

  • DOM 检查：在测试执行期间的任何时间点查看 DOM 快照，以准确查看页面的外观。

    ¥DOM inspection: View DOM snapshots at any point during test execution to see exactly what the page looked like

  • 网络监控：检查测试期间发生的所有网络请求和响应

    ¥Network monitoring: Examine all network requests and responses that occurred during the test

  • 控制台日志：从浏览器访问所有控制台消息和错误

    ¥Console logs: Access all console messages and errors from the browser

  • 源代码映射：直接跳转到执行每个操作的源代码

    ¥Source mapping: Jump directly to the source code that executed each action

  • 可视化调试：查看屏幕截图并了解用户在每个步骤中看到的内容。

    ¥Visual debugging: See screenshots and understand what the user would have seen at each step

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

¥The trace viewer is especially valuable when debugging flaky tests or understanding complex user interactions.

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

¥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 将自动生成测试代码。你还可以从录制工具栏生成断言。

    ¥Record a New Test: Click Record new in the sidebar. A browser window will open. As you interact with the page, Playwright will automatically generate the test code. You can also generate assertions from the recording toolbar.

  • 在光标处录制：将光标放在现有测试中，然后点击“在光标处记录”以在该特定位置添加新操作。

    ¥Record at Cursor: Place your cursor inside an existing test and click Record at cursor to add new actions at that specific point.

  • 选择定位器：使用“拾取定位器”工具点击打开的浏览器中的任意元素。Playwright 将确定最佳定位器并将其复制到剪贴板，以便粘贴到你的代码中。

    ¥Pick a Locator: Use the Pick locator tool to click on any element in the opened browser. Playwright will determine the best locator and copy it to your clipboard, ready to be pasted into your code.

要了解更多信息，请参阅我们的 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
运行测试点击测试旁边的 "play" 图标
调试测试设置断点，右键单击测试 → Debug Test
显示实时浏览器在 Playwright 侧边栏中启用 Show Browsers
记录新测试点击 Playwright 侧边栏中的 Record new
选择定位器点击 Playwright 侧边栏中的 Pick locator
查看测试跟踪在 Playwright 侧边栏中启用 Show Trace Viewer

下一步是什么​

¥What's Next