Navigate the DOM with CasperJS

Question

I have a web page which has several trs and within each tr there are several tds. The structure looks like shown below

<tr bgcolor="#FFFFFF">
<td class="td1" style="text-align:left">TGHD03WYD15UGS</td>

<td class="td1" style="text-align:left">
    <font style="font-weight:bold"> TicketType</font>
    :The Grand Hotel, New Delhi,
    <font style="font-weight:bold"> FirstName</font>
    :Sanjali,
    <font style="font-weight:bold"> LastName</font>
    :Garg
</td>

I am able to get the list of trs using

this.getElementsInfo('selector');

When I iterate over the list I do get the trs but tds show up only in html format. What I would like to have is td objects which can be accessed using properties. The same would hold true in case of getting the inner objects from the last td which holds font tag objects.

If I can navigate through the DOM as is possible in real javascript scenario, I would be able to get all the objects and will be able to access properties in them.

So far it doesn't looks possible in CasperJS. All I get in html property which gives me a string representation of that element, rather than giving me the object itself. I would like to navigate to the children of the element as in real javascript.

Is that possible?

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

You can navigate the DOM by using casper.evaluate or variants. It executes the JavaScript given as a callback in the page context which is sandboxed. You cannot pass complex objects like DOM nodes. The docs say:

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!

Navigate the DOM with CasperJS

1 Answers1