无法使用 CasperJS 触发 GWT 列表框 ChangeHandler答案

【问题标题】：Not possible to trigger GWT listbox ChangeHandler using CasperJS无法使用 CasperJS 触发 GWT 列表框 ChangeHandler
【发布时间】：2015-05-26 17:16:07
【问题描述】：

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

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

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

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

我已经尝试在 select 元素上手动调度 change 事件（页面上没有 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 方法。任何人都可以建议一种方法来使其正常工作吗？

【问题讨论】：

标签： javascript gwt phantomjs html-select casperjs

【解决方案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 或将远程副本添加到 options.remoteScripts 来简单地将 jQuery 加载到页面中：

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

【讨论】：