javascript - CasperJS数据不出现

Question

我尝试提交以下不带表单标签的请求。我可以看到脚本填写了输入字段并提交了数据，但不幸的是加载数据不会出现在 html 输出中。也许是自动完成问题？

交易表标题:

<div id="js_dealform_querycenter" class="dealform_querycenter cf  dealform_homepage calendar_state_indicator">
 <div class="dealform_query_go">
 <button type="button" id="js_go" class="button search">Suchen</button>
</div>
<div class="dealform_query_input ">
<input type="text" id="js_querystring_shadow" class="querystring_shadow placeholder " autocomplete="off" 
spellcheck="false" data-default="München" value=""/>
<input type="text" id="js_querystring" class="querystring " tabindex="1" autocomplete="off" spellcheck="false"
data-pathname="München"data-pathid="3577" data-initialized="0" 
onkeydown="if(0==this.getAttribute('data-initialized')){document.getElementById('js_querystring_shadow').value=''}" value="München"/>
<div id="js_short_dealinfos" class="short_dealinfos  userdefined">
  <button class="dealinfosbutton_small">
    <span class="img_sprite_moon dealbutton_calendar"><!-- --></span>
    <span class="img_sprite_moon roomtype roomtype7"><!-- --></span>
  </button>
  <div class="dealinfosbutton hidden_phone">
    <span class="state_indicator_date_from" id="date_from">So, 18.05</span>
    <div class="state_indicator_date_divider">–</div>
      <span class="state_indicator_date_to" id="date_to">Mo, 19.05</span>
      <span class="img_sprite_moon roomtype roomtype7"></span></div>
    </div>
  </div>
</div>

卡斯帕脚本:

casper = require('casper').create({
    waitTimeout: 20000,
    viewportSize: {
        width: 1024,
        height: 768
    },
    verbose: true,
    logLevel: 'debug',
    userAgent: 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)'
});

casper.start('http://www.example.com/', function() {
//this.debugPage();
}, 7000);

casper.then(function() {
 this.evaluate(function () {
        document.getElementById('js_querystring_shadow').setAttribute('value', 'München');
        document.getElementById('js_querystring').setAttribute('value', 'München');
    document.getElementById('js_querystring').submit(); 
  });
});

casper.thenClick('#js_go').then(function() {
    require('utils').dump(this.getElementInfo('#js_querystring'));
    this.waitWhileSelector('div.cf item_wrapper', function() {
        this.echo('.selector is no more!');
            this.debugPage();
    });
});


casper.waitWhileSelector('div.cf item_wrapper', function() {
    this.echo('.selector is no more!');
});


casper.then(function() {
  this.waitForResource(this.getCurrentUrl(),function() {
        casper.capture("example.png");
  },25000);
});


casper.run(function() {
    this.exit();
});

知道如何改进吗？

Answer 1

waitForResource 和 waitWhileSelector 实际上是步骤函数，因此您不需要将它们嵌套在 casper.then block 中。既然您这样做了，实际的调用队列将是以下代码。如果页面不是通过 AJAX 加载或在 document.onload 之后构建的，您可以使用 casper.then 而不是 casper.wait*。

缩短:

casper.then(function() {
 this.evaluate(function () {
        document.getElementById('js_querystring_shadow').setAttribute('value', 'München');
        document.getElementById('js_querystring').setAttribute('value', 'München');
    document.getElementById('js_querystring').submit(); 
  });
});

casper.thenClick('#js_go').then(function() {
    require('utils').dump(this.getElementInfo('#js_querystring'));
    // waitWhileSelector queued later
});


casper.waitWhileSelector('div.cf item_wrapper', function() {
    this.echo('.selector is no more!');
});


casper.then(function() {
    // waitForResource queued later
});

casper.waitWhileSelector('div.cf item_wrapper', function() {
    this.echo('.selector is no more!');
    this.debugPage();
});

casper.waitForResource(this.getCurrentUrl(),function() { // this does nothing
    casper.capture("example.png");
}, 25000);