selenium-webdriver- Selenium: how to automate Range sliders

Question

I want to automate the Range Slider based on the given parameter values. I just tried with Actions class but facing the problem in calculation of moving xOffset value.

Code what I have tested.

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();

}

Observed from the Ranged slider application.

<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

*/

For more information look at this image:

I tried to automate http://rangeslider.js.org/ by changing the value of input field, using the below code.

var ele = $('input[type="range"]');

ele.val(50).change();

But I didn't want to change the value of the input field, just need to change the slider based on its handle rangeslider__handle or rangeslider rangeslider--horizontal.

Answer 1

I have tried with action class and javascript executor. But Java script executor is working with 100% accuracy. But action class is not 100% accurate. Find the below code for details. Better, you can use javascript.

   @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);​​​​​​​

    }

I hope this helps you! 

If you are interested to learn Selenium on a much deeper level and want to become a professional in the testing domain, you should enroll yourself in industry-based Selenium online courses!