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 中完成安装、配置和浏览器下载。
- 打开 VS Code → 左侧扩展图标（Ctrl+Shift+X）。
- 搜索 “Playwright” → 安装 Microsoft 官方的 “Playwright Test for VS Code” 扩展（最新版支持 v1.57+）。
- 安装完成后，重载 VS Code。
3.创建并初始化 Playwright 项目
方式一：通过 VS Code 扩展（最简单，新手首选）
- 打开命令面板（Ctrl+Shift+P）。
- 输入并运行 “Test: Install Playwright” 或 “Playwright: Install Playwright”。
- 跟随提示：
- 选择语言：JavaScript 或 TypeScript（推荐 TypeScript）。
- 选择浏览器：Chromium、Firefox、WebKit（可多选）。
- 是否添加示例测试：Yes。
- 是否添加 GitHub Actions CI 配置：可选。
- 扩展会自动：
- 创建
playwright.config.ts配置文件。 - 创建
tests/示例测试目录。 - 下载浏览器驱动（npx playwright install）。
- 生成项目结构。
- 创建
方式二：命令行手动初始化
# 创建项目目录mkdirmy-playwright-project&&cdmy-playwright-project# 初始化 Node.js 项目npminit -y# 一键安装 Playwright Test 并初始化npminit playwright@latest- 跟随提示选择浏览器、语言等。
- 完成后运行
npx playwright install下载浏览器。
Python 版：
# 创建虚拟环境（推荐）python -m venv venvsourcevenv/bin/activate# Windows: venv\Scripts\activatepipinstallplaywright playwrightinstall# 下载浏览器4.关键配置（playwright.config.ts）
初始化后会自动生成配置文件，可根据需要修改：
import{defineConfig,devices}from'@playwright/test';exportdefaultdefineConfig({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 具体示例或某个功能的详细代码，随时告诉我。
