「译」如何用 Node.Js 和 Puppeteer 爬取网页

如何用 Node.Js 和 Puppeteer 爬取网页

原文：How To Scrap That Web Page With Node.Js And Puppeteer

做者：Francesco Napoletano 发表时间：2018/8/17

译者：陈 昌茂 发表时间：2018/8/20

(转载请注明出处)

若是你像我同样，有时很是急切地想要抓去某个网页，获得可读格式的数据，或仅是须要这些数据用作其余目的。

我庄严发誓，我在干坏事。（非译者）

我在屡次尝试之后（如： Guzzle 和 BeautifulSoup 等），终于找到了最优组合方案：

• Node.js（ 译者注：采用谷歌V8引擎开发的在服务器端运行JavaScript代码的跨平台运行环境 ）
• Puppeteer（ 译者注：木偶人，是谷歌浏览器的一个子项目，源代码托管在 GitHub ）
• 用于全天侯跑脚本的一个黑莓派（译者注：貌似和正文无关）

Puppeteer 是一个 Node 代码库，基于 DevTools 协议，提供高级 API 自动化控制谷歌Chrome 或 Chromium浏览器。Puppeteer 默认以无界面方式运行，但也能够设置为有界面方式运行谷歌Chrome 或 Chromium浏览器。

这意味着什么？ 你能够在你的服务中运用一个谷歌Chrome 浏览器实例。是否是很酷～

下面咱们一块儿来看下如何作。

设置运行环境

照例是打开终端，创建项目文件夹，在刚建立的文件夹运行命令 npm init。

命令执行后，文件夹中生成一个 package.json 的文件。执行命令 npm i -S puppeteer 安装 Puppeteer.

小小的警告：安装 Puppeteer 过程当中会下载完整版的谷歌Chromium浏览器到 node_modules 目录。

不用担忧。自从 1.7.0 版后，谷歌发布了新的 puppeteer-core 安装包，默认再也不自动下载谷歌Chromium浏览器。

若是你想尝鲜，执行命令 npm i -S puppeteer-core 便可。

puppeteer-core 是 Puppeteer 的轻量级版本，复用本地已安装的浏览器，或者链接到远程浏览器。

运行环境准备好了，开干！

直接上代码，知其然

在项目文件夹新建 index.js 文件，复制下述代码并粘贴到 index.js 文件中。

const puppeteer = require('puppeteer');
const URL = 'https://coding.napolux.com';

puppeteer.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }).then(async browser => {
    const page = await browser.newPage();
    await page.setViewport({width: 320, height: 600})
    await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 9_0_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A404 Safari/601.1')

    await page.goto(URL, {waitUntil: 'networkidle0'});
    await page.waitForSelector('body.blog');
    await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'})

    const result = await page.evaluate(() => {
        try {
            var data = [];
            $('h3.loop__post-title').each(function() {
                const url = $(this).find('a').attr('href');
                const title = $(this).find('a').attr('title')
                data.push({
                    'title' : title,
                    'url'   : url
                });
            });
            return data; // 返回数组
        } catch(err) {
            reject(err.toString());
        }
    });

    // 关闭浏览器
    await browser.close();

    // 记录播客标题
    for(var i = 0; i < result.length; i++) {
        console.log('Post: ' + result[i].title + ' URL: ' + result[i].url);
    }
    process.exit();
}).catch(function(error) {
    console.error('No way Paco!');
    process.exit();
});
复制代码

这些代码实现了网站爬取功能。项目完整代码托管在 GitHub。

深挖一点点，知其因此然

上述代码会爬取个人博客站点中全部帖子的标题和连接。咱们修改用户代理（UA）把爬取过程模拟成是一台老的 iPhone 手机在浏览。

为便于爬取工做，咱们把 jQuery 注入到网页中，这样就能够方便地使用 CSS 选择器了。

咱们逐行看一下代码：

• 第1-2行：调用 Puppeteer 模块，设置将要爬取的网站地址。
• 第4行：执行Puppeteer。请记住，咱们正在异步王国，全部的操做均是异步的，不然就是同步操做，需等待操做结束再执行下一行代码。如你所见，配置参数不言自明，咱们的脚本是在无界面方式的谷歌Chromium 浏览器中运行的。
• 第5-10行：浏览器启动，打开网页，设置网页按手机屏幕尺寸显示，设置浏览器使用伪造的UA。等待页面加载，直到 CSS 选择器 body.blog 出现。
• 第11行：如上所述，把 jQuery 注入到网页中。
• 第13-28行：咱们使用 jQuery 魔法，抽取咱们须要的数据。
• 第31-37行：关闭浏览器。打印数据。

在项目文件夹执行命令 node index.js ，你将看到以下内容输出：

Post: Blah blah 1? URL: https://coding.napolux.com/blah1/
Post: Blah blah 2? URL: https://coding.napolux.com/blah2/
Post: Blah blah 3? URL: https://coding.napolux.com/blah3/
复制代码

（执行命令 node index.js ，译者看到以下内容输出）

Post: How to scrap that web page with Node.js and puppeteer URL: https://coding.napolux.com/how-to-scrap-web-page-nodejs-puppeteer/
Post: How to find ideas for beer money? URL: https://coding.napolux.com/how-to-find-ideas-for-beer-money/
Post: This is the kind of automation I like! URL: https://coding.napolux.com/this-is-the-kind-of-automation-i-like/
Post: Some tips from when you work from home URL: https://coding.napolux.com/some-tips-from-when-you-work-from-home/
Post: How to find a cofounder for your startup URL: https://coding.napolux.com/how-to-find-a-cofounder-for-your-startup/
Post: Software Industry VS anything else URL: https://coding.napolux.com/software-industry-vs-anything-else/
Post: Some of my GitHub repositories URL: https://coding.napolux.com/some-of-my-github-repositories/
Post: How to use Docker for easy and fast WordPress development URL: https://coding.napolux.com/how-to-use-docker-for-wordpress-development/
复制代码

文章摘要说明

欢迎来到爬虫世界。比你预想的简单，对不对？网页爬取是一个有争议的事情，请记住只爬取得到受权的网站。

能够爬取你的网站吗？做为网站的主人，我没有受权你这么作。

给你留个做业练手：如何爬取使用了 AJAX 的网页！😉