Casperjs visible() returns true while jquery is(':visible') returns false for the same selector

Question

casper.visible('#percent_med_pickup'); returns true, while the following code with the same selector returns false:

casper.evaluate(function(){

return $('#percent_med_pickup').is(':visible');
});

Aren't both the same?

Answer 1

Yes, they are very different.

CasperJS (source):

this.elementVisible = function elementVisible(elem) {
    var style;
    try {
        style = window.getComputedStyle(elem, null);
    } catch (e) {
        return false;
    }
    var hidden = style.visibility === 'hidden' || style.display === 'none';
    if (hidden) {
        return false;
    }
    if (style.display === "inline" || style.display === "inline-block") {
        return true;
    }
    return elem.clientHeight > 0 && elem.clientWidth > 0;
};

jQuery (source):

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};
jQuery.expr.filters.visible = function( elem ) {
    return !jQuery.expr.filters.hidden( elem );
};