PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
PhantomJS 實現(xiàn)了一個無界面的 Webkit 瀏覽器崇渗。
PhantomJS 的應(yīng)用場景
HEADLESS WEBSITE TESTING 網(wǎng)頁測試
Run functional tests with frameworks such as Jasmine, QUnit, Mocha, Capybara, WebDriver, and many others.
通過 Jasmine 等工具來運(yùn)行功能性測試字逗。SCREEN CAPTURE 屏幕捕捉
Programmatically capture web contents, including SVG and Canvas. Create web site screenshots with thumbnail preview.
通過編程來捕捉網(wǎng)頁內(nèi)容，創(chuàng)建網(wǎng)頁截圖宅广。PAGE AUTOMATION 自動操作頁面
Access and manipulate webpages with the standard DOM API, or with usual libraries like jQuery.
通過標(biāo)準(zhǔn)的 DOM API 來訪問并操作頁面葫掉。NETWORK MONITORING 網(wǎng)絡(luò)監(jiān)控
Monitor page loading and export as standard HAR files. Automate performance analysis using YSlow and Jenkins.
監(jiān)控頁面的加載，導(dǎo)出為標(biāo)準(zhǔn)的 HAR 文件跟狱。自動完成性能分析俭厚。
PhantomJS 的使用
安裝
Page Loading 頁面加載
通過創(chuàng)建一個網(wǎng)頁對象，可以實現(xiàn)網(wǎng)頁的加載驶臊，分析及渲染挪挤。
例如，下面這段代碼加載一個網(wǎng)頁关翎，并將其保存為一個圖片扛门。
var page = require('webpage').create();
page.open('http://www.baidu.com', function(status) {
console.log("Status: " + status);
if(status === "success") {
page.render('baidu.png');
}
phantom.exit();
});
使用：Command line 中輸入：phantomjs pageloading.js
統(tǒng)計頁面加載時間
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();
});
使用：Command line 中輸入：phantomjs loadspeed.js http://www.baidu.com
Code Evaluation 代碼運(yùn)算
要想在網(wǎng)頁的上下文中對 JavaScript 進(jìn)行運(yùn)算，使用 evaluate() 方法纵寝。
var page = require('webpage').create();
page.open(url, function(status) {
var title = page.evaluate(function() {
return document.title;
});
console.log('Page title is ' + title);
phantom.exit();
});
集成 PhantomJS 與 Jasmine
PhantomJS 代碼參見 [Github]（https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js）
編寫 Jasmine Unit Test Case论寨，例如：
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine</title>
<link rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.js"></script>
</head>
<body>
<script>
describe("Test Suit 1", function() {
it("Spec 1", function() {
expect(true).toBe(true);
});
it("Spec 2", function() {
var a = 1;
var b = 2;
expect(a).toBe(b);
});
});
describe("Test Suit 2", function() {
it("Spec 3", function() {
var message = 'foo bar baz';
expect(message).toMatch(/bar/);
expect(message).toMatch('bar');
expect(message).not.toMatch(/quux/);
});
});
</script>
</body>
</html>
使用：Command line 中輸入：phantomjs run-jasmine.js spec.html
