title: Testing JQuery-UI Slider in Casper.js
body: <p>I have a slider created using JQuery-UI which has 4 slider segments. The structure is something like this:</p>
  
  <pre><code>&lt;div id="mySlider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all disabled"&gt;
    &lt;div class="ui-slider-segment" title="1"&gt;
    &lt;div class="ui-slider-segment" title="2"&gt;
    &lt;div class="ui-slider-segment" title="3"&gt;
    &lt;div class="ui-slider-segment" title="4"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Initially the slider has the 'disabled' class. When I click on any segment of the slider, it triggers the slideChange event and the event handler which I wrote for that event removes the class 'disabled'. This works as expected in Chrome and Firefox browsers.</p>
  
  <p>My problem occurs when I test this in casper.js. I've tried the following one after the other without success.</p>
  
  <p>I followed the solution posted here: <a href="https://stackoverflow.com/questions/18176369/how-to-move-jquery-ui-slider-with-casperjs">How to move jquery-ui slider with CasperJS</a></p>
  
  <pre><code>//left and top co-ordinates of the segments fetched using element.getBoundingClientRect()
  this.mouse.down(242.890625,488.75); 
  this.mouse.move(214.46875,403.9375);
  this.mouse.up(214.46875,403.9375);
  </code></pre>
  
  <p>I can't use CSS3 selectors for the triggering mousedown in casper.js, as there are no IDs for the segments, and every segment has the same classes (dynamically generated by JQuery-UI).</p>
  
  <pre><code>  var slide = casper.evaluate(function(){
          var sliderId = $('#mySlider');
          sliderId.slider('value',2);
    });
  
    casper.then(function(){
      var sliderClass = casper.evaluate(function(){
        return document.getElementById('mySlider').className;
      });
      console.log(sliderClass); //still contains the class 'disabled'
    });
  </code></pre>
  
  <p>Where am I going wrong? I've included both jquery and jquery-ui libraries. Is there any other way? </p>