如何使用CasperJS移动jquery ui滑块

Question

有没有办法用CasperJS移动jQuery UI–Slider？

我在搜索只点击滑块左侧或右侧移动手柄的可能性时也发现了github问题。但这对我来说并不奏效。

知道吗？

Answer 1

移动滑块的工作方式如下：

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

带有

casper.capture('test1.jpg');

调用之前和之后的三个鼠标行，您应该会看到差异。

Answer 2

这是一个完整的演示：

// 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();

结果

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