如何验证 casperjs 中的排序(升序和降序)功能

How to verify the sorting(ascending and descending) functionality in casperjs

我是这个框架的新手,也不知道如何使用 CasperJS 测试排序功能。

场景是,我需要使用排序功能来验证搜索结果。 当我用任何关键字搜索时,它会显示所有可能的匹配结果。

您必须定义自己的比较函数。例如,这里以不区分大小写的方式比较字典字符串排序:

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

困难在于检索可以比较的适当元素。例如,您可能需要拆分价格和货币,将价格解析为数字并进行比较。

对于其余的答案,我假设您有一个默认 <table> 并使用按列排序。

您可以定义一个函数,该函数采用列索引(从 1 开始)、用于在单元格中查找元素的附加选择器以及该列的比较函数。它在内部定义 CSS 选择器或 XPath 表达式以访问 table 单元格。请记住,要执行此操作,您需要知道有多少行,如果有 header/footer 行,则可能需要调整它。

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 属性 来做到这一点