使用 Puppeteer 将任何网页变成您的个人 API

2025-06-07

使用 Puppeteer 将任何网页变成您的个人 API

在这个由三部分组成的系列文章中，我们将学习如何将任何网页转换为我们自己的 API。我们将以创建一个使用 Google 搜索获取搜索结果的搜索 API 为例进行讲解。所有这些操作都将通过 Web Scraping 来实现，puppeteer

这是一个由 3 部分组成的系列：

  1. 在第一部分中：我们将介绍基础知识并创建一个简单的 Web Scraper。
  2. 在第二部分中：我们将使用 Google 搜索创建一个搜索引擎 API。
  3. 在第三部分中：我们将介绍优化 API、提高性能、故障排除基础知识以及如何将 Puppeteer API 部署到 Web 的不同方法。

目录 - 第 1 部分

Puppeteer 基础知识

我们首先需要了解它puppeteer是什么以及可以用它做什么。

Puppeteer 到底是什么？

根据官方文档的定义：

Puppeteer 是一个 Node 库，它提供了高级 API，可以通过DevTools 协议控制无头Chrome 或 Chromium 。它也可以配置为使用完整（非无头）的 Chrome 或 Chromium。

简单来说，puppeteer这是一个允许您以编程方式（又称无头）访问 Chromium 浏览器的库。

无头浏览器非常适合自动化测试和服务器环境，尤其适合那些不需要可见 UI 界面的环境。例如，您可能想针对真实网页运行一些测试，创建 PDF 文件，或者只是检查浏览器如何渲染 URL。

Chrome 浏览器功能强大，功能丰富。Chrome 浏览器能实现的所有功能，在 DevTools 中都能实现。您可以点击此处puppeteer了解更多关于 DevTools 的功能。

以下是一些用例puppeteer：

  • 生成页面的屏幕截图和 PDF。
  • 爬取一个SPA（单页应用程序）并生成预渲染的内容（即“SSR”（服务器端渲染））。
  • 自动化表单提交、UI 测试、键盘输入等。
  • 创建最新的自动化测试环境。使用最新的 JavaScript 和浏览器功能，直接在最新版本的 Chrome 中运行测试。
  • 捕获站点的时间线跟踪以帮助诊断性能问题。
  • 测试 Chrome 扩展程序。

然而，在这篇文章中，我们将专门使用它puppeteer来进行网络抓取。

创建一个简单的 Puppeteer Scraper

首先，我们需要初始化一个目录，然后使用命令行初始化 npm（或 yarn）：

mkdir hello-puppeteer
cd hello-puppeteer
npm init -y
Enter fullscreen mode Exit fullscreen mode

然后我们可以安装该puppeteer库：

npm i puppeteer
Enter fullscreen mode Exit fullscreen mode

为了确保该库在所有设备上都能正常工作，Chromium 浏览器内置了该库。这确保了库的正常运行，并避免了用户自行配置路径和/或下载/安装 Chrome。

该库下载了最新版本的 Chromium（~170MB Mac、~282MB Linux、~280MB Win），保证可以与 API 一起使用。

对于那些感兴趣的人，该puppeteer团队目前还正在开发一个实验版本，将 Puppeteer 引入Firefox。

由于它puppeteer是一个 Node.js 库，我们需要创建一个 node.js 文件并使用 node 运行它。为了方便起见，我们将其命名为server.js：

touch server.js
Enter fullscreen mode Exit fullscreen mode

要启动我们的 API，我们需要配置package.json文件，以便 Node 能够运行我们的服务器文件。我们可以通过npm start在以下位置添加脚本来实现scripts：

