CasperJS - How to click on the provided Element - casperjs

Question

This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?

Answer 1

Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a

Answer 2

square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()