Query a getElementInfo object in CasperJS

Question

I am using casperjs and I got to a point where I have an object like so:

var domElem = this.getElementInfo(".foo");

And now I want to query domElem further on, like so:

var domElemChild = domElem.QUERYFUNCTIONHERE(".bar");

I can't do that because domElem is an object and not a DOM node, what can I do using (preferably) only casperjs?

Note: I tried using cheerio but it outputted the following error upon trying to require it:

Error: Cannot find module 'util'
D:/dev/myproj/phantomjs:/bootstrap.js:289
D:/dev/myproj/phantomjs:/bootstrap.js:254 in require
D:/dev/myproj/node_modules/cheerio/node_modules/htmlparser2/lib/Pars er.js:120
D:/dev/myproj/node_modules/cheerio/node_modules/htmlparser2/lib/Pars er.js:351 Unsafe JavaScript attempt to access frame with URL about:blank from frame with U RL file:///d:/casperjs/bin/bootstrap.js. Domains, protocols and ports must match

Answer 1

There are many possibilities depending on what you want to do with domElem.

The easiest might be to concatenate the CSS selectors:

var domElemChild = this.getElementInfo(".foo .bar");

Since the CSS path may return unexpected results depending on your document, the following XPath would work as intended:

var domElemChild = this.getElementInfo(x("(//*[contains(@class,'foo')])[1]//*[contains(@class,'bar')]"));

Everything else must be done in the page context. So you can do something like

var text = this.evaluate(function(){
  var domElem = document.querySelector(".foo");
  window._someDomElement = domElem; // save for later
  // DOM nodes cannot be passed out of the page context, so return the innerHTML
  return domElem.innerHTML;
});
// do something with `text`
var text = this.evaluate(function(){
  var domElemChild = window._someDomElement.querySelector(".bar");
  return domElemChild.innerHTML;
});

Something similar can be done using the clientutils module, but don't forget that this module can only be used inside of the page context.