CasperJS无法使用CSS选择器或xPath查找元素

Question

I'm trying to click on the 'Next' button on the Google search using CasperJS and I'm getting the following error:

CasperError: Cannot dispatch mousedown event on nonexistent selector: #pnnext

The button is conveniently tagged with the id #pnnext . I tried using both CSS selectors as well as xPath using several different methods to perform the click. They are outlined below:

var casper = require('casper').create({
    verbose: true,
    logLevel: "debug",
    waitTimeout: 20000
});

casper.defaultWaitForTimeout = 20000

var x = require('casper').selectXPath;

var config = {
    url: 'https://www.google.co.uk/search?site=&source=hp&q=house&oq=house&gs_l=hp.3..35i39l2j0l2j0i3j0l5.136980.137617.0.137690.7.7.0.0.0.0.106.450.3j2.5.0.starcytweb...0...1.1.62.hp..4.3.302.0.IK858rPmk0I'
};

casper.start(config.url);

/* INSERT CODE HERE */

casper.then(function() {
    this.capture('screenshot.png');
    console.log('New location is ' + this.getCurrentUrl());

    this.page.close();
    this.exit();
});

casper.run();

Attempt #1

casper.thenClick("#pnnext");

Attempt #2:

casper.then(function(){
    this.evaluate(function() {
        document.getElementById('pnnext').click();
    });
});

Attempt #3:

casper.then(function(){
    this.evaluate(function() {
        document.querySelector('#pnnext').click();
    });
});

Attempt #4 (times out):

casper.waitForSelector("#pnnext", function(){
    this.click('#pnnext');
}, function(){ console.log("Time out"); }, 20000);

Attempt #5:

casper.then(function(){
    this.click(x('//*[@id="pnnext"]'));
});

Just a side note, I've also tried executing this sample code to no avail. Am I doing something wrong?

---

phantomjs -> v1.9.8

casperjs -> v1.1.0-beta3

Answer 1

This is a Google page, so it won't look the same in your desktop browser and CasperJS through PhantomJS. That difference will be based on user agent string, viewport size and a few other metrics.

Some things that you should do:

1. Check that the page is actually loaded and the element is present with casper.capture()
2. Check that a sub tree that is supposed to contain the element in question actually contains it with casper.getHTML('#nav td:last-child') ¹

This is the markup how I see:

<td style="text-align:left" class="b">
  <a style="text-align:left" href="/search?q=house...">
    <span style="background-position:-96px 0;width:71px" class="csb"></span>
    <span style="display:block;margin-left:53px">Weiter</span>
  </a>
</td>

You can try for example a selector based on the link text like so:

casper.click(x('//span[text()="Weiter"]/..')); // click the `a` element

¹ This selector is based on my localization of google.co.uk which might not be the same for you.

Answer 2

I have used solution like this, maybe someone will find it useful:

casper.then(function() {
  this.capture('screenshot.png');
  console.log('New location is ' + this.getCurrentUrl());

  // something like this
  this.wait(someNumberInMsecs).then(function() {
    this.click("#pnnext");
  });

  ...
});