Impossible to get child element of ul list

[ax...@likebook.me]

I would like to get the last ul and all its <li> innerHTML value but it's not working. I posted here the html and the casper code and selected 

the ul list I would like to get, I would be very grateful if you could help me giving me some way to solve the problem.

// here is the html code : 

<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>

<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>
<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>
<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>
<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>
<ul class="casper-class-ul" style="padding-left:0px;">
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">One</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Two</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Three</li>
    <li ng-repeat="contenu in produit.recap" ng-bind-html-unsafe="contenu">Four</li>
</ul>

casper.wait(35000, function(){

    this.echo(this.getCurrentUrl());

    this.test.assertSelectorExists('.casper-class-ul', "ul selector exists");

    //ça marche dans la console de chrome mais pas ici
    this.page_deux = this.evaluate(function() {
        return document.querySelectorAll('.casper-class-ul').innerHTML;
    });

    //this.page_deux_tmp = this.page_deux.slice();
    this.echo(this.page_deux[this.page_deux.length-1].children[0].innerHTML);

});

[Thomas Mallery]

http://docs.casperjs.org/en/latest/modules/casper.html#evaluate

The image: http://docs.casperjs.org/en/latest/_images/evaluate-diagram.png, shows why its not working. Only "native" types can be returned. DOM elements cannot. But you can return the innerHTML of the node you're looking for from evaluate.

I didn't test this so it might have typos, but conceptually this should work:

this.echo(this.evaluate(function() { var ulNodes= document.querySelectorAll('.casper-class-ul').innerHTML; return ulNodes[ulNodes.length-1].children[0].innerHTML;  }));

[philippe....@oscaro.com]

Here is a solution (tested and validated)

var casper = require('casper').create({
    clientScripts: ['jquery-3.1.1.min.js'],
    logLevel: "info",
    verbose: true
});

casper.start('file:///C:/......../test.html');

casper.then(function() {
     // get the number of elements
    var nbr_htmlElement = casper.evaluate(function(){
        return $(".casper-class-ul").length;
    });
   
    casper.echo('nbr htmlElement #'+nbr_htmlElement);
   
    // get the last element
    var lastId = nbr_htmlElement-1;
   
    var last_htmlElement = casper.evaluate(function(lastId){
        return $('.casper-class-ul')[lastId].innerHTML.trim();
    },lastId);
   
    casper.echo('last htmlElement content #'+last_htmlElement+'#');
});

casper.run();