Невозможно запустить GWT listbox ChangeHandler с использованием CasperJS

Question

Я пишу тесты с использованием CasperJS для устаревшего кода GWT (2.3).

Я могу изменить выбранное значение ListBox.

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

Но это не вызывает метод onChange() обработчика изменений в ListBox.

Я попытался вручную диспетчерское событие изменения на выборе элемента (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); 

Чтобы сделать эту работу, вы можете просто загрузить JQuery в страницу, либо добавив локальную копию options.clientScripts или удаленную копию в 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