認識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