木偶师完整指南 pt.1

Puppeteer：Web 自动化的强大工具

在当今快节奏的 Web 开发环境中，自动化是关键，这就是 Puppeteer 的用武之地。Puppeteer 由 Google 开发，是一个功能强大的 Node.js 库，允许开发人员使用 JavaScript 控制 Chrome 浏览器。无论您是在无头模式下浏览网络以提高效率，还是在完整的浏览器中获得视觉反馈，Puppeteer 都可以让您比以往更轻松地自动执行网页抓取、测试等任务。有了 Puppeteer，曾经需要手动完成的工作现在只需一个脚本即可完成。

为什么要进行网页抓取？

在最近的一个项目中，我与一位客户合作，他的外汇交易社区需要一个登陆页面。他想要类似于您在 MarketWatch 或雅虎财经上看到的股票行情的东西，但他想要的不是股票，而是在网站上显示 1 美元的实时货币兑换率。

虽然有可用的 API 可以提供数据（具有使用限制和月费），但我看到了使用 Puppeteer 创建自定义解决方案的机会。通过预先投入一些时间，我能够免费抓取和显示数据，最终为我的客户节省了经常性成本。

客户网站：Majesticpips.com

设置 puppeteer 变得简单

在我们开始抓取网络以实现其所有荣耀之前，我们必须将 puppeteer 安装到我们的应用程序中。

正如文档中所述

步骤1

使用您选择的 npm、yarn 或 pnpm 安装库。

• npm 我木偶师

• 纱线添加傀儡师

• pnpm 添加木偶操纵者

这将在安装过程中下载 Chrome 的兼容版本，这对于初学者来说更容易快速启动和运行。

如果您是一位经验丰富的开发人员并且有您想要使用的特定 chrome/chromium 版本；然后安装这些软件包

• npm i puppeteer-core

• 纱线添加 puppeteer-core

• pnpm 添加 puppeteer-core

最适合您，该软件包将是轻量级的，因为它只安装 puppeteer，而 chrome 版本则由您决定。

安装“puppeteer”对于初次测试者来说是更好的选择。它简化了设置并确保您拥有 Chromium 的工作版本，使您能够专注于编写脚本。

步骤2

现在在您的 JS 文件中，您需要为使用 ES 模块系统（ES6 标准）且节点版本为 12 及更高版本的应用程序导入 puppeteer。

从 'puppeteer' 导入 puppeteer； （受到推崇的）
或者
从 'puppeteer-core' 导入 puppeteer;

或者您可以使用 Node.js 的 commonJs 模块系统的 require 语法，该语法也与旧版本的 Node.js 兼容。

const puppeteer = require('puppeteer');
或者
const puppeteer = require('puppeteer-core');

步骤3

导入Puppeteer后，我们就可以开始编写执行网页抓取的命令了。下面的代码显示了您需要使用的内容。

我们使用库提供的这些方法启动浏览器。

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = 此方法启动一个新的浏览器实例。

browser.newPage() = 此方法在浏览器实例中创建一个新页面（或选项卡）。

browser.close() = 此方法关闭浏览器实例。

在 puppeteer.launch() 中，我们可以传递参数来根据我们的喜好自定义浏览器启动。我们将在第 2 部分中更详细地介绍这一点。但是，默认情况下，puppeteer.launch() 具有预设值，例如将无头模式设置为 true。

步骤4

浏览器已经启动，现在我们有了一个可以上网的页面。让我们导航到我们将抓取一些数据的网站。

在此示例中，我们将从 qoutes 网站抓取数据。

 await page.goto(https://quotes.toscrape.com/)

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

我添加了await page.screenshot({path:'screenshot.png'})。这是一个很好的工具，可以确保一切按计划进行。执行此代码时，您的项目目录中将有一个图像文件，用于捕获您正在抓取的网站的当前状态。您还可以根据自己的喜好调整文件名。

如果一切正常，则继续执行步骤 5。

步骤5

现在我们的脚本已经成型，让我们深入研究从网页提取数据的关键部分。这是我们的脚本到目前为止的样子：

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

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

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

要验证数据是否已成功抓取，我们可以在 CLI 中运行节点“server-file-name”，数据将使用 console.log(quotesScraper);.
显示在控制台中

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... })：这就是奇迹发生的地方。 evaluate 方法允许我们在正在抓取的页面上下文中运行 JavaScript 代码。这就好像您打开浏览器的开发者控制台并直接在页面上运行代码。

const quote = document.querySelectorAll(".quote");：在这里，我们选择页面上与 .quote 类匹配的所有元素。这给了我们一个引用元素的 NodeList。

constquotesArray = [];：我们初始化一个空数组来存储我们提取的引号。

for (const quote of quote) { ... }：此循环迭代每个引号元素。对于每一个，我们都会提取引用文本和作者。

quotesArray.push({ quote: texts,author });：对于每个引用，我们创建一个包含引用文本和作者的对象，然后将该对象推入quotesArray。

returnquotesArray;：最后，我们返回引号数组，然后将其存储在 Node.js 环境中的quotesScraper中。

这种提取数据的方法非常强大，因为它允许您像用户一样与页面交互，但是以自动化和编程的方式。

关闭浏览器

await browser.close();：抓取数据后，关闭浏览器以释放资源非常重要。此行确保我们启动的浏览器实例正确关闭。

展望第二部分

通过此脚本，您已成功使用 Puppeteer 从网站抓取数据。但我们只是触及了可能性的表面。在第 2 部分中，我们将探索更高级的技术，例如处理动态内容并使用 Express.JS 创建报废数据的 API 功能。 请继续关注，我们将深入探索 Puppeteer 的世界！