如何驗證casperjs中的排序（升序和降序）功能

Question

我是這個框架的新手，也不知道如何使用CasperJS測試排序功能。

這種情況是，我需要驗證與排序功能的搜索結果。 當我用任何關鍵字搜索時，它會顯示所有可能的匹配結果。

Answer 1

你必須定義自己的比較函數。這裏有個例子一個是，辭書串排序，不區分大小寫的方式進行比較：

function cmpLexiInsAsc(a, b) { 
    return a.toLowerCase() < b.toLowerCase(); 
} 
function cmpLexiInsDesc(a, b) { 
    return a.toLowerCase() > b.toLowerCase(); 
} 

難度會檢索您可以比較正確的元素。例如，您可能需要拆分價格和貨幣，將價格解析爲數字並進行比較。

我會假設其餘的答案是你有一個默認的<table>並使用按列排序。

您可以定義一個函數，該函數採用列索引（從1開始），附加選擇器查找單元格中的元素以及該列的比較函數。它內部定義了CSS選擇器或XPath表達式來訪問表格單元格。請記住，要做到這一點，你需要知道有多少行，如果有一個頁眉/頁腳行，可能會調整。

function compare(colIndex, cellSelector, cmpFunc){ 
    function rowSelector(rowIndex) { 
     return "table#tableId tr:nth-child(" + rowIndex + ") > td:nth-child(" + colIndex + ")" + cellSelector; 
    } 

    var count = this.getElementsInfo("table#tableId tr"); 
    if (count < 2) { 
     return true; 
    } 

    var previous = this.getElementInfo(rowSelector(i)).text, 
     current; 
    for(var i = 2; i <= count; i++) { 
     current = this.getElementInfo(rowSelector(i)).text; 
     if (!cmpFunc(previous, current)) { 
      return false; 
     } 
     previous = current; 
    } 
    return true; 
} 

然後，您可以根據您的條件爲多個列運行此功能compare()函數。例如：

casper.then(function(){ 
    casper.test.assert(compare.call(this, 1, " > span > span.info", cmpLexiInsAsc), "Column 1 ascending"); 
    this.click("some selector to change ordering"); 
}); 

casper.then(function(){ 
    casper.test.assert(compare.call(this, 2, " > div > span.info", cmpLexiInsDesc), "Column 2 descending"); 
}); 

有一個在PhantomJS 1.x中一個罕見的錯誤爲:nth-child() CSS選擇器。您可以嘗試使用其在CasperJS通過輔助函數支持XPath選擇：

var x = require('casper').selectXPath; 
... 
casper.getElementsInfo(x("//table[@id='tableId']//tr["+rowIndex+"]/td["+colIndex+"]/span/span")); 

注意CasperJS是建立在PhantomJS之上，並具有相同的限制。您不能直接在頁面上下文外部處理DOM元素（casper.evaluate()）。您需要事先獲得這種元素的表示。我通過訪問從getElementsInfo()返回的對象上的text屬性來執行此操作。