使用 Selenium WebDriver 设置滑块的值

Question

我有一个这样的滑块：

由angular-js编写，代码如下：

<div class="ng-isolate-scope" data-range-slider-directive="" data-model="dataModel" data-model-property="surroundingEvnt" data-floor-value="0" data-ceil-value="10" data-max-value-plus="true">
    <div class="rzslider ng-isolate-scope" data-rz-slider-model="model[modelProperty]" data-rz-slider-options="slider.options">
        <span class="rz-bar-wrapper">
        <span class="rz-pointer rz-pointer-min" ng-style="minPointerStyle" role="slider" aria-valuenow="0" aria-valuetext="0" aria-valuemin="0" aria-valuemax="10" tabindex="0" style="left: 0px;"></span>
        // a lot of spans here            
    </div>
</div>

这是插件：https://github.com/angular-slider/angularjs-slider

我想单击以将滑块点滑动到值，例如 4 或 6。但我不知道如何移动滑块。任何人都可以有任何建议。我的测试是用 Java 编写的。谢谢

Answer 1

你没有指定你想要的语言，所以我用 Java 编写了一些代码，希望你可以使用或适应。这个概念是获取滑块的容器元素，然后根据宽度的比例因子单击（一次）元素以获得所需的值。

我在 this page 上找到了一个示例 angular.js 滑块，我用它来编写此代码并且它正在工作。首先我们有一个函数，它接受要设置的值和滑块的WebElement。该函数使用滑块元素的宽度和滑块的最小值/最大值来确定比例并单击正确的偏移量来设置正确的值。

/**
 * Sets the value on a horizontal angular.js slider
 * 
 * @param value
 *            the desired value
 */
public static void setHValue(WebElement slider, double value)
{
    double minValue = Double.parseDouble(slider.getAttribute("min"));
    double maxValue = Double.parseDouble(slider.getAttribute("max"));
    int sliderH = slider.getSize().height;
    int sliderW = slider.getSize().width;
    System.out.println(sliderH);
    System.out.println(sliderW);
    Actions action = new Actions(driver);
    action.moveToElement(slider, (int) (value * sliderW / (maxValue - minValue)), sliderH / 2).click().build().perform();
}

调用它看起来像这样。

driver.get("https://material.angularjs.org/latest/demo/slider");
WebElement slider = driver.findElement(By.id("red-slider"));
setHValue(slider, 150);

此滑块的值范围为 0-255，因此要获得所需的值 150，我们从元素本身获取最小值和最大值，然后根据元素的宽度确定宽度的比例因子以确定宽度偏移。高度偏移只是元素高度的一半，假设滑块位于元素的中间。之后剩下的就是使用Actions的.moveToElement(toElement, xOffset, yOffset)方法并点击正确的位置。