CasperJS/PhantomJS Get nodes and click them

Question

I am trying to get DOMElements and click on each of them. After that I want to run assertions on the response.

var nodes = this.evaluate(function(){
    var nodes = document.querySelectorAll('.editable .action');
    return nodes;
});

//Print the base URI for the node
for (i = 0; i < nodes.length; ++i) {
    if(null != nodes[i]){
        require('utils').dump(nodes[i].baseURI);
    }
}

I have around 5 nodes that are a match, but nodes[0] is the only one that is not null. The rest are null in CasperJS. However running the same test in chrome browser I get all the nodes, none of them are null.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

CasperJS is built upon PhantomJS and has the same limitations. One of those limitations is that there are two contexts and the page context which has access to the DOM is sandboxed. It's not possible to pass non-primitive objects such as DOM nodes out of the page context.

Documentation:

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

Closures, functions, DOM nodes, etc. will not work!

You cannot compare this with Chrome, because Chrome doesn't have two contexts in normal operation.

You can pass representations of DOM nodes out of the page context. CasperJS has some convenience functions for this like casper.getElementsInfo(selector).

If you want to click every element, then there are different ways to achieve that depending on how the elements are positioned on the page. My answer here shows two ways with CSS selectors and XPath expressions outside of the page context.

CasperJS/PhantomJS Get nodes and click them

1 Answers1