javascript - 无法使用 CasperJS 触发 GWT 列表框 ChangeHandler

Question

我正在使用 CasperJS 为旧版 GWT (2.3) 代码编写测试。

我可以更改列表框的选定值。

document.querySelector('#id_of_select').selectedIndex = 1;

但这不会触发 ListBox 上更改处理程序的 onChange() 方法。

我尝试在选择元素上手动调度更改事件(jquery 在页面上不可用):

var evt = document.createEvent("manualchange");
        evt.initEvent("change", false, true);
document.querySelector('#id_of_select').dispatchEvent(evt);

我也尝试过这种方法。

document.querySelector('#id_of_select').dispatchEvent(new Event('change', { 'bubbles': true }));

这两种方法都不会触发更改处理程序的 onChange 方法。任何人都可以建议一种方法来使其正常工作吗？

Answer 1

jQuery 方式似乎适用于 such cases :

casper.fillSelect = function(selectSelector, id){
    this.evaluate(function(sel, id) {
        var select = jQuery(sel);
        select[0].selectedIndex = id;
        select.change();  
    }, selectSelector, id);
};

casper.fillSelect('#id_of_select', 1);

要实现这一点，您只需将本地副本添加到 options.clientScripts 即可将 jQuery 加载到页面中。或远程复制到 options.remoteScripts :

var casper = require("casper").create({
    clientScripts: [ "jquery.min.js" ],
    // or
    remoteScripts: [ "http://code.jquery.com/jquery-1.11.3.min.js" ]
});

还有another way通过在选择字段上按下鼠标按钮并在特定选项上释放鼠标按钮来执行此操作:

casper.mouse.down("#id_of_select");
casper.mouse.up('#id_of_select > option:nth-child(2)'); // the second option