select fields change value

[shacky]

It wasn't implemented, so quick work around in casper.js:

• uncomment: d[EventTypes.Change] = "change";
• add function:

CasperRenderer.prototype.change = function(item) {
var tag = item.info.tagName.toLowerCase();
if(tag=='select') {
var selector;
selector = this.getFormSelector(item) + this.getControl(item);
selector = '"' + selector + '"';
this.stmt('casper.waitForSelector('+ selector + ',');
this.stmt(' function success() {');
this.stmt(' test.assertExists('+ selector + ');');
this.stmt(' this.evaluate(function(valueOptionSelect){');
this.stmt(' $('+ selector +').val(valueOptionSelect);');
this.stmt(' $('+ selector +').trigger("change");');
this.stmt(' },"'+ item.info.value +'");');
this.stmt(' },');
this.stmt(' function fail() {');
this.stmt(' test.assertExists(' + selector + ');')
this.stmt('});');
}
}

[ebrehault]

Thank you for your proposal. Unfortunately there are two problem here:

• we must not trigger the change event by script because it might pollute the test. We must reproduce what the user would do (click on the select, then click on one of its entries), and it should produce a change event;
• we cannot use JQuery in an evaluate function, because it would make an error if the targeted page does not have JQuery.

I will try to find a solution to enable a correct select behaviour in Resurrectio.

[herryhou]

ebrehault, have you find solutions to avoid the trigger change event?

For now, I follow shacky's idea to work around this issue (without the jQuery part)

CasperRenderer.prototype.change = function(item) {
  // the submit has been called somehow (user, or script)
  // so  trigger 'SELECT' only

  var tag = item.info.tagName.toLowerCase();
  if(tag=='select' && item.info.value) {
    var selector;
    selector = this.getFormSelector(item) + this.getControl(item);
    selector = '"' + selector + '"';
    this.stmt('casper.waitForSelector('+ selector + ',');
    this.stmt('    function success() {');
    this.stmt('        test.assertExists('+ selector + ');');
    this.stmt('        this.evaluate(function(valueOptionSelect){');
    this.stmt('            document.querySelector('+selector+').value = "'+item.info.value+'";');
    this.stmt('            return true;');
    this.stmt('        });');
    this.stmt('        // Firing onchange event
    this.stmt('        this.evaluate(function() {');
    this.stmt('            var element = document.querySelector(' + selector + ');');
    this.stmt('            var evt = document.createEvent("HTMLEvents");');
    this.stmt('            evt.initEvent("change", false, true);');
    this.stmt('            element.dispatchEvent(evt);');
    this.stmt('        });');
    this.stmt('    },');
    this.stmt('    function fail() {');
    this.stmt('        test.assertExists(' + selector + ');');
    this.stmt('});');
  }
}