当前位置：首页 > 文章列表 > 文章 > 前端 > Puppeteer爬虫实战：JavaScript自动化测试教程

Puppeteer爬虫实战：JavaScript自动化测试教程

2025-12-01 15:57:48 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript自动化测试：Puppeteer爬虫实战教程》，聊聊，我们一起来看看吧！

Puppeteer是Google推出的Node.js库，通过DevTools协议控制Chrome/Chromium，支持无头或有界面模式，核心功能包括页面截图、生成PDF、爬取SPA内容、模拟用户行为、拦截网络请求及性能分析。由于现代网站多依赖JavaScript动态渲染，传统爬虫工具如axios+cheerio难以获取完整数据，而Puppeteer能真实加载JS并等待页面渲染后再提取信息，适用于复杂动态页面的抓取与自动化测试。基础使用需安装puppeteer包，通过launch启动浏览器实例，newPage创建页面，goto导航，type、click等方法模拟操作，evaluate在页面上下文中执行DOM操作并返回结果。在自动化测试中常用于端到端流程验证，如登录测试，结合Jest可实现断言与报告生成。为避免被反爬，建议设置真实User-Agent、禁用WebDriver特征、添加随机延时、使用代理IP，并结合OCR处理验证码，同时复用浏览器实例以优化资源消耗。 Puppeteer上手简单，功能强大，是JavaScript生态中自动化测试与爬虫开发的首选工具之一。

JavaScript自动化测试_Puppeteer爬虫开发

JavaScript自动化测试和爬虫开发中，Puppeteer是一个非常强大的工具。它由Google推出，是一个Node.js库，提供高阶API来通过DevTools协议控制Chrome或Chromium浏览器。无论是模拟用户操作进行自动化测试，还是抓取复杂动态渲染的网页内容，Puppeteer都能高效完成。

什么是Puppeteer？

Puppeteer默认以无头模式（headless）运行Chrome，也可以配置为有界面模式运行。它的核心能力包括：

页面截图或生成PDF
爬取SPA（单页应用）内容
模拟表单提交、键盘输入、点击等用户行为
拦截和修改网络请求
执行页面性能分析

由于现代网站大量使用JavaScript动态加载数据，传统的HTTP请求+DOM解析方式（如axios + cheerio）往往无法获取完整内容。Puppeteer能真正“打开”浏览器环境，等待JS执行完毕后再提取数据，非常适合处理这类场景。

安装与基础使用

初始化项目并安装Puppeteer：

npm init -y
npm install puppeteer

一个简单的爬虫示例：访问百度并搜索“Puppeteer”，然后获取结果标题：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  
  // 输入搜索关键词
  await page.type('#kw', 'Puppeteer');
  // 点击搜索按钮
  await page.click('#su');
  // 等待搜索结果加载
  await page.waitForSelector('#content_left');

  // 提取标题列表
  const titles = await page.evaluate(() => {
    const results = Array.from(document.querySelectorAll('#content_left .t a'));
    return results.map(a => a.innerText);
  });

  console.log(titles);
  await browser.close();
})();

自动化测试中的应用场景

Puppeteer常用于端到端（E2E）测试，验证用户真实操作流程是否正常。例如登录功能测试：

打开登录页
输入用户名密码
点击登录按钮
验证跳转或提示信息

结合测试框架如Jest，可实现自动断言和报告生成。例如：

test('用户登录成功', async () => {
  await page.goto('/login');
  await page.type('#username', 'testuser');
  await page.type('#password', '123456');
  await page.click('#login-btn');
  await page.waitForNavigation();

  const url = page.url();
  expect(url).toContain('/dashboard');
});