有時候我們需要一些網頁自動化的工作,像是資料爬蟲、搶票、自動化測試等等。那如何在沒有圖形桌面環境的 Linux 下完成這些工作呢?這時候可以藉助 PhantomJS 這個工具,PhantomJS 底層透過 QtWebkit 進行網頁的渲染,你可以想像它執行的時後開了一個沒有畫面的瀏覽器,然後我們可以透過 JavaScript 直接操作 DOM,就像在 Chrome Developer Tools 的 Console 介面一樣。使用傳統 HTTP Layer 像是 CURL 之類的工具抓取網頁,碰到透過 JavaScript 渲染的網頁就很頭痛,使用 PhantomJS 便可以執行 JS 並完整渲染網頁,對於現在常常使用 JavaScript SPA (Single-page Application) 建立的網頁或應用,就可以完整地進行 Dom 操作與資料擷取。超方便 der...
安裝 PhantomJS
以 Ubuntu Server 為範例安裝 PhantomJS 的方法如下:
sudo apt-get install phantomjs xvfb xfonts-wqy
測試 PhantomJS 擷取網頁畫面
接下來我們設計一個簡單的 Exmaple 抓取網頁畫面 (GitHub capture.js),JS 內容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
"use strict";
var page = require('webpage').create();
page.open('https://blog.toright.com', function() {
// show title
var title = page.evaluate(function() {
return document.title;
});
console.log(title);
// screen capture
page.render('screenshot.png');
phantom.exit();
});
|
上面這一段程式碼會開啟「https://blog.toright.com」然後取得 HTML Title 後輸出,接著將畫面擷取並儲存為 screenshot.png 檔案。由於我們測試的 Server 並沒有圖形介面,因此需要透過 xvfb 來執行 PhantomJS,執行命令如下:
xvfb-run phantomjs capture.js
執行後可以看到畫面輸出網頁的標題,也可以整合 jasmine 之類的測試工具進行測試,如下:
在執行目錄中也會產生網頁的抓圖 screenshot.png 檔案(圖片很長因此下半部省略),如下:
上圖擷取畫面可以看出來變成手機版的,原因是 xvfb 啟動的畫面預設只有 400px,我們可以透過以下命令指定我們希望的顯示大小,比如 1024x768 如下:
xvfb-run --server-args="-screen 0 1024x768x24" phantomjs capture.js
接下來要做什麼事就自己發揮創意吧,要搶票、測試、爬資料都可以囉,掰了!