如何使用CasperJS填充搜索字段

Question

我需要在this site的搜索字段中输入“75018”，然后点击带有 CasperJS 的搜索按钮。 我read this提问，并按照说明操作，我获得了一个关于debuging的截图，但它没有点击按钮。

我试过这个

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

我的屏幕截图显示我可以将值放在字段中但不点击

Answer 1

改为尝试

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

请参阅http://docs.casperjs.org/en/latest/modules/casper.html#fillselectors

或在搜索字段周围加上引号

e.g。

'searchField' : '75018'

请参阅http://docs.casperjs.org/en/latest/modules/casper.html#fill

<击>

抱歉，我发现这是一个自动建议，并没有提交按钮的概念。因此，将true更改为false，然后尝试使用sendkeys发送回车键，例如

CasperJS: swallows special keys like Enter?

修改

此代码的工作原理与casper无关，它与搜索框和动画有关。这需要一些时间来展示。使用casper的黄金经验法则是每次你要求新的资源/ page / script / html / json时，最好使用 casper.waitForXXX 这允许等待服务器或动画等的时间。

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