「譯」如何用 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 的網頁！😉