如果你點擊了這個表單里的任何元素，它其余的部分就會顯露出來，看起來就是下圖這樣。

測試將著眼于表單，但我們也要看看title標簽，表單左邊的圖片，及其上的文字。

#p#

代碼：

首先，為節(jié)省時間，我初始化了兩個變量：一個用來存儲URL，一個用來存儲網(wǎng)站名稱，因為我要在測試中的‘success’信息里顯示它們。

var url = 'http://newrelic.com/product/real-user-monitoring';  
var siteName = 'NewRelic'; 

Casper帶有4個內建記錄級別：

* debug
* info
* warning
* error

默認情況下，CasperJS會在‘error’級別過濾日志。所以如果你開始記錄日志后沒有看到任何東西，可能就是這個原因。為確保顯示日志輸出，我把它設置為‘debug’。而且我關閉了‘verbose’選項，如果它激活，我們會看到關于所有東西的信息，這會相當干擾。

var casper = require('casper').create({  
    verbose: false,  
    logLevel: 'debug' 
}); 

你可以在Casper API頁面上發(fā)現(xiàn)其它配置選項。comment函數(shù)，如下面演示的，使我們能記錄輸出——在這種情況下是輸出到控制臺。我在這里使用一個簡單的消息說明測試開始了：

casper.test.comment('Starting Testing'); 

函數(shù)‘casper.start’開始運行測試：

casper.start(url, function() {  
    this.test.assert(  
        this.getCurrentUrl() === url, 'url is the one expected' 
    );  
   
    this.test.assertHttpStatus(200, siteName + ' is up'); 

這是我所做的：我加載在‘url’中指定的URL，并假定我們可以載入想要的網(wǎng)址。在成功加載頁面之后，開始調用一些斷言來確認所載入的頁面上的內容是我們所期望的。

在這種情況下，我對返回的狀態(tài)碼進行了一個快速檢查，它應該是200，我得到的也是200。讓我們進行另一個斷言：

this.test.assertTitle(  
    'Real User Monitoring, End User Experience Monitoring : New Relic',  
    siteName + ' has the correct title' 
); 

上面這個測試非常簡單。它斷言載入的頁面的標題應該是什么，并輸出一個含有該信息的消息。

在下面的代碼里，我首先檢查確認存在一個ID為‘nr-signup-form’的表單。如果這個表單不存在，那對表單內的元素進行檢查就沒有意義了，對吧？

this.test.assertExists(  
    'form[id="nr-signup-form"]',  
    siteName + ' has a form with name "nr-signup-form"' 
); 

現(xiàn)在，在我繼續(xù)之前，我要提到的是，當我斷言元素存在或不存在于加載的頁面上時，我可以用兩種不同的方法：

* XPath
* CSS選擇器

如果你想要更多XPath的信息，請檢閱后面‘延伸閱讀’部分中的一些相關鏈接，或閱讀 我寫并發(fā)到maltblue的文章。CSS選擇器應該有很好的自我解釋性。但為以防萬一，我在“延伸閱讀”部分中同樣包含了關于它的鏈接。

現(xiàn)在讓我們用斷言來搜索輸入域控件：

this.test.assertExists(  
    {type: 'xpath', path: '//input[@id="FullName"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//input[@id="Company"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//input[@id="Email"]' },  
                'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//input[@id="Password"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//input[@id="PromoCode"]' },  
    'the element exists' 
); 

在上面的五個斷言中，我查找了五個輸入域控件，它們的ID分別是‘FullName’, ‘Company’, ‘Email’, ‘Password’ 和‘PromoCode’。用XPath查找選擇列表控件元素同樣容易。

#p#

在下面的測試中，我假定有四個選擇列表控件，它們的ID分別是：‘country’, ‘group’, ‘company_size’ 和‘HostEstimate’。

this.test.assertExists(  
    {type: 'xpath', path: '//select[@id="country"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//select[@id="group"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//select[@id="company_size"]' },  
    'the element exists' 
);  
   
this.test.assertExists(  
    {type: 'xpath', path: '//select[@id="HostEstimate"]' },  
    'the element exists' 
); 

現(xiàn)在，這些測試還非常簡單。那么，讓我們來把它們變得復雜點。

this.test.assertExists(  
    {  
        type: 'xpath',  
        path: '//button[@id="sign-up-button"  
                and @class="small-button" 
                and @type="submit"]'  
    }, 'the element exists' 
); 

