CODEWITHSUNDEEP
casperjs
saun jean
saun jean

Reputation: 759

CasperJS - How to click on the provided Element

This is the Div with UL on the webpage.

<div id='sites'>
  <ul style="display: block;">
    <li data-product-id="55">
      <a href="#">Test1<br><em class="environment">Production</em></a>
    </li>
    <li data-product-id="99">
      <a href="#">Test2<br><em class="environment">Production</em></a>
    </li>
    <li data-product-id="98">
      <a href="#">Test3<br><em class="environment">Production</em></a>
    </li>
    <li data-product-id="61">
      <a href="#">Test4<br><em class="environment">Production</em></a>
    </li>
    <li data-product-id="97">
      <a href="#">Test5<br><em class="environment">Production</em></a>
    </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?

Upvotes: 1

Views: 7346

Answers (2)

Cross
Cross

Reputation: 796

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()

Upvotes: 1

Vorsprung
Vorsprung

Reputation: 34327

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

Upvotes: 2

Related Questions