How to get children elements

Question

I have the following html that I am trying to verify:

<div class="project-counts-nav-wrapper" style="">
    <ul id="project-counts" class="project-counts-nav" style="">
        <li style="">0 active projects</li>
        <li style="">0 draft projects</li>
        <li style="">
        0 archived projects (
        <a href="/projects_archived">View</a>
        )
        </li>
    </ul>
</div>

How do I get text value for each 'li' tag element?

I have the following Intern js code:

            .findByCssSelector('#project-counts')
            .findAllByTagName('li')
              .then(function(children){
                console.info('Show children length: ' + children.length);
                console.info('children: ' + children);
                for(var i=0; i<3; i++){
                    // how do I get text for each element
                    console.info('Show children: ' + children[i];
                }

              }).end();

I see the following from output:

Show children length: 3
children: [object Object],[object Object],[object Object]
Show children: [object Object]
Show children: [object Object]
Show children: [object Object]

I'd like to get:

0 active projects
0 draft projects
0 archived projects

Thanks, Brad

Answer 1

Here is the solution. I added chained command getVisableText after the findAllByTagName command:

            .findByCssSelector('#project-counts')
            .findAllByTagName('li')
            .getVisibleText()
              .then(function(children){
                console.info('Show children length: ' + children.length);
                console.info('children: ' + children);
                for(var i=0; i < children.length; i++){
                    console.info('Show each child: ' + children[i]);
                }

              }).end();