How fill a search field with CasperJS

Question

I need to put "75018" in search field in this site and click on search button with CasperJS. i read this question, and follow the instruction, i get a screenshot for debuging, but it doesnt click in button.

i tried this

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

var casper = require('casper').create({
        clientScripts:  [
        'jquery-1.10.1.min.js'
        ],
        pageSettings: {
        loadImages:  true,     
        loadPlugins: true,
        userAgent: 'Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.2 Safari/537.36',
        webSecurityEnabled: false,
        ignoreSslErrors: false,
        sslProtocol: "tlsv1"
    },
    verbose: true,
    logLevel: 'warning'
//    logLevel: 'debug'
});

var utils = require('utils');
var fs = require('fs');
var system = require('system');

casper.options.viewportSize = {width: 1920, height: 1080};
var counter = 0;
var dejaexclu = false;    

function getData(filepath){

  var eol = system.os.name == 'windows' ? "\r\n" : "\n";
  var data = fs.read(filepath);
  //utils.dump(data);
  var arrdata = data.split(eol);
  //utils.dump(arrdata);
  return arrdata;
}

function count(){
  counter = counter +1;
  return counter;
}

casper.start('http://www.chronodrive.com', function() {
   console.log("page loaded");
   this.test.assertExists('form#searchShopForm', 'form is found');
   this.fill('form#searchShopForm', { 
        searchField: '75018'
    }, true);
});
casper.then(function() {
  console.log("photo");

      console.log("photo");
        this.click('#blinksubmit');
        this.captureSelector("screenshot.png", "html");
           console.log("photo"); 
});
casper.run();

my screen shot that shows i can put the value in field but it doesnt click

Answer 1

Try this instead

this.fillSelectors('form#searchShopForm', { 
        "input[id='searchField']" : "75018"
    }, true);

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

or put quotes around your searchField

e.g.

'searchField' : '75018'

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

Ah sorry, I see this is an auto suggest and doesn't have the concept of a button to submit. Therefore change the true to false and then try to use sendkeys to send the enter key e.g.

CasperJS: swallows special keys like Enter?

Edit

This code works the issue isn't with casper it is with the search box and animation. That is things take some time to show. The golden rule of thumb with casper is everytime you ask for a new resource/page/script/html/json then its a good idea to use a casper.waitForXXX this allows for the time it takes to wait for the server or for animations etc.

var casper = require('casper').create({
    viewportSize : {width: 1920, height: 1080}
});


casper.start('http://www.chronodrive.com/prehome');

casper.waitForText("Pour toutes", function() {

    this.sendKeys('#searchField', '06150 bordeaux', {keepFocus: true});
    this.sendKeys('#searchField', casper.page.event.key.Enter , {keepFocus: true});

});

casper.waitForText("Cannes", function() {
    casper.capture('tmp.jpg');
});

casper.run();