How to move jquery-ui slider using CasperJS

Question

Is there a way to move jQuery UI-Slider with CasperJS ?

I also found this github problem , looking for an opportunity to simply click the left or right side of the slider to move the handle. But that didn't work for me either.

Any idea?

Answer 1

To move the slider works as follows:

casper.mouse.down(100,100); casper.mouse.move(200,200); casper.mouse.up(200,200); 

from

 casper.capture('test1.jpg'); 

called before and after three mouse lines, you should see differene.

Answer 2

This is a complete demo:

 // test_slider.js var casper = require('casper').create(), mouse = require('mouse').create(casper), utils = require('utils'); casper.start('http://jqueryui.com/resources/demos/slider/default.html') .then(function() { var slider = this.getElementBounds('.ui-slider'); var handle = this.getElementBounds('.ui-slider-handle'); this.echo('=== BEFORE ===', 'INFO'); this.echo(this.getElementAttribute('.ui-slider-handle', 'style')); this.capture('before.png'); this.echo('=== DRAGGING ===', 'INFO'); this.mouse.down('.ui-slider-handle'); this.mouse.move(slider.left + slider.width / 2, slider.top + slider.height / 2); this.mouse.up('.ui-slider-handle'); this.echo('=== AFTER ===', 'INFO'); this.echo(this.getElementAttribute('.ui-slider-handle', 'style')); this.capture('after.png'); }) .run(); 

Result

 $ casperjs test_slider.js === BEFORE === left: 0%; === DRAGGING === === AFTER === left: 50%;