Puppeteer之爬虫入门

译者按： 本文通过简单的例子介绍如何使用Puppeteer来爬取网页数据，特别是用谷歌开发者工具获取元素选择器值得学习。

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

我们将会学到什么？

在这篇文章，你讲会学到如何使用JavaScript自动化抓取网页里面感兴趣的内容。我们将会使用Puppeteer，Puppeteer是一个Node库，提供接口来控制headless Chrome。Headless Chrome是一种不使用Chrome来运行Chrome浏览器的方式。

如果你不知道Puppeteer，也不了解headless Chrome，那么你只要知道我们将要编写JavaScript代码来自动化控制Chrome就行。

准备工作

你需要安装版本8以上的Node，你可以在这里找到安装方法。确保选择Current版本，因为它是8+。

当你将Node安装好以后，创建一个新的文件夹，将Puppeteer安装在该文件夹下。

npm install --save puppeteer

例1：截屏

当你把Puppeteer安装好了以后，我们来尝试第一个简单的例子。这个例子来自于Puppeteer文档（稍微改动）。我们编写的代码将会把你要访问的网页截屏并保存为png文件。

首先，创建一个test.js文件，并编写如下代码。

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

我们来一行一行理解一下代码的含义。

  • 第1行：引入我们需要的库Puppeteer；
  • 第3-10行：主函数getPic()包含了所有的自动化代码；
  • 第12行：调用getPic()函数。

这里需要提醒注意getPic()函数是一个async函数，使用了ES 2017 async/await特性。该函数是一个异步函数，会返回一个Promise。如果async最终顺利返回值，Promise则可以顺利reslove，得到结果；否则将会reject一个错误。

因为我们使用了async函数，我们使用await来暂停函数的执行，直到Promise返回。

接下来我们深入理解一下getPic()：

  • 第4行：

      const broswer = await puppeteer.launch();

    这行代码启动puppeteer，我们实际上启动了一个Chrome实例，并且和我们声明的browser变量绑定起来。因为我们使用了await关键字，该函数会暂停直到Promise完全被解析。也就是说成功创建Chrome实例或则报错。

  • 第5行：

      const page = await browser.newPage();

    我们在浏览器中创建一个新的页面，通过使用await关键字来等待页面成功创建。

  • 第6行：

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

    使用page.goto()打开谷歌首页。

  • 第7行：

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

    调用screenshot()函数将当前页面截屏。

  • 第9行：

       await browser.close();

    将浏览器关闭。

执行实例

使用Node执行：

  node test.js

下面截取的图片google.png：

现在我们来使用non-headless模式试试。将第4行代码改为：

  const browser = await puppeteer.launch({headless: false});

然后运行试试。你会发现谷歌浏览器打开了，并且导航到了谷歌搜索页面。但是截屏没有居中，我们可以调节一下页面的大小配置。

await page.setViewport({width: 1000, height: 500});

截屏的效果会更加漂亮。

下面是最终版本的代码：

const puppeteer = require('puppeteer');

async function getPic() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.setViewport({width: 1000, height: 500})
  await page.screenshot({path: 'google.png'});

  await browser.close();
}

getPic();

例2：爬取数据

首先，了解一下Puppeteer的API。文档提供了非常丰富的方法不仅支持在网页上点击，而且可以填写表单，读取数据。

接下来我们会爬取Books to Scrape，这是一个伪造的网上书店专门用来练习爬取数据。

在当前目录下，我们创建一个scrape.js文件，输入如下代码：

const puppeteer = require('puppeteer');

let scrape = async () => {
  // 爬取数据的代码
  
  // 返回数据
};

scrape().then((value) => {
    console.log(value); // 成功！
});

第一步：基本配置

我们首先创建一个浏览器实例，打开一个新页面，并且导航到要爬取数据的页面。

let scrape = async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.goto('http://books.toscrape.com/');
  await page.waitFor(1000);
  // Scrape
  browser.close();
  return result;
};

注意其中有一行代码让浏览器延时关闭。这行代码本来是不需要的，主要是方便查看页面是否完全加载。

await page.waitFor(1000);

第二步：抓取数据

我们接下来要选择页面上的第一本书，然后获取它的标题和价格。

查看Puppeteer API，可以找到定义点击的函数：

page.click(selector[, options])

  • selector <string> 一个选择器来指定要点击的元素。如果多个元素满足，那么默认选择第一个。

幸运的是，谷歌开发者工具提供一个可以快速找到选择器元素的方法。在图片上方右击，选择检查(Inspect)选项。

<div style="text-align: center;">
<img style="width:75%;" src="guide-to-automating-scraping-the-web-with-js/first_book_inspect.png" />
</div>

谷歌开发者工具的Elements界面会打开，并且选定部分对应的代码会高亮。右击左侧的三个点，选择拷贝(Copy)，然后选择拷贝选择器(Copy selector)。

接下来将拷贝的选择器插入到函数中。

await page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img');

加入了点击事件的代码执行后会直接跳转到详细介绍这本书的页面。而我们则关心它的标题和价格部分。

为了获取它们，我们首选需要使用page.evaluate()函数。该函数可以让我们使用内置的DOM选择器，比如querySelector()。

const result = await page.evaluate(() => {
// return something
});

然后，我们使用类似的手段获取标题的选择器。

使用如下代码可以获取该元素：

let title = document.querySelector('h1');

但是，我们真正想要的是里面的文本文字。因此，通过.innerText来获取。

let title = document.querySelector('h1').innerText;

价格也可以用相同的方法获取。


let price = document.querySelector('.price_color').innerText;

最终，将它们一起返回，完整代码如下：

const result = await page.evaluate(() => {
  let title = document.querySelector('h1').innerText;
  let price = document.querySelector('.price_color').innerText;
return {
  title,
  price
}
});

所有的代码整合到一起，如下：

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://books.toscrape.com/');
    await page.click('#default > div > div > div > div > section > div:nth-child(2) > ol > li:nth-child(1) > article > div.image_container > a > img');
    await page.waitFor(1000);

    const result = await page.evaluate(() => {
        let title = document.querySelector('h1').innerText;
        let price = document.querySelector('.price_color').innerText;

        return {
            title,
            price
        }

    });

    browser.close();
    return result;
};

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

运行node scrape.js即可返回数据

{ title: 'A Light in the Attic', price: '£51.77' }

例3：进一步优化

从主页获取所有书籍的标题和价格，然后将它们返回。

提示

和例2的区别在于我们需要用一个循环来获取所有书籍的信息。

const result = await page.evaluate(() => {
  let data = []; // Create an empty array
  let elements = document.querySelectorAll('xxx'); // 获取所有书籍元素 
  // 循环处理每一个元素
    // 获取标题
    // 获取价格
    data.push({title, price}); // 将结果存入数组
  return data; // 返回数据
});

解法

const puppeteer = require('puppeteer');

let scrape = async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://books.toscrape.com/');

    const result = await page.evaluate(() => {
        let data = []; // 初始化空数组来存储数据
        let elements = document.querySelectorAll('.product_pod'); // 获取所有书籍元素

        for (var element of elements){ // 循环
            let title = element.childNodes[5].innerText; // 获取标题
            let price = element.childNodes[7].children[0].innerText; // 获取价格

            data.push({title, price}); // 存入数组
        }

        return data; // 返回数据
    });

    browser.close();
    return result;
};

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

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了7亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！

版权声明

转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/11/01/guide-to-automating-scraping-the-web-with-js/

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343