PhantomJS 学习笔记

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 实现了一个无界面的 Webkit 浏览器。

PhantomJS 的应用场景

HEADLESS WEBSITE TESTING 网页测试
Run functional tests with frameworks such as Jasmine, QUnit, Mocha, Capybara, WebDriver, and many others.
通过 Jasmine 等工具来运行功能性测试。
SCREEN CAPTURE 屏幕捕捉
Programmatically capture web contents, including SVG and Canvas. Create web site screenshots with thumbnail preview.
通过编程来捕捉网页内容，创建网页截图。
PAGE AUTOMATION 自动操作页面
Access and manipulate webpages with the standard DOM API, or with usual libraries like jQuery.
通过标准的 DOM API 来访问并操作页面。
NETWORK MONITORING 网络监控
Monitor page loading and export as standard HAR files. Automate performance analysis using YSlow and Jenkins.
监控页面的加载，导出为标准的 HAR 文件。自动完成性能分析。

PhantomJS 的使用

安装

下载页面

Page Loading 页面加载

通过创建一个网页对象，可以实现网页的加载，分析及渲染。
例如，下面这段代码加载一个网页，并将其保存为一个图片。

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

统计页面加载时间

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 代码运算

要想在网页的上下文中对 JavaScript 进行运算，使用 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" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.css">
    
    <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

引用：
PhantomJS 官网