使用Selenium WebDriver设置滑块的值

问题描述

我有一个像这样的滑块:

I have a slider like this:

它是由angular-js编写的，代码如下:

It is written by angular-js, the code is as below:

<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-滑块

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

I want to click to slide the slider-point to the value, for example 4 or 6. But I don't know how to move the slider. Can anybody have any suggestions. My tests are written in Java. Thanks

推荐答案

您没有指定所需的语言，因此我用Java编写了一些代码，希望您可以使用或改编.概念是获取滑块的容器元素，然后基于宽度的比例因子在元素上单击(一次)以获取所需的值.

You didn't specify the language you wanted so I've written some code in Java that hopefully you can use or adapt. The concept is get the container element for the slider and then click (once) on the element based on a scale factor for the width to get the desired value.

我在此页面上找到了一个示例angular.js滑块编写此代码，即可正常工作.首先，我们有一个函数，该函数使用要设置的值和滑块的WebElement.该功能使用滑块元素的宽度和滑块的最小/最大值来确定比例，然后单击正确的偏移量以设置正确的值.

I found an example angular.js slider on this page that I used to write this code and it's working. First we have a function that takes the value to be set and the WebElement for the slider. The function uses the width of the slider element and the min/max values of the slider to determine the scale and click the correct offset to set the correct value.

/**
 * 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)方法并单击正确的位置.

This slider has a value range of 0-255 so to get the desired value of 150 we get the min and max values from the element itself and then determine the scale factor for the width based on the width of the element to determine the width offset. The height offset is just half of the height of the element which assumes that the slider is in the middle of the element. All that's left after that is to use the .moveToElement(toElement, xOffset, yOffset) method of Actions and click the correct location.

这篇关于使用Selenium WebDriver设置滑块的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！