如何验证 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 属性来做到这一点。