下面的安裝測試基於window系統（win10）

1.PhantomJS

PhantomJS 是一個基於 WebKit 的伺服器端JavaScript API,它全面支援web而不需瀏覽器支援，其快速，原生支援各種Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 可以用於 頁面自動化， 網路監測 ， 網頁截圖 ，以及 無介面測試 等

1.1 安裝

1.2 使用

• 示例demo1.js–截圖：

var page = require('webpage').create();
page.viewportSize = {
    width: 1366
 
,
    height: 800
};
var urls = ["https://www.baidu.com/", "https://zrysmt.github.io/"];
page.open(urls[0], function() {
    console.log('welcome!');
    page.render('screen.png');
    phantom.exit();
});

命令列輸入：

phantomjs demo1.js

• 示例demo2.js–DOM操作

var page = require('webpage').create();
phantom.outputEncoding = "gbk"
 
; //解決中文亂碼
page.open("https://www.baidu.com/", function(status) {
    console.log(status);
    page.render('screen.png');
    var title = page.evaluate(function() {
        return document.title;
    });
    console.log('Page title: ' + title);
    phantom.exit();
});

執行命令同上，得到結果是：

success
Page title: 百度一下，你就知道
 

所執行的DOM操作要在page.evaluate中，

• 示例demo3.js–讀取檔案

var system = require('system');
var fs = require('fs');

phantom.outputEncoding = "gbk"; //解決中文亂碼
var filePath = "url-02.txt";
var content = fs.read(filePath);
console.log(content);

url-02.txt中如果是很多url，一個一個訪問url的話，可能會這樣實現

page.open(urlArr[0], function(status) {
    page.open(urlArr[1], function(status) {
       page.open(urlArr[2], function(status) {
            //... ...
        }); 
    });
});

這樣寫法就有很大的不方便，於是我們就引入了CasperJS

2.CasperJS

2.1 安裝

npm i casperjs --save-dev

為方便使用也可以加入到環境變數中

2.2 使用

• 示例demo:casper-test.js–開啟網頁截圖

var casper = require('casper').create();
casper.start();
casper.thenOpen('http://www.baidu.com/', function () {
    casper.captureSelector('baidu.png', 'html');
});
casper.run();

執行命令如下

casperjs casper-test.js

• 示例demo:casper-test2.js–操作DOM，訪問網頁

var casper = require('casper').create();
var links;

function getLinks() {
// Scrape the links from top-right nav of the website
    var links = document.querySelectorAll('ul.navigation li a');
    return Array.prototype.map.call(links, function (e) {
        return e.getAttribute('href')
    });
}
// Opens casperjs homepage
casper.start('http://casperjs.org/');

casper.then(function () {
    links = this.evaluate(getLinks);
});

casper.run(function () {
    for(var i in links) {
        console.log(links[i]);
    }
    casper.done();
});

執行命令類比同上

• 示例demo:casper-test3.js–單元測試

function Cow() {
    this.mowed = false;
    this.moo = function moo() {
        this.mowed = true; // mootable state: don't do that at home
        return 'moo!';
    };
}

casper.test.begin('Cow can moo', 2, function suite(test) {
    var cow = new Cow();
    test.assertEquals(cow.moo(), 'moo!');
    test.assert(cow.mowed);
    test.done();
});

執行命令

casperjs test casper-test3.js

結果是：

Test file: casper-test3.js
# Cow can moo
PASS Subject equals the expected value
PASS Subject is strictly true
PASS Cow can moo (2 tests)
PASS 2 tests executed in 0.031s, 2 passed, 0 failed, 0 dubious, 0 skipped.

• 示例demo:casper-test4.js–瀏覽器測試

casper.test.begin('Google search retrieves 10 or more results', 5, function suite(test) {
    casper.start("http://www.google.fr/", function() {
        test.assertTitle("Google", "google homepage title is the one expected");
        test.assertExists('form[action="/search"]', "main form is found");
        this.fill('form[action="/search"]', {
            q: "casperjs"
        }, true);
    });

    casper.then(function() {
        test.assertTitle("casperjs - Recherche Google", "google title is ok");
        test.assertUrlMatch(/q=casperjs/, "search term has been submitted");
        test.assertEval(function() {
            return __utils__.findAll("h3.r").length >= 10;
        }, "google search for \"casperjs\" retrieves 10 or more results");
    });

    casper.run(function() {
        test.done();
    });
});

執行命令如demo3類比

3.PhantomJs+CasperJs

實現非同步操作

var casper = require('casper').create(); //新建一個頁面

casper.start(url1); //新增第一個URL
casper.thenOpen(url2); //新增第二個URL,依次類推
casper.thenOpen(url3);
casper.thenOpen(url4);

casper.run(); //開始導航

demo(casper-phantomjs.js)如下–一次訪問三十幾個url：

var fs = require('fs');
var casper = require('casper').create();
phantom.outputEncoding = "gbk"; //解決中文亂碼

var filePath = "url-02.txt";
var content = fs.read(filePath);
var urlArr = content.split('\n');
casper.start();
for (var i = 0; i < urlArr.length; i++) {
    casper.thenOpen(urlArr[i], function() {
        this.echo('Page title: ' + this.getTitle());
    });
}
casper.run();
// phantom.exit();

執行命令

casperjs casper-phantomjs.js