在上面的測試中，我搜索‘Create Free Account’按鈕，它在頁面中的位置如下圖所示。

我在查詢中使用了一些條件運算符。我們要尋找一個具有下列條件的按鈕：

* ID 為 ‘sign-up-button’

* class 為‘small-button’

* type 為‘submit’

雖然看起來似乎我關注XPath比CasperJS更多，但為了更多的功能和配置，請耐心忍受我多說一點吧。

var x = require('casper').selectXPath;  
var checkboxXpath = "//input[@type='checkbox' and  
@id='checkbox1']/parent::*/a/label[  
    contains(., 'Java') or  
    contains(., 'Python') or  
    contains(., 'Ruby') or  
    contains(., 'PHP') or  
    contains(., '.NET') or  
    contains(., 'Node.js')  
]";  
this.test.assertExists(x(checkboxXpath), 'the element exists'); 

我在上面的測試中所做的，是通過把'x'初始化為‘selectXPath’助手來使XPath測試變得簡化一點。我要查找那一頁上所有選擇應用程序類型的復選框，所以XPath查詢查找復選框時用一個伴隨的label標簽來匹配所提供的應用程序語言的名稱。

為專門顯示我并非只會使用XPath（雖然它極其強大而且簡單），下面的兩個測試也使用CSS選擇器來檢查一個輸入域控件和列表項目也存在。

this.test.assertVisible('input#Company');  
   
this.test.assertExists('li.nav-enterprise', 'the element exists'); 

搜索表單元素和列表項目很簡單，但若你的頁面有很多資源，對于圖片或Flash的載入又怎么檢測呢？這有一個例子：

this.test.assertResourceExists(  
    '/images/tshirt-dude-form.png', 'T-shirt Image exists' 
); 

對于上面的測試，我斷言穿著所展示T恤的男人的照片已載入。 最后一個測試斷言某些文本存在，在本情況中就是在穿著T恤的男人鏡頭上方的‘Sign up for free!’文本:

this.test.assertTextExists(  
    'Sign up for free!', 'page body contains "Sign up for free!"' 
);  

然后我們這樣結束‘start’函數(shù)：

casper.test.comment('Ending Testing'); 

測試基本完成了，所以我輸出另一個日志記錄來讓用戶知道這一點：

casper.run(function() {  
    this.test.done(16);  
    this.echo('So the whole suite ended.');  
    require('utils').dump(casper.test.getFailures());  
    require('utils').dump(casper.test.getPasses());  
    this.exit();  
}); 

我可以寫出我想要的所有測試，但若不調用“run”則什么都不會發(fā)生。所以“run”是揭開上述工作的序幕。我所做的是檢查腳本是否已經(jīng)運行了16個測試，并且在最后用‘this.echo()’輸出最后一行文字表示整個測試已結束。

當我們運行測試時，有時得到最后結果的總結會挺好。用‘getFailures()’ 和 ‘getPasses()’函數(shù)，我們可以看到測試通過和失敗的總結。跟在這一切最后，我調用“this.exit()”來清盤。這個可以退出 CasperJS和PhantomJS，如果需要，可以指定一個退出編號。

把這個更進一步，這一次我調用‘casperjs’略有不同：我傳遞‘test’，如下所示，伴隨著“xunit”開關。 這個將測試結果輸出到一個 XUnit XML文件.

$ casperjs test mytest.js --xunit=log.xml 

在CasperJS的下一個主要版本中，如果‘test’沒被傳遞到命令中，你將無法運行和呈現(xiàn)測試。提前知道這個很重要，可以避免你的腳本被意外打斷。

#p#

譯文鏈接：http://www.oschina.net/translate/simpler-ui-testing-with-casperjs