{
  "name": "hello-puppeteer",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
     "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "puppeteer": "^2.0.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在我们准备编写代码来在我们的server.js文件中创建一个简单的抓取工具：

const puppeteer = require('puppeteer');

(async () => {
    //Creates a Headless Browser Instance in the Background
    const browser = await puppeteer.launch();

    //Creates a Page Instance, similar to creating a new Tab
    const page = await browser.newPage();

    //Navigate the page to url
    await page.goto('https://example.com');

    //Closes the Browser Instance
    await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

这段代码创建了一个匿名函数，当我们运行 时就会执行npm start。它会创建一个浏览器实例，其中包含一个新页面并导航到https://example.com。之后，它会关闭浏览器实例，Node 也就完成了文件的执行。

为了确保其按预期工作，我们可以在puppeteer完成导航到该页面后截取该页面的屏幕截图：

page.screenshot({path: 'example.png'});
Enter fullscreen mode Exit fullscreen mode

将其添加到我们的文件后：

const puppeteer = require('puppeteer');

(async () => {
    //Creates a Headless Browser Instance in the Background
    const browser = await puppeteer.launch();

    //Creates a Page Instance, similar to creating a new Tab
    const page = await browser.newPage();

    //Navigate the page to url
    await page.goto('https://example.com');

    //Takes a screenshot of the page after navigating there and saves it as 'example.png'
    await page.screenshot({path: 'example.png'});

    //Closes the Browser Instance
    await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

我们可以https://example.com用一个有效的 URL 来替换。在本例中，我们将使用https://google.com。现在我们可以运行npm start，过一会儿，我们就可以example.png在文件目录中看到 ，打开它就会显示 的主页Google。

我们简单的网页爬虫就快完成了。现在我们可以选择从 Google 主页获取任何我们想要的信息。目前，我们只获取 Google 主页 Logo 的图片来源。

谷歌徽标

这本身并没有什么目的。然而，关键是我们可以通过编程来访问这些信息。

为此，我们需要打开浏览器，导航到 URL，并通过“检查元素”功能找到我们要查找的元素。您可以右键单击页面，然后选择“检查”，或者直接打开 Dev-Tools，导航到 HTML（元素选项卡）。

使用鼠标工具突出显示徽标元素后，它指向的内容如下（这对您来说可能有所不同）：

Google 徽标来源

需要查找的是任何能够识别 HTML 元素的信息。在我们的例子中，img元素有一个 id hplogo。因此，我们可以使用此信息来访问图像源。

有很多不同的方法可以从 DOM/页面获取特定元素。

为了定位单个元素，我们可以使用方法，$eval其中我们用名称或我们正在寻找的元素的任何标识属性替换为参数。idclassselector

page.$eval(selector, callbackFunc);
Enter fullscreen mode Exit fullscreen mode

此方法document.querySelector在元素内运行，并将其作为第一个参数传递给callbackFunc。如果没有匹配的元素selector，则该方法将抛出错误。

为了定位多个元素，我们可以使用：

page.$$eval(selector, callbackFunc);
Enter fullscreen mode Exit fullscreen mode

此方法document.querySelectorAll在元素内运行，并将其作为第一个参数传递给callbackFunc。如果没有匹配的元素selector，则该方法将抛出错误。

如果找到该元素，它将作为第一个参数传递给回调函数，因此我们可以使用它来获取所需的信息。

const googleLogo = await page.$eval('#hplogo', (img) => img.src);
Enter fullscreen mode Exit fullscreen mode

元素的定位类似于 CSS 或 Javascript 选择器中的定位

在我们的例子中，由于我们只需要获取单个图像，因此我们可以直接使用$eval和访问src：

const puppeteer = require('puppeteer');

(async () => {
    //Creates a Headless Browser Instance in the Background
    const browser = await puppeteer.launch();

    //Creates a Page Instance, similar to creating a new Tab
    const page = await browser.newPage();

    //Navigate the page to url
    await page.goto('https://google.com');

    //Takes screenshot of the page after navigating there
    await page.screenshot({path: 'example.png'});

    //Finds the first element with the id 'hplogo' and returns the source attribute of that element
    const googleLogo = await page.$eval('#hplogo', img => img.src);
    console.log(googleLogo);

    //Closes the Browser Instance
    await browser.close();
})();
Enter fullscreen mode Exit fullscreen mode

运行后npm start，服务器console.logs：

https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png
Enter fullscreen mode Exit fullscreen mode

如果我们在浏览器标签页中打开这个 URL，就会发现它就是我们要找的图片！我们简单的网页爬虫就完成了！

这个简单的网络爬虫的代码可以在Github上找到

在下一部分中，我们将使用 Google 搜索创建一个搜索引擎 API。用户可以通过搜索查询请求我们的 API。我们的 API 会抓取 Google 数据并返回前 10 个搜索结果。

第一部分到此结束。希望你喜欢这篇文章，敬请期待第二部分！欢迎大家提供反馈！

文章来源：https://dev.to/waqasabbasi/turn-any-webpage-into-your-personal-api-with-puppeteer-4a6
Devto 翻译
PREV
如何在 Now.sh 上部署 Express 如何在 Now.sh 上部署 Express
NEXT
你应该为五个最常见的 Bug 编写测试 你应该为哪些最常见的 Bug 编写测试？编写测试很麻烦。我该如何让它变得轻松呢？