click() function is missing on DOM element in evaluate() in CasperJS

Question

I am seeing different methods on a DOM element in Chrome's console compared to CasperJS. I have the following that I run

var casper = require('casper').create({
  verbose: true,
  logLevel: "debug"
});

var url = 'http://casperjs.org/';

casper.start(url, function() {
  this.echo('sdfsdf');
});

casper.then(function() {
  var link = this.evaluate(function() {
    var b = document.querySelector(".page-header");
    var s = "";

    for (var m in b) {
      if (typeof b[m] === 'function') {
        s += JSON.stringify(m) + " ";
      }
    }
    return s;
  });
  console.log(link);
});

casper.run();

It produces

"children" "childNodes" "insertAdjacentElement" "insertAdjacentHTML" "insertAdjacentText" "setAttribute" "getElementsByTagName" "getAttribute" "querySelectorAll" "webkitMatchesSelector" "getElementsByClassName" "contains" "getBoundingClientRect" "removeAttribute" "querySelector" "hasAttribute" "getAttributeNode" "getAttributeNS" "getElementsByTagNameNS" "removeAttributeNS" "getClientRects" "scrollByPages" "setAttributeNode" "setAttributeNS" "hasAttributeNS" "blur" "scrollIntoViewIfNeeded" "scrollByLines" "setAttributeNodeNS" "removeAttributeNode" "getAttributeNodeNS" "focus" "scrollIntoView" "addEventListener" "appendChild" "cloneNode" "removeChild" "removeEventListener" "compareDocumentPosition" "insertBefore" "hasAttributes" "isSupported" "isEqualNode" "dispatchEvent" "isDefaultNamespace" "hasChildNodes" "normalize" "replaceChild" "isSameNode" "lookupPrefix" "lookupNamespaceURI"

On other hand if I run the following code in Chrome's console

var b = document.querySelector(".page-header");
var s = "";
for (var m in b) {
  if (typeof b[m] === 'function') {
    s += JSON.stringify(m) + " ";
  }
}

I get the following. Why is the CasperJS missing click ?

""click" "focus" "blur" "hasAttributes" "getAttribute" "getAttributeNS" "setAttribute" "setAttributeNS" "removeAttribute" "removeAttributeNS" "hasAttribute" "hasAttributeNS" "getAttributeNode" "getAttributeNodeNS" "setAttributeNode" "setAttributeNodeNS" "removeAttributeNode" "closest" "matches" "getElementsByTagName" "getElementsByTagNameNS" "getElementsByClassName" "insertAdjacentHTML" "createShadowRoot" "getDestinationInsertionPoints" "requestPointerLock" "getClientRects" "getBoundingClientRect" "scrollIntoView" "insertAdjacentElement" "insertAdjacentText" "scrollIntoViewIfNeeded" "webkitMatchesSelector" "animate" "remove" "webkitRequestFullScreen" "webkitRequestFullscreen" "querySelector" "querySelectorAll" "hasChildNodes" "normalize" "cloneNode" "isEqualNode" "compareDocumentPosition" "contains" "lookupPrefix" "lookupNamespaceURI" "isDefaultNamespace" "insertBefore" "appendChild" "replaceChild" "removeChild" "isSameNode" "addEventListener" "removeEventListener" "dispatchEvent" "

Answer 1

If you're using PhantomJS 1.x, then there is support for click() , but only on <input> and <button> elements. See MDN for more information. Note that PhantomJS 1.x is comparable to Chrome 13 and full support for click() was introduced in Chrome 20.

This support was extended to all element types in PhantomJS 2, because it has a newer Webkit version under the hood.

---

Either use CasperJS' click() :

casper.click(selector);

or one of the many workarounds for PhantomJS: PhantomJS; click an element