CasperJS输入更改事件触发

Question

我尝试使用CasperJS编辑表单外部的输入字段，然后触发与该更改关联的任何事件并让网站重新加载。

经过一番调查，似乎只是加载页面就会产生“取消操作”＆＃39;资源错误（代码5）。

该网站为here。

这是我的代码的简化版本：

var commodity = 'Pears'.toUpperCase();

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    viewportSize: {
        width: 1440,
        height: 900
    }
});

//HANDLE AND ECHO each of resource.error, page.error, remote.message, and casper.page.onResourceTimeout

var USDA_URL = 'http://cat.marketnews.usda.gov/cat/?shortcut=snapshot';
casper.start(USDA_URL);

casper.wait(7000, function() {
    this.withFrame('dashboardDisplay', function() {
        this.withFrame('dashboardTimePeriodDisplay', function() {
            this.sendKeys('.rcbInput', commodity, {keepFocus: true});

            //INSERT ONE OF THE OPTIONS HERE
        });
    });
});


casper.wait(7000, function() {
    this.capture('after_change.png');
});

casper.run();

我尝试了四种不同的方法，主要基于我浏览网站时的效果。

方法1：单击下拉列表

this.click('li.listItem[title="' + commodity + '"]');

选择正确的列表项似乎应该有效，但我相信此查询失败，其余代码不会执行，包括capture()。此选项会导致第二个操作已取消＆＃39;资源错误。

方法2：单击结果按钮

this.click('.actionBtn');

当网站上的商品是半打字时单击会导致列表刷新并触发更改。在这种情况下它不会。

方法3：按Enter键

this.page.sendEvent("keypress", this.page.event.key.Enter);

在输入商品时按Enter键会导致在实际浏览网站时触发更改，但同样不会使用CasperJS。 （这也是我在{keepFocus: true}中sendKeys()的原因。

方法4：手动触发更改

this.evaluate(function() {
    var select = document.getElementsByClassName('rcbInput')[0];
    var evt = document.createEvent("UIEvents");
    evt.initUIEvent("change", true, true);
    select.dispatchEvent(evt);
});

最后，我采用了javascript方式并尝试手动触发更改事件。 select是正确的对象，但更改无效。我还尝试使用HTMLEvent而不是UIEvent，但实际上出现了javascript错误（特别是TypeError: undefined is not a function行上出现initUIEvent()错误，因为显然{{1}在那一点上是未定义的。）

结论......

只有第一种方法会导致实际错误;所有其他人都没有工作。

因为这里有很多不同的问题，我认为我的每一种方法都略有偏差。任何关于它们的任何提示，只是为了让它发挥作用，将不胜感激。另外一种全新的方法也很好。谢谢！