How to check sorting (ascending and descending) functionality in casperjs

You will need to define your own comparison functions. Here's for example one that compares lexicographic string ordering case insensitively:

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

      

        
        
        
      

    

The difficulty is getting the items you want that you can compare. For example, you may have to separate price and currency, analyze price as a number, and compare them.

I'll take for the rest of the answer that you have a default <table>

and use the column order.

You can define a function that takes a column index (starting at 1), an optional selector to find an element in a cell, and a comparison function for that column. It internally defines CSS selectors or XPath expressions to access table cells. Keep in mind that for this you need to know how many rows there are and it is possible to customize 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;
}

      

        
        
        
      

    

Then you can run this function compare()

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

      

        
        
        
      

    

PhantomJS 1.x has a rare bug for CSS selectors :nth-child()

. You can try using the XPath selectors that are supported in CasperJS via a helper function:

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

      

        
        
        
      

    

Please note that CasperJS is built on top of PhantomJS and has the same limitations. You cannot directly work with DOM elements outside of the page context ( casper.evaluate()

). You will need to get an idea of ​​such an element in advance. I do this by accessing a property of the text

object returned from getElementsInfo()

.