使用Puppeteer实现浏览器自动化教程

Puppeteer 是一个 Node.js 库，通过 DevTools 协议为 Chromium 或 Chrome 提供高级 API 控制。默认运行在无头模式，但可配置为有头模式。

Puppeteer文档：https://zhaoqize.github.io/puppeteer-api-zh_CN/#/

Puppeteer 可以自动化几乎所有手动操作浏览器的功能，如：

生成页面 PDF。
抓取单页应用（SPA）并生成预渲染内容（SSR）。
自动提交表单、进行 UI 测试、模拟键盘输入等。
创建自动化测试环境，支持最新版本的 Chrome。
捕获并分析网站性能问题。
测试浏览器扩展。

安装

带浏览器的版本

npm i puppeteer

此版本自带 Chromium 浏览器，约 300 MB 大小。2024.1 更新：默认不再自动安装 Chromium。安装后如需浏览器，执行：

node node_modules/puppeteer/install.js

不带浏览器的版本

如果电脑已有 Chrome，使用以下命令：

npm i puppeteer-core

基础用法

截图示例

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.setViewport({ width: 1920, height: 800 });
    await page.goto('https://youdata.163.com');
    await page.screenshot({ path: './files/capture.png', fullPage: true });
    const [element] = await page.$x('/html/body/section[4]/div/div[2]');
    await element.screenshot({ path: './files/element.png' });
    await browser.close();
})();

模拟用户登录

(async () => {
    const browser = await puppeteer.launch({ headless: false, slowMo: 100 });
    const page = await browser.newPage();
    await page.goto('https://demo.youdata.com');
    await (await page.$('#uniqueId')).type('admin@admin.com', { delay: 20 });
    await (await page.$('#password')).type('123456');
    const [response] = await Promise.all([
        page.waitForNavigation(),
        (await page.$('#btn-ok')).click(),
    ]);
    console.log('admin 登录成功');
    await browser.close();
})();

扩展功能

请求拦截：可以设置拦截图片、媒体和字体请求。
处理 WebSocket 响应：通过 Chrome DevTools Protocol (CDP) 获取 WebSocket 数据。
植入 JavaScript：可以在页面中执行自定义脚本。
多帧操作：Frame 是浏览上下文的基本单位，可以嵌套多级。

其他注意事项

可以模拟不同设备。
支持文件上传和下载。

通过 Puppeteer，你可以实现高度定制化的自动化操作，是前端测试和爬虫的一大利器。

安装