在 VS Code 中使用 Playwright 完成自动化测试编写和调试

在 VS Code 中使用 Playwright 编写和调试自动化测试，请按以下步骤操作：

---

1. 环境准备

1. 安装 Node.js：

   • 下载 Node.js LTS 版本
   • 验证安装

     node -v
     npm -v

   • 环境配置：

     打开Mac 终端，配置全局环境变量

     vim .bash_profile

     添加一行以下代码，（Mac的node，npm可执行文件都在/usr/local/bin/目录下）【按英文 i 进入编辑模式，按 esc 键退出编辑模式】

     PATH=$PATH:/usr/local/bin/

     :wq //保存并退出

     重新打开终端，输入node，就会进入node环境

2. 创建项目目录：

   mkdir playwright-tests
   cd playwright-tests
   npm init -y
   

3. 安装 Playwright：

   npm init playwright@latest
   

   • 选择 JavaScript（或 TypeScript）
   • 安装浏览器（默认全选）
   • 推荐生成示例测试文件

---

2. VS Code 配置

1. 安装扩展：

   • Playwright Test for VSCode（官方扩展）
   • Debugger for Chrome（调试备用）

2. 配置调试文件 .vscode/launch.json：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "playwright",
         "name": "Debug Tests",
         "request": "launch",
         "program": "${workspaceFolder}/node_modules/.bin/playwright",
         "args": ["test"]
       },
       {
         "type": "node",
         "request": "launch",
         "name": "Debug Current Test",
         "program": "${workspaceFolder}/node_modules/playwright/test/cli.js",
         "args": ["test", "${file}"]
       }
     ]
   }
   

---

3. 编写测试用例

1. 创建测试文件（示例 tests/demo.spec.js）：

   const { test, expect } = require('@playwright/test');
   
   test('百度搜索测试', async ({ page }) => {
     await page.goto('https://www.baidu.com');
     await page.fill('input[name="wd"]', 'Playwright');
     await page.press('input[name="wd"]', 'Enter');
     await expect(page).toHaveTitle(/Playwright/);
   });
   
   test('截图测试', async ({ page }) => {
     await page.goto('https://example.com');
     await page.screenshot({ path: 'example.png' });
     expect(await page.title()).toBe('Example Domain');
   });
   

---

4. 运行与调试

方式一：使用 VS Code 调试器

1. 打开测试文件（如 demo.spec.js）
2. 设置断点：点击行号左侧
3. 按 F5 启动调试（选择 Debug Current Test 调试当前文件）

方式二：使用 Playwright 扩展

1. 打开 测试侧边栏（VS Code 左侧活动栏的烧杯图标）
2. 点击测试用例旁的 运行/调试 按钮

方式三：命令行运行

• 所有测试：

  npx playwright test
  

• 单个文件：

  npx playwright test tests/demo.spec.js
  

• 生成报告：

  npx playwright show-report
  

---

5. 高级调试技巧

1. 浏览器开发者工具：

   • 在测试中添加 await page.pause();，运行时会暂停并打开浏览器开发者工具

   test('调试测试', async ({ page }) => {
     await page.goto('https://github.com');
     await page.pause(); // 手动操作浏览器
   });
   

2. 慢速模式：

   • 在 playwright.config.js 中设置慢速执行：

     use: {
       launchOptions: { slowMo: 1000 } // 每一步延迟1秒
     }
     

3. 视频录制：

   • 配置自动录制失败用例视频（默认已启用）：

     // playwright.config.js
     use: { video: 'retain-on-failure' }
     

---

6. 注意事项

• 浏览器路径问题：如果遇到浏览器无法启动，运行 npx playwright install 重装浏览器
• 并行测试：默认并行运行（可通过 workers 配置）
• 选择器工具：使用 Playwright 扩展中的 Pick Locator 按钮生成选择器

---

按照以上步骤，你可以在 VS Code 中高效编写、运行和调试 Playwright 测试用例。