Node.js和Puppeteer进行Web抓取的简单使用

至此我们大概了解到 node + electron + 谷歌浏览器基本开发知识，现在就可以肝代码了。不要忘记自动化工具主要功能，自动化操作网页。这个时候我们就用到了 Puppeteer 这个库。

Puppeteer的基础

这里的第一步是创建一个新文件夹,其中我们创建一个新的JavaScript文件。通过终端找到你新建的文件夹,并使用下面的行安装Puppeteer包。

npm install --save puppeteer

接下来打开您选择的代码编辑器,开始编写在网页上抓取数据所需的代码。

const puppeteer = require(‘puppeteer’);let scrape = async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();   await page.goto(‘https://www.johancruijffarena.nl/calendar.htm');   const result = await page.evaluate(() => {
      var data = [];
      
      var tables = document.querySelectorAll(‘table’);
      data = tables.length;      return data;
   }, );   browser.close();
   return result
}scrape().then((value) => {
   console.log(value);
});

我建议您手动输入上面的代码以学习该包的基本语法,然后通过终端运行您的脚本文件。

node script.js

如果您的终端也为您提供一个整数,干得好!在我们继续打印实际数据到控制台之前,让我们讨论一下代码和整数的含义。

const puppeteer = require(‘puppeteer’);

第1行
在这里,我们将下载的Puppeteer包包含在脚本文件中,从而将其包含在项目中。

let scrape = async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();   await page.goto(‘https://www.johancruijffarena.nl/calendar.htm');   const result = await page.evaluate(() => {
      var data = [];
      
      var tables = document.querySelectorAll(‘table’);
      data = tables.length;
   
      return data;
   }, );   browser.close();
   return result
}

第3-20行
一个常规的箭头函数,包括ES8中引入的async关键字,这将在进一步的行中帮助我们很多,当我们抓取数据时。

const browser = await puppeteer.launch();
const page = await browser.newPage();await page.goto(‘https://www.johancruijffarena.nl/calendar.htm');

第4–7行
从这里开始,我们使用Puppeteer提供给我们的功能。一个名为browser的常量被创建,在其中我们像您我一样打开一个新页面。
然后(您看到我做了什么吗?)浏览器将转到指定的页面,并且在页面打开之前不会继续下面的代码,这要感谢async/await关键字。

const result = await page.evaluate(() => {
   var tables = document.querySelectorAll(‘table’);
   var data = tables.length;
   
   return data;
}, );

第9–16行
在这些行中,我们使用Puppeteer提供的一个函数,即page.evaluate。 我们将其设置为常量result,以便我们可以通过调用result来使用稍后返回的数据。
实际抓取(我认为这是最有趣的部分)从这里开始! 我们将先前定义的网站的所有表元素保存在tables变量中。 我假设当您使用Node.js时,您了解HTML和JavaScript的基础知识,因此这应该是可行的。 然后将名为data的变量初始化并设置为收集的表格数量。 这个整数被返回并通过result常量访问。

browser.close();
return result

第18–19行
在抓取部分完成后,浏览器关闭,讨论过的result常量被返回,以便可以在调用scrape变量(let)时使用它。

scrape().then((value) => {
   console.log(value); 
});

第22–24行
由于then关键字,这些行上的代码将等待直到scrape函数完成才执行,并且实际在第十三行中找到的整数将记录在终端中。

抓取和保存数据

现在我们已经讨论了这个包的基础知识,您可能会想,他为什么选择选择该网站的所有表元素?
在我使用Puppeteer(和网络抓取一般)的经验中,选择包含您想要涵盖的所有数据的元素要比抓取包含您正在查找的部分数据的不同元素更容易。
如果您打开该网站及其开发者工具(在Chrome中),您会看到每个表元素都包含一个标题(带有年份和月份)以及事件标题、月份日期的主体。 让我通过以下代码向您展示这对抓取数据来说有多方便。

const result = await page.evaluate(() => {
   var data = [];
   var tables = document.querySelectorAll(‘table’);
   for (a = 0; a < tables.length; a++) {
      let monthYear =
      tables[a].children[0].children[0].children[0].innerText;      for (b = 0; b < tables[a].children[1].childElementCount;    
         b++) {            let day =      tables[a].children[1].children[b].children[0].children[0].innerText;
             let title = tables[a].children[1].children[b].children[1].children[0].innerText;
             let event = { title, monthYear, day };
            data.push(event); 
      }
   } 
   return data;
}, );

用上面的代码替换原来的page.evaluate函数(我们之前使用的)。 运行您的脚本并查看它在终端中记录的内容。
很棒,对吧? 在没有API的情况下,我们仍然能够使用Puppeteer获取我们想要的数据。 让我指导你通过我调整后的代码。

var data = [];

首先,我创建了一个空数组,后面将返回包含所有包含已抓取数据的字典的数组。

for (a = 0; a < tables.length; a++) {
      let monthYear =
      tables[a].children[0].children[0].children[0].innerText;      for (b = 0; b < tables[a].children[1].childElementCount;    
         b++) {            let day =      tables[a].children[1].children[b].children[0].children[0].innerText;            let title = tables[a].children[1].children[b].children[1].children[0].innerText;            let event = { title, monthYear, day };
            data.push(event);
      }
   }

在上面的代码中,您会看到两个嵌套的for in范围循环。第一个循环涵盖之前收集的所有表格。

如果您再次打开开发者工具,您会看到每个表格的年份和月份文本都包含在三个元素中,一个td、一个tr和一个thead标签中。 为了获取到我们实际想要抓取的文本,您可以使用children关键字进入下一层。 括号中的整数然后定义您希望进入的元素的编号(从0开始,就像数组一样),从选定的表格开始。 在到达所需元素后,innerText方法可以获取我们此元素的文本。 由于循环将涵盖每个表元素,所有表格以及所有月份和年份将按照原网站上显示的内容进行覆盖。

在第二个for in范围循环中,我们遍历单个月份中的事件。 由于每个月情况不同,因此使用了childElementCount关键字,它有助于定义实际表格中的元素数。
就像我们上面使用children关键字一样,日期和标题将保存在变量中。
最终,每个事件都以其标题、年份、月份和月份日期存储在事件字典中,并被推送到data数组中。

如前所述,此数据将再次返回,然后记录到控制台中,其中我们会发现包含已抓取数据的数组。
当然,这些数据一开始可能并不总是看起来非常漂亮,但是通过一些数据操作,您将能够出于任何目的(例如您自己的网站)呈现这些数据。

最后

这个就是简单的node爬虫例子。从整体代码来看，代码实现流程的就是
1、打开一个页面，
2、获取网页上一个元素的数据，
3、最后关闭完成爬虫关闭浏览器。
那么把这个这个流程用数组构建，就可以成为想要的自动化节点（当然还得添加一些自动，这里举个例子），
如： [“打开一个页面”, “获取元素的数据”, “关闭浏览器”]
当我们遍历这个数组，针对不同类型的数据去处理不同的事情，这样我们就可以实现一个配置化的自动化工具。