找到你要的答案

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

Q:如何进行排序(升序和降序)功能CasperJS

I am new to this framework and also not getting any idea how to test the sorting functionality with CasperJS.

The scenario is, I need to verify the search results with sorting functionality. When i search with any keyword it displays all the possible matching results.

我是新来这个框架,也没有任何想法如何测试排序功能与CasperJS。

The scenario is, I need to verify the search results with sorting functionality. When i search with any keyword it displays all the possible matching results.

answer1: 回答1:

You will have to define your own comparison functions. Here for example one that compares the lexicographical string ordering in a case insensitive manner:

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

The difficulty will be to retrieve the proper elements that you can compare. For example, you will probably need to split the price and the currency, parse the price as number and compare those.

I will assume for the rest of the answer that you have a default <table> and use column-wise ordering.

You can define a function that takes the column index (beginning at 1), the additional selector to find the element in a cell and the comparison function for that column. It internally defines the CSS selectors or XPath expressions to access the table cells. Keep in mind that to do this, you need to know how many rows there are and possibly adjust this if there is a header/footer row.

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;
}

You can then run this compare() function for multiple columns depending on your criteria. For example:

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");
});

There is a rare bug in PhantomJS 1.x for :nth-child() CSS selectors. You may try to use XPath selectors which are supported in CasperJS through the helper function:

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

Note that CasperJS is built on top of PhantomJS and has the same limitations. You cannot directly work on DOM elements outside of the page context (casper.evaluate()). You will need to get a representation of such an element beforehand. I do this by accessing the text property on the object returned from getElementsInfo().

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

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

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

我将承担剩下的答案,你有一个默认的<;表>;使用列排序。

您可以定义一个函数,该函数包含列索引(从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选择器。你可以尝试使用XPath选择器是通过辅助功能的支持下,在CasperJS:

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

注意CasperJS是建立在顶部的PhantomJS和具有相同的局限性。你不能直接在DOM元素的页面上下文之外(Casper,evaluate())。你需要事先得到这样一个元素的表示。我这样做是通过访问对象的Text属性返回getelementsinfo()。

javascript  testing  order  casperjs  columnsorting