Selenium：如何自动化Range滑块

Posted 2021-04-07

我想根据给定的参数值自动化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();
}

从Range滑块应用程序中观察。

<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的答案，以便我可以自动化以下URL：

参考网址

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更改滑块。

答案

我能想到的最简单的方法是从滑块和手柄获取尺寸和位置，并使用这些来确定您的运动范围。

滑块div的宽度为560 px，手柄div的宽度为40 px，因此您的总运动范围为520 px。

如果从滑块元素中获得位置，则会得到如下内容：

x: 176
y: 462

如果你从handle元素获得位置，你会得到类似的东西：

x: 334
y: 452

在这种情况下，您可以将把手元素520 px从176 px开始移动到696 px（176 + 520）。当x = 334，您可以将把手158 px向左移动或362 px向右移动。

另一答案

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

    @Test
    public void testSlider(){
        System.setProperty("webdriver.chrome.driver", "C:ProjectsSeleniumDriverschromedriver.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);

    }