網頁爬蟲終極武器： puppeteer

下載靜態網頁可以用 wget 或 curl。 那如果是 javascript 動態產生/填寫的頁面呢？ 如果只需要網頁快照截圖， 可以用 cutycapt； 如果需要取得 javascript 所產生的文字內容， 那就用 puppeteer。 (字的原意： 操偶師) 它會呼叫 chrome 幫它執行頁面的 javascript， 但不會真的在桌面上打開 chrome 視窗。 在這種模式下運作的瀏覽器， 稱為 headless browser。 今天我們要用 puppeteer 及 headless chrome 來製作網頁爬蟲。

Puppeteer 是用 node.js 寫的， 所以要先 安裝 node.js。 再來， 如果你的 ubuntu 是伺服器， 有可能沒有安裝 chromium 瀏覽器。 要把它安裝起來， 否則會需要手動安裝很多相依套件。 最後是 puppeteer 本身。 原本想要用 npm install -g puppeteer 把 puppeteer 安裝在系統目錄 (全域安裝)。 可是我在 debian 上用 -g 時遇到 權限問題。 (在 ubuntu 上沒有問題) 所以只好改採 (預設的) 本地安裝： cd ~ ; npm install puppeteer 。 過程當中， 它會下載正確版本的 chrome 來搭配。 所謂的 「npm 本地安裝」， 不是每個人的家目錄， 而是每個 project 的子目錄！ 哇哩咧～ 這也是為什麼等一下你在我的程式碼裡面的 require('puppeteer') 會看到需要特別要明白指定從家目錄載入 puppeteer。

再來就很簡單了。 以 氣象局的 「目前天氣 觀測資料」 為例， 從上方的兩層選單可以按照全台分區及各區內的縣市找到有興趣的觀測站， 點進去之後， 注意上方的網址會改變 -- 每個測站有自己的網址。 這樣很好。 用 w3m 或 lynx 檢視這個網址， 只會看到網頁骨架跟空白的表格， 因為其他即時資訊是用 javascript 填進去的。 這時可以下載我的小程式 pptscraper.js、 設成可執行 chmod a+x pptscraper.js 、 抓網頁 ./pptscraper.js https://www.cwb.gov.tw/V7/observe/real/46744.htm > a.htm 、 再用 w3m 或 lynx 檢視 a.htm， 現在就可以看到高雄的即時天氣狀況了。

對於不需要 「按這裡按那裡、 跟網頁互動」 的情況， 這個小程式已經很夠用。 例如我喜歡用 w3m 跟 lynx 在黑底綠字的終端機裡讀文章， 遇到採用 js 填內容的網頁時， 用這種方法就可以不需要開啟 firefox 或 chrome。

如果遇到 「需要跟網頁互動才帶得出資料」 的頁面， 那就必須按照互動狀況自己寫程式了。 例如 環保署全國空氣品質指標， 要點選右半中間的測站選單， 才能得到數值 PM_2.5 跟 PM₁₀ 等等數值。 最討厭的是： 網址不會跟著測站變。 這時只好再更認真研究一點 puppeteer， 寫出 airtw-scraper.js 。 執行 ./airtw-scraper.js > a.htm 會啟動 headless chrome、 在 「測站」 選單點選 「高雄市」 又點選 「左營區」， 再印出最終的網頁內容。 理論上重點就是 page.select('#ddl_county', 'Kaohsiung') 跟 page.select('#ddl_site', '17'); 兩句； 但實務上經常會抓到互動前的原始頁面 (基隆市/基隆)。 在一部電腦上， 加上 page.click('#ddl_site'); 才能取得高雄市/左營； 在另一部電腦上， 則要加很多 page.waitFor() 還不能保證 100% 成功。 不知道該怎麼除錯， 也沒有興趣學 node.js (見下方連結)， 乾脆就把半成品貼出來， 等路過的 node.js 高手指教改正了。

* * * * *

順便筆記一下爬文連結。 無頭瀏覽器技術有好幾種。 [ 中文, 英文]。 最主要應用於 批次測試網頁上的 javascript。 曾經有一段時間， 最受歡迎的是 phantomjs， 可惜在 2017 年， phantomjs 幻滅了。 現在的主流是 puppeteer + headless chrome。

puppeteer 教學文， 這篇 是很好的入門； 這篇 寫得超讚超清楚， 我只學了一兩招就很好用了。 登入 github、 搜尋的完整例子 跟 經驗豐富的 puppeteer 大師心得 ， 超出我的程度太多， 目前好像用不到。

npm 套件管理的問題： 全域安裝或在地安裝？ 請見 這個問答 及 npm help folders 的第一頁摘要。

Javascript 本身就已經 令人愛恨交織； node.js 竟然拿 js 為範本來設計成伺服器端的語言， 這讓 node.js 變得超級難學、 難寫、 難除錯、 難維護 -- 簡單講， 有 五大理由。 光是 「預設非同步處理」 就令人難以接受。 猜猜看受不了 python 而跳槽到 nodejs 的程式設計師， 一年之後的心得與決定 是什麼？ 難怪有人甚至說 node.js 是近年來軟體產業的最重大災難之一。 即使有需求要寫網頁爬蟲， 我也沒辦法強迫自己為了駕馭 puppeteer 而認真學 node.js。 生命應要該浪費在其他美好/有趣/開心/有成就感的事物上才對呀！