Chrome接口调用工具入门指南：从零开始掌握自动化测试

1次阅读

共计 2760 个字符，预计需要花费 7 分钟才能阅读完成。

手动测试在 Web 开发中逐渐暴露出效率低下的问题。特别是当我们需要频繁执行重复性操作时，比如表单提交测试、页面跳转验证等，手动操作不仅耗时耗力，还容易出现人为错误。此外，现代 Web 应用越来越复杂，涉及大量的异步加载和动态内容，手动测试难以全面覆盖这些场景。

自动化测试的需求应运而生。通过编程方式控制浏览器执行测试用例，可以大幅提高测试效率、确保测试一致性，并且能够实现持续集成和持续交付（CI/CD）。

目前主流的浏览器自动化测试工具主要有三种：

Puppeteer：由 Google Chrome 团队开发，直接基于 Chrome DevTools Protocol (CDP)，提供更底层的控制能力
Selenium：历史最悠久，支持多浏览器，但配置复杂
Playwright：微软开发，支持多浏览器，API 设计现代

对于 Chrome 专属的自动化测试，Puppeteer 是最佳选择，因为它：

与 Chrome 深度集成
性能优异
API 简洁易用
社区活跃

CDP 是 Chrome 浏览器提供的一套调试协议，允许外部工具通过 WebSocket 与浏览器通信。Puppeteer 就是对 CDP 的高级封装。理解 CDP 有助于我们更好地使用 Puppeteer。

CDP 主要提供以下能力：

页面导航控制
DOM 操作
网络请求拦截
JavaScript 执行
性能分析

安装 Puppeteer 非常简单：

确保已安装 Node.js（建议版本 12+）
在项目目录下运行：

npm install puppeteer

安装过程会自动下载匹配版本的 Chromium，因此可能需要一些时间。

const puppeteer = require('puppeteer');

(async () => {
  // 启动浏览器
  const browser = await puppeteer.launch({
    headless: false, // 可视化模式，调试时建议开启
    slowMo: 50, // 减慢操作速度，方便观察
  });

  try {
    // 打开新页面
    const page = await browser.newPage();

    // 设置视口大小
    await page.setViewport({width: 1280, height: 800});

    // 导航到目标页面
    await page.goto('https://example.com');

    // 截屏
    await page.screenshot({path: 'example.png'});

    // 获取页面标题
    const title = await page.title();
    console.log(` 页面标题: ${title}`);

    // 获取 DOM 元素
    const heading = await page.$eval('h1', el => el.textContent);
    console.log(`H1 内容: ${heading}`);

  } catch (error) {console.error('发生错误:', error);
  } finally {
    // 关闭浏览器
    await browser.close();}
})();

// 在之前的代码基础上继续

// 定位到表单输入框并输入内容
await page.type('#username', 'testuser');
await page.type('#password', 'testpass');

// 点击提交按钮
await page.click('#submit');

// 等待导航完成
await page.waitForNavigation();

// 验证登录结果
const successText = await page.$eval('.welcome-message', el => el.textContent);
if (successText.includes('Welcome')) {console.log('登录成功');
} else {console.log('登录失败');
}

创建和销毁浏览器实例开销很大，建议：

复用浏览器实例
使用连接池管理多个实例
合理设置超时时间

优化后的启动配置示例：

const browser = await puppeteer.launch({
  headless: true, // 生产环境使用无头模式
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-dev-shm-usage', // 避免内存问题
    '--disable-accelerated-2d-canvas',
    '--no-first-run',
    '--no-zygote',
    '--single-process', // 单进程模式
    '--disable-gpu'
  ],
  timeout: 30000 // 30 秒超时
});

可以拦截不必要的请求以提升性能：

await page.setRequestInterception(true);

page.on('request', (request) => {
  // 拦截图片请求
  if (request.resourceType() === 'image') {request.abort();
  } else {request.continue();
  }
});

Puppeteer 默认会强制执行同源策略。解决方法：

启动时添加参数：

args: ['--disable-web-security']

或者使用代理中间件

始终使用 async/await 处理异步操作
为关键操作添加超时处理
使用 Promise.all 处理并行任务

示例：

try {
  await Promise.all([page.waitForSelector('#element1', { timeout: 5000}),
    page.waitForSelector('#element2', { timeout: 5000}),
  ]);
} catch (error) {console.error('元素加载超时');
}