Intern test returns incorrect value for range input

Question

I have a test that checks the value an HTML5 range input.

return this.remote
  // etc.
  .findById('range') 
  .getAttribute("value")
  .then(function(val){
      expect(parseInt(val)).to.equal(2);  
  });

The value is correct when I check its initial value, but if I change the value then check, it has not been updated. I found that the value doesn't update in the developer tools either. I tried using

  .sleep(3000)

between changing the value and calling

  .getAttribute('value')

but that didnt' seem to be the issue.

In this JSfiddle, inspecting the range element with your browser's developer tools will show the title change, but the value does not (even though the value is correctly changed in the textbox). So this may be an issue with the webdriver, but I'd like to know if anyone has run into this issue.

Is this related to the test's failure to get the updated value? Is there another method I can use to read values(attributes)?

Edit: It seems like the browser's onchange/oninput event is not triggering properly (similar problems: WebDriver: Change event not firing and Why does the jquery change event not trigger when I set the value of a select using val()?), and the webdriver is possibly not able to, either. Do I have to add Jquery as a define for my test, even though I only need to use trigger() ? Or is there another solution?

Edit2: I've added a better example of how I'm using the range input in this new JSfiddle. I added plus/minus buttons, which fail to trigger the change event that should update the value attribute of the range input, (and which fails to enter the value into the textbox).

Answer 1

You could fire the change event manually in your test. I was able to get the 'textValue' input in your JSFiddle to update that way and I imagine it might work similarly in your test.

rangeBar = document.querySelector('#range');
function myFire(element, eventType) {
  var myEvent = document.createEvent('UIEvent');
  myEvent.initEvent(
    eventType, // event type
    true,      // can bubble?
    true       // cancelable?
  );
  element.dispatchEvent(myEvent);
}
myFire(rangeBar, 'change');

This comes up often enough that I have a helper in my base test class (Java)

public enum SeleniumEvent
{blur,change,mousedown,mouseup,click,reset,select,submit,abort,error,load,mouseout,mouseover,unload,keyup,focus}

public void fireEvent(WebElement el, SeleniumEvent event)
{
    ((JavascriptExecutor) getDriver()).executeScript(""+
            "var element = arguments[0];" +
            "var eventType = arguments[1];" +
            "var myEvent = document.createEvent('UIEvent');\n" +
            "myEvent.initEvent(\n" +
            "   eventType, // event type\n" +
            "   true,      // can bubble?\n" +
            "   true       // cancelable?\n" +
            ");\n" +
            "element.dispatchEvent(myEvent);", el, event.toString());
}

Another thought. getAttribute("value") might not be getting what you think it does. In JavaScript, document.querySelector('#range').getAttribute('value') always returns the hard-coded value attribute (i.e. the default or initial value), not the input's current value. document.querySelector('#range').value returns the current value.