Node.js 學習筆記 — Puppeteer 運用(二) : 網路爬蟲

Tom

Published in

appxtech

6 min readAug 1, 2022

網路爬蟲的存在是為了提高搜集資料的速度並且大幅減少價值低下的重複性工作，透過自動化的設計來執行設計好的一系列動作。

而Puppeteer 能讓你快速又方便的操控 chromium執行你想要它執行的動作。

所以我們這篇要做的網路爬蟲就是透過 Puppeteer 提供的API 來操控瀏覽器到指定網站搜集資料。

* 本篇另外使用的套件有 :

cheerio 負責解析 html ，使用 jquery like 語法 select element
js-xlsx 負責建立 excel 檔

【APPX 時賦科技】

appxtech

APPX aims at providing professional Java, Spring MVC Training in Taipei. We also offer consulting in .net and Java…

medium.com

👇【Puppeteer 運用(一)】👇

Puppeteer 運用 (一) : 網頁截圖與PDF輸出

Puppeteer 是一款 Node.js library ，它提供非常多API，能藉由 Chrome DevTools Protocol 控制/模擬 Chrome or Chromium 動作。

medium.com

準備

安裝 cheerio & js-xlsx

npm install cheerio npm install @types/cheerio npm install xlsx

* Puppeteer 安裝&基本介紹請至上一篇

開始製作爬蟲

本篇要爬的資料是批踢踢的 CFantasy 版，收集板上的標題與推文數並匯出成Excel檔。

Step 1. 觀察

開始實作爬蟲流程之前，我們先來觀察畫面中能找到哪些有用的資料，並且資料都分布在哪些位置，同時找出這些資料是否有規律可以做更多的運用與分類。

觀察可以發現畫面中有 :

推文數
在標題中用"[]" 括起來的分類主題
文章標題
發文者
發文日期
網址列

這些是這次爬蟲中會運動到的資料。

這時按下 F12 開啟發人員工具找到(圖2)右上圈圈處的工具或按下 ctrl + shift + c ，呼叫出 element selector 並將滑鼠移到任意標題上方並點擊，右邊視窗就會跳轉到該元件的html位置。注意畫線處的資料，這些標籤等等 cheerio 將會用到。

Step 2. 依照決定好的資料內容訂出 class

PostInfo : 紀錄這些貼文的基本資訊，包含標題、發文者、發文日期與推文數
Category : 依據每則貼文文標題前方的分類主題，建立貼文分類。

Step 3. 撰寫爬蟲程式

先丟上程式碼，下方進行說明!

首先，要蒐集資料當然不可能每次執行都只爬一頁，所以必須找出換頁的方法，那透過觀察發現，ptt 換頁時，網址有規律的變化，也就是index後面接著其當前頁碼(下方圖例)，所以可以利用這一點讓爬蟲自動往下一頁前進。
Line 13 : 宣告起始頁碼。
Line 23 : 利用頁碼組成 url 與 goto function 使 page 前往指定頁面。
Line 41 : 頁碼 -1 = 下一頁。

接下來先將 html 丟給 cheerio 取得整個頁面的 class selector 後，透過觀察可發現每個貼文中，我們所需資訊的元件都被包在 div.r-ent 元件裡面(圖5)，使用紅線處的資訊，取得所有符合此類型的元件 (Line 27) ，會得到所有符合的元件。再透過 each function 取得各個 div.r-ent 元件的 class selector 進行資料讀取(Line 28)。

則此時 $2 可以選到該元件下的所有貼文資訊，用同樣的方法找到目標元件的資訊，記錄出共同屬性 "div#main-container div.r-list-container.action-bar-margin.bbs-screen div.r-ent" 後的部分。

標題 : div.title a
作者 : div.meta div.author
貼文日期 : div.meta div.date
推文數 :
觀察發現推文數有三種不同的元件 (span.hl.h1、span.hl.h2、span.hl.h3)
但有共同的上層元件 div.nrec ，所以就取到這即可。

(Line 31 ~ 37) 取出資訊並轉換成 PostInfo 物件存入 array 中

**除了使用 cheerio 的 element selector，Puppeteer 本身也有提供 element selector 的功能 -> 由此前往**