Playwright 开发环境配置

Playwright 开发环境配置指南（2025 年最新版）

Playwright 的开发环境配置非常简单，尤其推荐使用 Visual Studio Code (VS Code) 作为 IDE，因为它有官方扩展支持，能提供测试运行、调试、录制、Trace 查看等一体化体验。以下是完整步骤，适用于 Node.js/TypeScript（最主流）或 Python 版本。

1. 前提准备

• 安装 VS Code：
• 从官网 https://code.visualstudio.com/ 下载并安装最新版。
• 建议安装中文语言包：扩展市场搜索 “Chinese (Simplified) Language Pack for Visual Studio Code” 并安装。
• 安装 Node.js（Node.js 版推荐）：
• 下载 LTS 版（当前推荐 20.x 或更高）：https://nodejs.org/
• 验证：打开终端运行 node -v 和 npm -v，看到版本号即可。
• Python 版（可选）：确保 Python 3.8+ 已安装。

2. 安装 Playwright VS Code 扩展（强烈推荐）

这是最便捷的方式，能直接在 VS Code 中完成安装、配置和浏览器下载。

1. 打开 VS Code → 左侧扩展图标（Ctrl+Shift+X）。
2. 搜索 “Playwright” → 安装 Microsoft 官方的 “Playwright Test for VS Code” 扩展（最新版支持 v1.57+）。
3. 安装完成后，重载 VS Code。

3. 创建并初始化 Playwright 项目

方式一：通过 VS Code 扩展（最简单，新手首选）

1. 打开命令面板（Ctrl+Shift+P）。
2. 输入并运行 “Test: Install Playwright” 或 “Playwright: Install Playwright”。
3. 跟随提示：

• 选择语言：JavaScript 或 TypeScript（推荐 TypeScript）。
• 选择浏览器：Chromium、Firefox、WebKit（可多选）。
• 是否添加示例测试：Yes。
• 是否添加 GitHub Actions CI 配置：可选。

1. 扩展会自动：

• 创建 playwright.config.ts 配置文件。
• 创建 tests/ 示例测试目录。
• 下载浏览器驱动（npx playwright install）。
• 生成项目结构。

方式二：命令行手动初始化

# 创建项目目录
mkdir my-playwright-project && cd my-playwright-project

# 初始化 Node.js 项目
npm init -y

# 一键安装 Playwright Test 并初始化
npm init playwright@latest

• 跟随提示选择浏览器、语言等。
• 完成后运行 npx playwright install 下载浏览器。

Python 版：

# 创建虚拟环境（推荐）
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

pip install playwright
playwright install  # 下载浏览器

4. 关键配置（playwright.config.ts）

初始化后会自动生成配置文件，可根据需要修改：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',      // 测试目录
  timeout: 30000,          // 单测试超时
  retries: 2,              // 失败重试次数
  workers: 4,              // 并行数
  reporter: 'html',        // 报告格式（运行后生成 html 报告）
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

5. 常用开发命令

• npx playwright test：运行所有测试。
• npx playwright test --ui：启动 UI 模式（可视化运行测试）。
• npx playwright codegen：录制操作生成代码（推荐：npx playwright codegen https://example.com）。
• npx playwright show-report：查看 HTML 报告。
• npx playwright test --headed：有头模式（显示浏览器）。

6. VS Code 扩展高级功能

• 测试浏览器：左侧活动栏点击 “Testing” 图标 → Playwright 面板。
• 查看所有测试用例。
• 直接点击运行/调试单个测试。
• 支持多项目切换（gear 图标）。
• 显示浏览器（Show Browsers）：高亮 locator 元素。
• 调试：在代码设置断点 → 右键测试 → “Debug Test”。
• Trace 查看：失败测试自动捕获 Trace，可回放操作。

7. 常见问题与最佳实践

• 国内网络慢：浏览器下载失败时，可设置代理或重试 npx playwright install。
• 更新：npm i -D @playwright/test@latest + npx playwright install。
• 推荐扩展：ESLint、Prettier（代码格式化）。
• 生产建议：使用 TypeScript + VS Code 扩展 + GitHub Actions CI。

配置完成后，你可以在 VS Code 中直接录制、编写、运行和调试测试，效率极高！如果需要 Python 具体示例或某个功能的详细代码，随时告诉我。