認識phantomjs

PhantomJS是一款webkit內核的headelsss的瀏覽器，使用QtWebkit, 支持DOM操作、CSS選擇器、JSON、Canvas和SVG，可以模擬瀏覽器的服務。

安裝

mac同學使用 brew install casperjs

可以做什麼？

1. Headless的網站集成測試

可以和單元測試框架如Jasmine、Mocha和WebDriver集成

2. 屏幕捕捉

可以捕捉的web頁面

3.網路監控 性能分析

監控page loading支持輸出HAR標準文件，支持使用YSlow和Jenkins進行全自動的性能分析。

4. 爬蟲

5. 運行自動化測試QA 

phantomjs的生態圈

1. CasperJS：一個開源的導航腳本處理和高級測試工具

2. Mocha-PhantomJS：JavaScript測試框架Mocha的客戶端

前端頁面監控

前端頁面監控：比如，頁面第三方系統數據調用失敗，模塊載入異常、用戶白屏、數據不正確。這時候就需要從前端DOM展示的角度來分析。並且出現問題，需要使用郵件、簡訊通知相關人員修複bug。並且觸發報警是要有現場快照，以便復現問題。

UI測試包括網頁元素的正確展現，網頁交互之後的元素變化等，人工測試很是頭疼，並且UI層面的測試用例也不好寫。

註入JS文件

var webPage = require('webpage');
var page = webPage.create();
page.includeJs('http://code.jquery.com/jquery-1.10.2.min.js', function() {
// 模擬登錄
var $testForm = $('form#login');
$testForm.find('input[name="username"]').value('barret');
$testForm.find('input[name="password"]').value('1234');
$testForm.submit();
});

執行JS代碼

1 var webPage = require('webpage');
2 var page = webPage.create();
3 page.open('http://www.taobao.com', function(status) {
4 var title = page.evaluate(function() {
5 return document.title;
6 });
7 console.log(title);
8 phantom.exit();
9 });

測試頁面載入速度

var page = require('webpage').create(),
  system = require('system'),
  t, address;

if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the address');
  } else {
    t = Date.now() - t;
    console.log('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

phantomjs loadspeed.js http://www.baidu.com 
 

輸出 Loading http://www.baidu.com Loading time 3802msc

屏幕截圖

var page = require('webpage').create();
page.open('http://github.com/', function() {
  page.render('github.png');
  phantom.exit();
});

設置頁面背景顏色

page.evaluate(function() {
  document.body.bgColor = 'white';
});

 確保在render之前

無界面的測試

PhantomJS itself is not a test framework, it is only used to launch the tests via a suitable test runner.

例如Mocha Jasmine WebDriver 

和CI系統持續集成
例如Jenkins或者TeamCity，Travis CI已經內置了對PhantomJS的支持。

最好的實踐
和測試框架CasperJS集成。

 相關連接

官網： www.phantomjs.org