Selenium：如何自动化范围滑块

Question

我想根据给定的参数值自动化Range Slider。我刚刚尝试使用Actions class，但在计算移动 xOffset 值时遇到了问题。

编写我测试过的代码。

void automateApplication( RemoteWebDriver driver ) {
    driver.get( "http://rangeslider.js.org/" );
    driver.manage().window().maximize();
    //Thread.sleep( 1000 * 60 * 1 );

    rangeSlidePointer("//div[@id='js-rangeslider-0']/div[2]", 147, 0);

    System.out.println("Enter something in console to quit the browser and driver.");
    try {
        System.in.read();
        System.in.read();
    } catch (java.io.IOException e) {
        e.printStackTrace();
    }

    driver.close();
    driver.quit();
}
void rangeSlidePointer( String locator, int xOffset, int yOffset ) {
    WebDriverWait explicitWait = new WebDriverWait( driver, 1000 * 60 * 2 );
    By findBy = By.xpath( locator );
    WebElement sliderElement = explicitWait.until(ExpectedConditions.elementToBeClickable( findBy ));
    Actions moveSlider = new Actions(driver);
    Action action = moveSlider.dragAndDropBy(sliderElement, xOffset, yOffset).release().build();
    // Actions action = moveSlider.moveToElement(sliderElement).clickAndHold().moveByOffset(xOffset,yOffset).release();
    action.perform();
}

从 Ranged 滑块应用程序中观察到。

<section id="top">
    <input type="range" min="10" max="1000" step="10" value="300" data-rangeslider="" 
        style="position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0;">
    <div class="rangeslider rangeslider--horizontal" id="js-rangeslider-0">
        <div class="rangeslider__fill" style="width: 529.495px;"></div>
        <div class="rangeslider__handle" style="left: 509.495px;"></div>
    </div>
    <output id="js-output">980</output>
</section>

var elem = $x("//div[@id='js-rangeslider-0']")[0];
var offset = elem.offsetLeft - elem.offsetParent.offsetLeft;
console.dir( offset );

var elem = $(".rangeslider__handle");
var offset = elem.offset().left - elem.parent().offset().left;
console.dir( offset );
/*
tagName|nodeName = "DIV"
    clientWidth, offsetWidth, scrollWidth = 560
    clientHeight, offsetHeight, scrollHeight = 30

firstChild clientWidth = 419
           clientHeight = 20

lastChild clientWidth = 40
          clientHeight = 40

type="range" min="10" max="1000" step="10" value="300"
update=760
*/

有关更多信息，请参阅此图片：

我需要关于XPath 或使用Actions Class 的答案，以便我可以自动化以下网址：

参考网址

https://www.hdfcbank.com/personal/personal-loan-emi-calculator https://www.icicibank.com/calculators/home-loan-emi-calculator.html https://www.kotak.com/en/calculators/personal-loan-emi-calculator.html

正如@Murthi 建议的那样，我可以使用以下代码通过更改输入字段的值来自动化http://rangeslider.js.org/。

var ele = $('input[type="range"]');
ele.val(50).change();

但我不想改变输入字段的值，只需要根据其句柄rangeslider__handle或rangeslider rangeslider--horizontal更改滑块。

Answer 1

我能想到的最简单的方法是从滑块和手柄中获取大小和位置，并使用它们来确定您的运动范围。

滑块div的宽度是560 px，手柄div的宽度是40 px，所以你的总运动范围是520 px。

如果你从滑块元素中获取位置，你会得到类似：

x: 176
y: 462

如果您从句柄元素中获取位置，您会得到如下内容：

x: 334
y: 452

在这种情况下，您可以将句柄元素 520 px 从 176 px 移动到 696 px (176 + 520)。当x = 334时，您可以将手柄158 px向左移动或362 px向右移动。

Answer 2

我尝试过使用动作类和 java 脚本执行器。但是 java 脚本执行器的工作准确率是 100%。但是动作类并不是100%准确的。查找以下代码以获取详细信息。更好的是，你可以使用java脚本。

    @Test
    public void testSlider(){
        System.setProperty("webdriver.chrome.driver", "C:\\Projects\\SeleniumDrivers\\chromedriver.exe");
        WebDriver driver= new ChromeDriver();
        driver.manage().window().maximize();

        driver.get("http://rangeslider.js.org/");

        //To slide using action class
        slide(driver, 500);

        //To slide using jQuery
        slideUsingJQuery(driver, 100);


    }

  public void slide(WebDriver driver, int value){

        WebElement slider=driver.findElement(By.id("js-rangeslider-0"));
        WebElement sliderHandle=driver.findElement(By.cssSelector("#top .rangeslider__handle"));
        int width=slider.getSize().getWidth();
        int x=(int)Float.parseFloat(sliderHandle.getCssValue("left").replace("px", ""));
        System.out.println(width);
        float min=10;
        float max=1000;
        float offsetX=width/(max-min)*value;
        System.out.println(offsetX);

        new Actions(driver).dragAndDropBy(sliderHandle, -x, 10).dragAndDropBy(sliderHandle, (int)offsetX, 10).perform();

    }

    public void slideUsingJQuery(WebDriver driver, int value){
        WebElement slider=driver.findElement(By.cssSelector("input[type='range']"));
        ((JavascriptExecutor)driver).executeScript("$(arguments[0]).val("+value+").change()", slider);

    }