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 配置：可选。
4. 扩展会自动：
   • 创建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 具体示例或某个功能的详细代码，随时告诉我。