PhantomJS

1、任務描述

  本實驗任務主要對PhantomJS進行一些基本操做，經過完成本實驗任務，要求學生熟練掌握PhantomJS的操做，並對PhantomJS的基本操做進行整理並填寫工做任務報告。

2、任務目標

一、掌握PhantomJS的使用

3、任務環境

Ubuntu16.0四、Python2.7

4、任務分析

  PhantomJS是一個基於webkit的JavaScript API，它使用QtWebKit做爲它的核心瀏覽器的功能，使用webkit來編譯解釋執行JavaScript代碼。任何你能夠在基於webkit瀏覽器作的事情，它都能作到。它不只是個隱形的瀏覽器，提供了諸如CSS選擇器，支持的Web標準，DOM操做，JSON，HTML5畫布，SVG等，同時也提供了處理文件I / O的操做，從而使你能夠向操做系統讀寫文件等.PhantomJS的用處可謂很是普遍，如網絡監測，網頁截屏，無需瀏覽器的網站測試，頁面訪問自動化等。

5、任務實施

步驟一、環境準備

  右擊Ubuntu操做系統桌面，從彈出菜單中選擇【Open in Terminal】命令 打開終端。

  經過【cd /home】切換到home目錄下。【ls】查看該目錄下的全部內容。

圖1 切換目錄

  【mkdir phantomJSCode】在home目錄下建立phantomJSCode文件夾。

圖2 建立文件夾

步驟二、PhantomJS操做

  【cd phantomJSCode】切換到phantomJSCode目錄下，【vim helloworld.js】回車後建立一個名爲helloworld的JavaScript文件。

圖3 建立JavaScript文件

  回車後進入編輯框內，按鍵盤【i】進入編輯狀態，輸入以下程序。

  第一句是在控制檯輸出「Hello World!」,第二句是終止phantom的運行，否則程序會一直運行，不會中止。

圖4 便捷JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs helloworld.js】執行helloworld的JavaScript文件。

圖5 運行JavaScript文件

  經過PhantomJS，一個網頁能夠被加載、分析和經過建立網頁對象呈現。

  【vim pageload.js】回車後建立一個名爲pageload的JavaScript文件。

圖6 建立JavaScript文件

  回車後進入編輯框內，按鍵盤【i】進入編輯狀態，輸入以下程序。

  首先用webpage模塊建立一個page對象，而後經過page對象打開http://passport.shiyanbar.com/網址，若是請求響應成功，則經過render方法將當前的頁面保存爲shiyanbar.png圖片。

圖7 編輯JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs pageload.js】執行pageload的JavaScript文件。

  會發現響應成功，在目錄下生成一個名爲shi shiyanbar.png圖片，正是實驗吧的登陸界面。

圖8 運行JavaScript文件

  除了打開網頁截圖以外，也能夠對網頁進行測試。

  【vim loadspeed.js】回車後建立一個名爲loadspeed的JavaScript文件。

圖9 建立JavaScript文件

  回車後進入編輯框內，按鍵盤【i】進入編輯狀態，輸入以下程序。

  首先使用webpage模塊建立一個page對象，使用system模塊獲取系統對象system，並聲明兩個變量t和address，用來保存時間和傳入參數。若是傳入的參數的長度等於1，說明要加載的地址沒有傳入，進行提示並退出phantom。爲何等於1，由於phantomjs loadspeed.js 第一個參數是loadspeed.js。接着獲取當前的時間，而後打開網頁，獲取加載完成後的時間，進行相減便可。

圖10 編輯JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs loadspeed.js】執行loadspeed的JavaScript文件。

圖11 運行JavaScript文件

  爲了評估網頁中的JavaScript代碼，能夠利用evaluate。這個執行時「沙盒式」的，不會去執行網頁外的JavaScript代碼。evaluate方法能夠返回一個對像，而後返回值僅限於對象。不能包含函數（或閉包）。

  【vim evaluate.js】回車後建立一個名爲evaluate的JavaScript文件。

圖12 建立JavaScript文件

  回車後進入編輯框內，按鍵盤【i】進入編輯狀態，輸入以下程序。

  經過document.title獲取網頁的標題。

圖13 編輯JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs evaluate.js】執行evaluate的JavaScript文件。

  獲得網頁的標題爲登陸實驗吧。

圖14 運行JavaScript文件

  PhantomJS能夠對視圖進行縮放和裁剪。經過【vim pageload.js】對pageload.js進行改動，修改內容以下。

  PhantomJS既能夠將頁面轉化爲不一樣的文件格式，還能夠對視圖進行縮放和裁剪，主要用到page對象中兩個很是重要的屬性：viewportSize和clipRect。viewportSize是視區的大小，起做用能夠看作是將打開的瀏覽器窗口進行縮放，clipRect是在這個視區中裁剪矩形的大小，須要四個參數，前兩個基準點，後兩個參數是寬高。

圖15 編輯JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs pageload.js】執行pageload的JavaScript文件。
【ls】同級目錄下生成shiyanbar.pdf文件

圖16 運行JavaScript文件

  因爲PhantomJS容許對網絡流量進行檢查，所以適合對網絡行爲和性能進行各類分析。當頁面從遠程服務器請求資源時，能夠經過onResourceRequested和onResourceReceived回調跟蹤請求和響應。

  【vim netmonitor.js】回車後建立一個名爲netmonitor的JavaScript文件。

圖17 建立JavaScript文件

  回車後進入編輯框內，按鍵盤【i】進入編輯狀態，輸入以下程序。
當接受到請求時，能夠經過改寫onResourceRequested和onResourceReceived回調函數來實現接收到資源請求和資源接受完畢的監聽

圖18 編輯JavaScript文件

  編輯完畢後，按【esc】退出編輯狀態，【:wq】保存並退出編輯框，【phantomjs netmonitor.js】執行netmonitor的JavaScript文件。

  運行結果會打印出全部資源的請求和接收狀態，以JSON格式輸出。

圖19 運行JavaScript文件