vscode怎么调试puppeteer vscode运行自动化测试

调试 puppeteer 脚本在 vscode 中的关键在于配置调试环境和理解运行机制。1. 配置 launch.json 文件，使用 pwa-node 类型实现断点调试，根据脚本语言选择 ts-node 或 node 执行器；2. 设置 puppeteer 启动参数，关闭无头模式（headless: false）并开启开发者工具（devtools: true），便于观察页面变化和调试；3. 结合 mocha 或 jest 等测试框架组织自动化测试代码，并通过 vscode 调试器实现断点调试与测试报告输出；4. 注意等待逻辑处理，使用 page.waitforselector() 或 page.goto() 的 waituntil 和 timeout 参数确保元素加载完成，避免因异步加载导致的失败。这些步骤能帮助你高效稳定地调试 puppeteer 自动化脚本。

调试 Puppeteer 脚本在 VSCode 中其实不难，关键在于配置好调试环境和理解 Puppeteer 的运行机制。Puppeteer 是一个控制无头 Chrome 或 Chromium 的 Node.js 库，常用于自动化测试、页面截图、爬虫等任务。下面我们就从几个实用角度出发，讲讲怎么在 VSCode 里调试 Puppeteer，并运行自动化测试。

配置 launch.json 实现断点调试

VSCode 的调试功能很强大，要调试 Puppeteer 脚本，第一步就是配置 launch.json 文件。

• 打开你的项目文件夹，在 .vscode 目录下创建或编辑 launch.json
• 添加一个调试配置项，类型选 pwa-node（推荐使用 Microsoft 的 JS debugger）

示例配置如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",
      "request": "launch",
      "name": "Launch Puppeteer Script",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node",
      "runtimeArgs": ["${workspaceFolder}/your-script.ts"],
      "restart": true,
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

如果你用的是 JavaScript，可以把 ts-node 换成 node，并指向 .js 文件。

这样配置后，你就可以在代码中加断点，点击“开始调试”按钮运行脚本了。

设置 puppeteer 启动参数让调试更方便

默认情况下，Puppeteer 是以无头模式运行的，看不到浏览器界面，这对调试不太友好。我们可以手动关闭无头模式，看到浏览器操作过程。

在启动 Puppeteer 时加上以下参数：

const browser = await puppeteer.launch({
  headless: false, // 显示浏览器界面
  slowMo: 50,      // 放慢操作速度，方便观察
});

这两个参数非常实用，特别是调试过程中，能看到页面变化会让你更容易发现哪里出错了。

另外，如果你想保留浏览器上下文，比如调试登录状态，可以设置 devtools: true 来打开开发者工具：

LuckyCola工具库

LuckyCola工具库是您工作学习的智能助手，提供一系列AI驱动的工具，旨在为您的生活带来便利与高效。

133

查看详情

const browser = await puppeteer.launch({
  headless: false,
  devtools: true
});

使用 Mocha 或 Jest 做自动化测试

如果你不只是想跑个脚本，而是要做完整的自动化测试，建议结合测试框架来组织代码。

比如使用 Mocha：

1. 安装依赖：npm install mocha puppeteer --save-dev
2. 创建测试文件，例如 test/example.spec.js
3. 编写测试用例：

const puppeteer = require('puppeteer');

describe('Google Search Test', () => {
  let browser;
  let page;

  before(async () => {
    browser = await puppeteer.launch({ headless: false });
    page = await browser.newPage();
  });

  after(async () => {
    await browser.close();
  });

  it('should search and get results', async () => {
    await page.goto('https://google.com');
    await page.type('input[name=q]', 'puppeteer test');
    await page.keyboard.press('Enter');
    await page.waitForNavigation();
    const title = await page.title();
    console.log(title);
  });
});

然后在 package.json 中添加启动命令：

"scripts": {
  "test": "mocha"
}

再配合 VSCode 的调试器，就能实现断点调试 + 测试报告输出，非常适合做 UI 自动化测试。

小贴士：别忘了等待和超时处理

Puppeteer 默认不会等待元素加载完成，所以经常会出现找不到元素的问题。记得多用 page.waitForSelector() 或 page.waitForFunction()。

比如：

await page.waitForSelector('#login-button');
await page.click('#login-button');

如果页面加载慢，还可以适当增加等待时间：

await page.goto('https://example.com', { waitUntil: 'networkidle2', timeout: 30000 });

这些细节处理不好，很容易让你的测试脚本失败，特别是在网络不稳定或页面异步加载较多的时候。

基本上就这些。调试 Puppeteer 不复杂，但有些地方容易忽略，尤其是等待逻辑和浏览器显示模式。只要配置好调试器，合理使用等待方法，自动化测试也能跑得又稳又快。

以上就是vscode怎么调试puppeteer vscode运行自动化测试的详细内容，更多请关注php中文网其它相关文章！