如何验证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属性来执行此操作。