Puppeteer 谷歌自动化神器教程

👉 你的一键三连是我更新的最大动力❤️！

---

---

🔽 前言

• Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

• Puppeteer API 是分层次的，反映了浏览器结构。

• Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

• 你可以在浏览器中手动执行的绝大多数操作都可以使用 Puppeteer 来完成！ 下面是一些示例：

• 生成页面 PDF。
• 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
• 自动提交表单，进行 UI 测试，键盘输入等。
• 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
• 捕获网站的 timeline trace，用来帮助分析性能问题。
• 测试浏览器扩展。

1️⃣ 安装

# 下载依赖
npm i puppeteer
# or "yarn add puppeteer"
# or "pnpm add puppeteer"

2️⃣ 使用

Puppeteer 使用起来和其他测试框架类似。你需要创建一个 Browser 实例，打开页面，然后使用 Puppeteer 的 API。

# 创建文件为 main.js
const puppeteer = require('puppeteer');

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.baidu.com/');

# 页面截屏
await page.screenshot({path: 'Fn01.png'});

# 页面保存PDF
await page.pdf({path: 'Fn02.pdf', format: 'A4'});

# 在页面中执行脚本
const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
});
console.log('返回结果:', dimensions);

await browser.close();

#在命令行中执行  node main.js

3️⃣ 默认设置

• 使用无头模式
  Puppeteer 运行 Chromium 的headless mode。如果想要使用完全版本的 Chromium，设置 ‘headless’ option 即可。

const browser = await puppeteer.launch({headless: false}); // default is true

• 运行绑定的 Chromium 版本
  默认情况下，Puppeteer 下载并使用特定版本的 Chromium 以及其 API 保证开箱即用。 如果要将 Puppeteer 与不同版本的 Chrome 或 Chromium 一起使用，在创建Browser实例时传入 Chromium 可执行文件的路径即可：

const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});

• 创建用户配置文件
  Puppeteer 会创建自己的 Chromium 用户配置文件，它会在每次运行时清理。

4️⃣ Puppeteer API 结构

注意：在上面的图表中，浅色框体内容目前不在 Puppeteer 中体现。

• Puppeteer 使用 DevTools 协议 与浏览器进行通信。
• Browser 实例可以拥有浏览器上下文。
• BrowserContext 实例定义了一个浏览会话并可拥有多个页面。
• Page 至少有一个框架：主框架。 可能还有其他框架由 iframe 或 框架标签 创建。
• frame 至少有一个执行上下文 - 默认的执行上下文 - 框架的 JavaScript 被执行。 一个框架可能有额外的与 扩展 关联的执行上下文。
• Worker 具有单一执行上下文，并且便于与 WebWorkers 进行交互。

🔼 结语

• 将npm设置为淘宝镜像：：npm config set registry https://registry.npm.taobao.org
• 查看npm镜像设置：npm config get registry

Puppeteer api 参考

博主的文章正在持续更新中，关注博主学习前端不迷路！

如果本篇文章对你有所帮助，还请客官一件四连！❤️

---