【JS|第23期】Puppeteer：网页自动化利器入门指南

日期：2024年8月15日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在当今的互联网时代，网页自动化已经成为许多开发者、测试人员和数据分析师的必备技能。无论是进行自动化测试、网页截图、数据爬取还是模拟用户行为，Puppeteer 都是一个强大的工具。今天，我们就来深入了解一下 Puppeteer 是什么，以及如何使用它。

二、Puppeteer 是什么？

---

Puppeteer 是一个由 Google Chrome 团队维护的 Node.js 库，它提供了一组丰富的 API 来通过 DevTools 协议控制无头版（headless）或有界面版的 Chrome 或 Chromium 浏览器。Puppeteer 默认以无头模式运行，这意味着它可以在没有图形用户界面的情况下执行浏览器操作，但也可以配置为有界面的模式。Puppeteer 的名称来源于“木偶”，暗示了它能够方便地操纵浏览器进行各种自动化任务。

Puppeteer 可以用于多种场景，包括但不限于：

• 网页截图或生成网页截图或 PDF
• 高级爬虫，用于爬取大量异步渲染内容的网页（如：单页应用程序 SPA）
• 模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试
• 捕获站点的时间线，帮助分析网站性能问题

三、运行环境

---

• Node.js 版本不能低于 v7.6.0，以支持 async/await。
• 安装 Puppeteer 时，系统会自动下载并安装最新的 ChromeDriver。

四、如何使用 Puppeteer？

---

接下来，我们将通过几个步骤来学习如何安装并使用 Puppeteer。

1、安装 Puppeteer

通过 npm 安装 Puppeteer 到你的项目中。

npm i puppeteer
# 或者
yarn add puppeteer

2、引入 Puppeteer

在你的 JavaScript 文件中引入 Puppeteer。

const puppeteer = require('puppeteer');

3、创建浏览器实例

使用 puppeteer.launch() 方法启动一个浏览器实例。

const browser = await puppeteer.launch();

4、创建新页面

通过 browser.newPage() 方法创建一个新页面。

const page = await browser.newPage();

5、导航到页面

使用 page.goto() 方法导航到指定的 URL。

await page.goto('https://example.com');

6、执行操作

使用 Puppeteer 提供的 API 执行各种操作，如截图、表单提交等。

7、关闭浏览器

完成操作后，不要忘记关闭浏览器，使用 browser.close() 方法关闭浏览器实例。

await browser.close();

五、完整示例

---

以下是一个简单的 Puppeteer 使用示例，打开 example 首页（此网站并不存在，仅用于演示使用，可改成自己想测试的网址），并生成网页截图：

const puppeteer = require('puppeteer');
const browserParams = {
      // 使用无头模式
      headless: false,
      // 页面最大化
      defaultViewport: {
        width: 0,
        height: 0,
      },
      args: [
        // 浏览器最大化
        "--start-maximized",
      ],
      // 创建Browser实例时传入 Chromium 可执行文件的路径
      executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
      // 超时时间，单位为毫秒
      timeout: 600000, 
    };

(async () => {
  // 启动浏览器实例
  const browser = await puppeteer.launch(browserParams);
  
  // 获取存在的页面
  async function getCurPage(){
    const pages = await browser.pages();
    let page = null;
    if(pages && pages.length>0){
      page = pages[0];
    }else{
      // 创建一个新页面
      page = await browser.newPage('https://example.com/');
    }
    return page;
  }
  const page = await getCurPage();
  
  // 生成网页截图
  await page.screenshot({path: 'example.png'});
  
  // 关闭浏览器
  await browser.close();
})(

六、常用操作

---

Puppeteer 提供了丰富的 API 来进行高级交互。以下是一些 Puppeteer 常用的操作及其语法和示例代码：

1. 启动浏览器和打开新页面

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // ...其他操作
  await browser.close();
})();

2. 访问网页

await page.goto('https://example.com');

3. 元素选择和交互

// 选择元素
const element = await page.$('selector');
// 点击元素
await element.click();

// 指定元素点击（合体：选择元素+点击元素）
await page.click('selector');

4. 输入内容

const inputElement = await page.$('input#example');
await inputElement.type('Hello, World!');

// 指定元素输入内容（合体：选择元素+输入内容）
// Types instantly
await page.type('input#example', 'Hello'); 
// Types slower, like a user
await page.type('input#example', 'World', {delay: 100});

5. 获取元素文本

const text = await page.$eval('selector', el => el.innerText);

6. 获取属性值

const value = await page.$eval('selector', el => el.getAttribute('href'));

7. 截图

await page.screenshot({ path: 'screenshot.png' });

8. 等待元素出现

await page.waitForSelector('selector');

await page.waitForSelector('selector', { visible: true });

9. 执行自定义 JavaScript

const domcumentTitle = await page.evaluate(() => {
  // 在页面上下文中执行的代码
  return document.title;
});

10. 设置浏览器视口大小

// 宽1280 × 高720
await page.setViewport({ width: 1280, height: 720 });

// 全屏
await page.setViewport({ width: 0, height: 0 });

由于本文篇幅限制，更多实用操作，请看《Puppeteer：50个常用操作，你会了吗？》

七、结语

---

Puppeteer 的强大之处在于其灵活性和丰富的 API。通过本文的介绍，我们只是揭开了 Puppeteer 功能的冰山一角。想要更深入地了解和使用 Puppeteer，建议查阅其 《Puppeteer官方文档》，那里有更详细的教程和示例。

最后也是最重要的一点，在使用 Puppeteer 时，请各位务必遵守相关法律法规，不要用于非法爬取数据或者侵犯他人权益。正确地使用 Puppeteer，可以大大提高我们的工作效率，为我们的项目带来便利。

---

参考文章：

• 《Puppeteer》
• 《Puppeteer 中文文档》
• 《20分钟玩转Puppeteer》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/141219746