Playwright 第4章：VS Code 开发环境配置

VS Code 是 Playwright 开发的首选 IDE。Playwright 官方提供了强大的 VS Code 扩展，支持测试运行、调试、代码生成等功能，极大提升开发效率。

VS Code 扩展安装

安装 Playwright 扩展

在 VS Code 扩展市场中搜索并安装：

• 扩展名称：Playwright Test for VS Code
• 扩展 ID：ms-playwright.playwright
• 安装方式：扩展面板搜索 "Playwright" 直接安装

安装完成后，VS Code 左侧会出现测试资源管理器图标（烧瓶形状）。

验证扩展安装

扩展安装后应能看到以下功能：

# 在 VS Code 终端中检查 Playwright 版本
npx playwright --version

# 确认 @playwright/test 已安装
npm ls @playwright/test

配置 launch.json

创建 VS Code 调试配置文件 .vscode/launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Playwright Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "playwright",
        "test",
        "--config",
        "playwright.config.ts",
        "${file}"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Debug Current Test - Chromium",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "playwright",
        "test",
        "--config",
        "playwright.config.ts",
        "${file}",
        "--project=chromium"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    },
    {
      "name": "Debug with UI Mode",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npx",
      "runtimeArgs": [
        "playwright",
        "test",
        "--ui"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

注意：上述 JSON 中的 ${file} 是 VS Code 变量，在 TypeScript 模板字符串中写为 \${file}。

调试配置说明

调试测试

使用测试资源管理器

VS Code 测试资源管理器（Testing Panel）提供图形化界面：

// 在测试文件左侧会显示运行按钮
import { test, expect } from '@playwright/test';

test('登录测试', async ({ page }) => {
  // 点击行号旁边的绿色三角运行测试
  await page.goto('/login');
  await page.fill('#username', 'admin');
  await page.fill('#password', 'pass123');
  await page.click('button[type="submit"]');
  await expect(page.locator('.welcome')).toBeVisible();
});

断点调试

在 VS Code 中设置断点进行逐行调试：

1. 在代码行号左侧单击设置断点（红点）
2. 使用测试资源管理器的调试按钮（爬虫图标）
3. 测试会在断点处暂停，可检查变量和调用栈

test('购物车调试测试', async ({ page }) => {
  await page.goto('/products');

  // 在此设置断点查看页面状态
  await page.click('.add-to-cart');  // ← 设置断点

  // 继续执行
  await page.goto('/cart');
  const cartCount = await page.locator('.cart-badge').textContent();
  console.log('购物车数量:', cartCount);
});

IntelliSense 配置

Playwright 扩展自动提供代码补全和类型提示：

// 输入 page. 会自动提示可用方法
await page.goto('');     // goto() 自动补全
await page.locator('');  // locator() 自动补全
await page.fill('', ''); // fill() 自动补全

// 定位器方法自动提示
const btn = page.locator('button');
await btn.click();       // click() 自动提示
await btn.isVisible();   // isVisible() 自动提示
await btn.textContent(); // textContent() 自动提示

tsconfig.json 配置

确保 TypeScript 配置正确：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "types": ["node", "@playwright/test"]
  },
  "include": ["**/*.ts", "playwright.config.ts"]
}

测试资源管理器

测试资源管理器是 VS Code 中管理测试的核心面板：

基本功能

过滤与搜索

// 使用标签过滤测试
test.describe('用户管理', () => {
  test('创建用户 @smoke', async ({ page }) => {
    // 冒烟测试
  });

  test('删除用户 @slow', async ({ page }) => {
    // 慢速测试
  });

  test('搜索用户 @regression', async ({ page }) => {
    // 回归测试
  });
});

// 在测试资源管理器中可按标签过滤
// 点击过滤输入框输入 @smoke 仅显示冒烟测试

UI Mode 调试

Playwright 的 UI Mode 提供强大的可视化调试工具：

# 启动 UI 模式
npx playwright test --ui

UI Mode 功能：

• 时间轴视图：查看每个操作的执行时间
• DOM 快照：查看操作前后的页面状态
• 网络日志：查看所有网络请求详情
• 控制台日志：查看浏览器控制台输出
• 定位器工具：实时查找和验证定位器

常用快捷键

总结

VS Code 配合 Playwright 扩展提供了完整的测试开发体验。善用测试资源管理器可以快速运行和调试测试，IntelliSense 提高了编码效率，UI Mode 为问题排查提供了可视化手段。合理配置调试环境和快捷键，能够显著提升 Playwright 测试的开发效率。