”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 用 puppeteer 抓取网络!

用 puppeteer 抓取网络!

发布于2024-09-28
浏览:724

Scrape the web with puppeteer!

木偶师完整指南 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 的世界!

版本声明 本文转载于:https://dev.to/cedsengine/scrape-the-web-with-puppeteer-2hmh?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何从 PHP 中的对象数组中提取一列属性?
    如何从 PHP 中的对象数组中提取一列属性?
    PHP:从对象数组中高效提取一列属性许多编程场景都涉及使用对象数组,其中每个对象可能有多个属性。有时,需要从每个对象中提取特定属性以形成单独的数组。在 PHP 中,在不借助循环或外部函数的情况下用一行代码实现此目标可能很棘手。一种可能的方法是利用 array_walk() 函数和 create_fu...
    编程 发布于2024-11-06
  • 构建 PHP Web 项目的最佳实践
    构建 PHP Web 项目的最佳实践
    规划新的 PHP Web 项目时,考虑技术和战略方面以确保成功非常重要。以下是一些规则来指导您完成整个过程: 1. 定义明确的目标和要求 为什么重要:清楚地了解项目目标有助于避免范围蔓延并与利益相关者设定期望。 行动: 创建具有特定功能的项目大纲。 确定核心特征和潜在的发展阶段。 ...
    编程 发布于2024-11-06
  • 如何在不使用嵌套查询的情况下从 MySQL 中的查询结果分配用户变量?
    如何在不使用嵌套查询的情况下从 MySQL 中的查询结果分配用户变量?
    MySQL 中根据查询结果分配用户变量背景和目标根据查询结果分配用户定义的变量可以增强数据库操作能力。本文探讨了一种在 MySQL 中实现此目的的方法,而无需借助嵌套查询。用户变量赋值语法与流行的看法相反,用户变量赋值可以直接集成到查询中。 SET 语句的赋值运算符是= 或:=。但是,:= 必须在其...
    编程 发布于2024-11-06
  • 如何使用 array_column() 函数从 PHP 中的对象数组中提取 Cat ID?
    如何使用 array_column() 函数从 PHP 中的对象数组中提取 Cat ID?
    从 PHP 中的对象数组中提取猫 ID处理对象数组(例如猫对象数组)时,提取特定属性通常可以成为一项必要的任务。在这种特殊情况下,我们的目标是将每个 cat 对象的 id 属性提取到一个新数组中。正如您的问题中所建议的,一种方法涉及使用 array_walk() 和 create_function ...
    编程 发布于2024-11-06
  • 实用指南 - 迁移到 Next.js App Router
    实用指南 - 迁移到 Next.js App Router
    随着 Next.js App Router 的发布,许多开发者都渴望迁移他们现有的项目。在这篇文章中,我将分享我将项目迁移到 Next.js App Router 的经验,包括主要挑战、变化以及如何使该过程更加顺利。 这是一种增量方法,您可以同时使用页面路由器和应用程序路由器。 为...
    编程 发布于2024-11-06
  • 何时以及为何应调整 @Transactional 中的默认隔离和传播参数?
    何时以及为何应调整 @Transactional 中的默认隔离和传播参数?
    @Transactional中的隔离和传播参数在Spring的@Transactional注解中,两个关键参数定义了数据库事务的行为:隔离和传播。本文探讨了何时以及为何应考虑调整其默认值。传播传播定义了事务如何相互关联。常见选项包括:REQUIRED: 在现有事务中运行代码,如果不存在则创建一个新事...
    编程 发布于2024-11-06
  • OpenAPI 修剪器 Python 工具
    OpenAPI 修剪器 Python 工具
    使用 OpenAPI Trimmer 简化您的 OpenAPI 文件 管理大型 OpenAPI 文件可能会很麻烦,尤其是当您只需要一小部分 API 来执行特定任务时。这就是 OpenAPI Trimmer 派上用场的地方。它是一个轻量级工具,旨在精简您的 OpenAPI 文件,使其...
    编程 发布于2024-11-06
  • PHP:揭示动态网站背后的秘密
    PHP:揭示动态网站背后的秘密
    PHP(超文本预处理器)是一种服务器端编程语言,广泛用于创建动态和交互式网站。它以其简单语法、动态内容生成能力、服务器端处理和快速开发能力而著称,并受到大多数网络托管服务商的支持。PHP:揭秘动态网站背后的秘方PHP(超文本预处理器)是一种服务器端编程语言,以其用于创建动态和交互式网站而闻名。它广泛...
    编程 发布于2024-11-06
  • JavaScript 中的变量命名最佳实践,实现简洁、可维护的代码
    JavaScript 中的变量命名最佳实践,实现简洁、可维护的代码
    简介:增强代码清晰度和维护 编写干净、易理解和可维护的代码对于任何 JavaScript 开发人员来说都是至关重要的。实现这一目标的一个关键方面是通过有效的变量命名。命名良好的变量不仅使您的代码更易于阅读,而且更易于理解和维护。在本指南中,我们将探讨如何选择具有描述性且有意义的变量名称,以显着改进您...
    编程 发布于2024-11-06
  • 揭示 Spring AOP 的内部工作原理
    揭示 Spring AOP 的内部工作原理
    在这篇文章中,我们将揭开 Spring 中面向方面编程(AOP)的内部机制的神秘面纱。重点将放在理解 AOP 如何实现日志记录等功能,这些功能通常被认为是一种“魔法”。通过浏览核心 Java 实现,我们将看到它是如何与 Java 的反射、代理模式和注释相关的,而不是任何真正神奇的东西。 ...
    编程 发布于2024-11-06
  • JavaScript ESelease 笔记:释放现代 JavaScript 的力量
    JavaScript ESelease 笔记:释放现代 JavaScript 的力量
    JavaScript ES6,正式名称为 ECMAScript 2015,引入了重大增强功能和新功能,改变了开发人员编写 JavaScript 的方式。以下是定义 ES6 的前 20 个功能,它们使 JavaScript 编程变得更加高效和愉快。 JavaScript ES6 的 2...
    编程 发布于2024-11-06
  • 了解 Javascript 中的 POST 请求
    了解 Javascript 中的 POST 请求
    function newPlayer(newForm) { fetch("http://localhost:3000/Players", { method: "POST", headers: { 'Content-Type': 'application...
    编程 发布于2024-11-06
  • 如何使用 Savitzky-Golay 滤波平滑噪声曲线?
    如何使用 Savitzky-Golay 滤波平滑噪声曲线?
    噪声数据的平滑曲线:探索 Savitzky-Golay 过滤在分析数据集的过程中,平滑噪声曲线的挑战出现在提高清晰度并揭示潜在模式。对于此任务,一种特别有效的方法是 Savitzky-Golay 滤波器。Savitzky-Golay 滤波器在数据可以通过多项式函数进行局部近似的假设下运行。它利用最小...
    编程 发布于2024-11-06
  • 重载可变参数方法
    重载可变参数方法
    重载可变参数方法 我们可以重载一个采用可变长度参数的方法。 该程序演示了两种重载可变参数方法的方法: 1 各种可变参数类型:可以重载具有不同可变参数类型的方法,例如 vaTest(int...) 和 vaTest(boolean...)。 varargs 参数的类型决定了将调用哪个方法。 2 添加公...
    编程 发布于2024-11-06
  • 如何在经典类组件中利用 React Hooks?
    如何在经典类组件中利用 React Hooks?
    将 React Hooks 与经典类组件集成虽然 React hooks 提供了基于类的组件设计的替代方案,但可以通过将它们合并到现有类中来逐步采用它们成分。这可以使用高阶组件 (HOC) 来实现。考虑以下类组件:class MyDiv extends React.component { co...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3