如何使用 CasperJS 移动 jquery-ui 滑块答案

【问题标题】：How to move jquery-ui slider with CasperJS如何使用 CasperJS 移动 jquery-ui 滑块
【发布时间】：2013-08-13 03:18:10
【问题描述】：

有什么方法可以移动jQuery UI – Slider 和CasperJS 吗？

我还发现了这个github issue，同时寻找一种可能性，只需单击滑块的左侧或右侧即可移动手柄。但这对我也不起作用。

有什么想法吗？

【问题讨论】：

标签： jquery-ui slider phantomjs casperjs

【解决方案1】：

这是一个完整的演示：

// 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%;

【讨论】：

【解决方案2】：

移动滑块的工作原理如下：

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

与

casper.capture('test1.jpg');

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

【讨论】：

您应该将其与casper.getElementBounds 结合使用以获得通用解决方案，因为您无法始终知道滑块在哪里，或者说知道起来很麻烦。
当然。我只是想展示如何用鼠标移动东西。