PhantomJS與CasperJS在Windows下的安裝與使用

按照網上的教程來呢，必定是很差使的，這是常理。

因此必需要告訴你怎麼使用Phantomjs……

這麼用！

1.下載Phantomjs的壓縮包並解壓縮；

2.在bin目錄（包含phantomjs.exe文件的目錄）下，按住shift鍵並同時點擊鼠標右鍵。（像我這麼詳細的說明才叫文檔，不然一概視爲裝逼。）點擊Open command window here：

3.以下圖，輸入phantomjs，而後輸入要執行的js文件路徑（能夠將文件直接拖進命令行窗口），按回車：

至此PhantomJS就能夠工做了。

而後咱們要設置環境變量，也就是說要開始安裝Phantomjs了，在windows下個人電腦中->右鍵properties->Advanced system settings->Environment variables->在system variables中找到Path這一變量，而後修改他的值，在結尾加上「;D:\phantomjs」。（前提是你要把下載的phantomjs解壓縮到D盤路徑下而且重命名爲phantomjs，並且千萬記住，要下載phantomjs1.9.X版本，不要下載2.0.X！由於咱們後須要用到的casperjs是不兼容phantomjs 2.0之後的版本的，因此咱們不能從官網下載phantomjs的最新版本，這裏給出一個參考的下載phantomjs1.X版本的地址。）

我之因此要用phantomjs是爲了實現web頁面的功能自動化測試，因此這裏還要安裝一個叫CasperJS的工具，他能更好的輔佐PhantomJS進行網頁功能測試。

接下來咱們從CasperJS的官網下載CasperJS，這裏咱們假設解壓縮到D盤，而後對文件夾進行重命名，修改Path環境變量（過程同上），在結尾加上「;D:\casperjs\bin」。至此，應以下圖所示（注意黃色高亮部分）：

而後一路OK保存設置。如今咱們就已經在Windows下安裝好phantomjs和casperjs了，咱們如今來驗證一下是否安裝成功！

打開cmd，輸入phantomjs --version以及casperjs --version分別查看他們的版本信息，若是版本信息可以查詢成功，就說明已經安裝成功，以下圖：

至此咱們就可使用casperjs和phantomjs來編寫腳本進行測試了。

話說回來，我當時之因此要學習casperjs是由於我發現經過phantomjs沒法完成不少簡單的事情，包括點擊一個按鈕（這裏拿baidu作爲例子）：

// JavaScript source code
var page = require('webpage').create();
var address = 'http://www.baidu.com/';
var output = 'capture.jpeg';

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load address!');
    } else
    {
        try 
        {
            var url = page.url;
            console.log('URL: ' + url);
            page.evaluate(function () {
                document.getElementById('kw').value = "translate";
                //document.getElementById('su').click();
            });
            window.setTimeout(function () {
                page.render(output, { format: 'jpeg', quality: '100' });
                phantom.exit();
            }, 200);
        } catch (err)
        {
            console.log(err);
        }
    }
});

我要訪問百度，在搜索框中輸入translate，點擊百度一下按鈕進行search，而後對網頁截個圖。上文中註釋掉的代碼就是軟肋，phantomjs作不到的地方。

因而我發起了博問雖然最終以自問自答的形式了結，顯然我並無獲得什麼實質性的建議，有人建議我用selenium（不得不說C#結合selenium確實是web功能測試利器），但我本次的目的是要研究基於phantomjs框架的web功能測試，而不是selenium。

後來我經過research，發現casperjs是個不錯的基於phantomjs而且可以實現我所想達到的目的的這樣一個工具。這是casperjs相關的API文檔。

經歷了好久的爬坡，終於從深坑中出來，並掌握了這門基於Javascript框架的web UI自動化測試技術，途中經歷了這樣一個坑：

定位不到頁面submit類型input按鈕的問題，這裏我拿baidu作了例子。我打開baidu首頁，在輸入框中輸入「666666」，而後點擊「百度一下」進行搜索。結果是：失敗了。我能夠輸入「666666」可是click button卻失敗了。由於這是個在看不見的瀏覽器中進行的自動化測試，和selenium不同。因此我無法看到爲何失敗了，是否是元素還沒加載完畢，我就點了呢？事實證實和這個是有關係的。我來驗證是否點擊成功的方法是截圖，網頁截圖。在點擊完按鈕後我會截個圖，來看一下，頁面是否發生了跳轉。就是這個地方出錯了。點擊完按鈕以後立刻截圖是不行的！必需要登上個幾秒，至因而幾秒，本身試吧！這裏我把我作的一個成功的用百度進行搜索的自動化用例貼出來，代碼以下：

// JavaScript source code
var address = 'http://www.baidu.com/';
var output1 = 'D:\capture1.png';
var output2 = 'D:\capture2.png';
var casper = require('casper').create();
casper.start(address).then(function () {
    this.evaluate(function() {
        document.getElementById("kw").value = "666666";
    });
    this.then(function () {
        this.thenClick('#su');
        this.wait(10000).then(function () {
            this.capture(output1);
        });
        this.then(function () {
            this.evaluate(function () {
                document.getElementById("kw").value = "tylan";
            });
        })
        this.thenClick("#su");
        this.wait(10000).then(function () {
            this.capture(output2);
        });
    })
});
casper.run();

我分別在第一次搜索和第二次搜索以後截了圖，以下：

第一次搜索後截圖——

第二次搜索後截圖——

以此證實了自動化的成功。代碼中混合用到了phantomjs和casperjs框架中封裝的api，合理的運用斷言（能夠用api中給的方法也能夠本身寫，和selenium同樣），將能夠運用phantomjs和casperjs實現基於javascript的web UI功能的自動化測試。