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功能的自動化測試。