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!

Answer 2

You can apply the Actions class in computation for offsets according to the slider's position and value you are getting so as to automatically manage the range sliders of Selenium WebDriver. Here is a step-by-step approach in computation for `xOffset` when you drag the slider

Steps for Automating the Range Slider

1. Find Slider Handle: You are dealing with the range slider's handle.

2. Offset Calculation: You'll love to know how far to swipe by getting a difference between the value that you want and the one current.

3. Action Class: Here, the action class drag-and-drop would swipe on the calculated position for slider handle.

int desiredValue = 500; // Example value you want to set on the slider

rangeSlidePointer("//div[@id='js-rangeslider-0']/div[@class='rangeslider__handle']", desiredValue);

System.out.println("Enter something in console to quit the browser and driver.");

try {

System.in.read();

} catch (java.io.IOException e) {

e.printStackTrace();

}

driver.close();

driver.quit();

}

void rangeSlidePointer(String locator, int desiredValue) {

WebDriverWait explicitWait = new WebDriverWait(driver, 20);

WebElement sliderHandle = explicitWait.until(ExpectedConditions.elementToBeClickable(By.xpath(locator)));

// Get the width of the slider

WebElement sliderContainer = driver.findElement(By.xpath("//div[@id='js-rangeslider-0))); int sliderWidth = sliderContainer.getSize().getWidth(); int minValue = 10; int maxValue = 1000; int range = maxValue - minValue;

int percentage = (desiredValue-minValue) * 100 / range; // percentage position int targetXOffset = (sliderWidth*percentage/100)-(sliderHandle.getSize().getWidth ()/2);

Actions action = new Actions(driver);

Actions moveSlider = new Actions(driver);

moveSlider.clickAndHold(sliderHandle).moveByOffset(targetXOffset, 0).release().perform();

}

 

Explanation:

1. `desiredValue`: Set this variable to the value you want to achieve on the slider.

2. Calculating the Offset:

- Slider Width: Obtain the width of the slider container.

- Percentage Calculation: Calculate the percentage of the desired value relative to the slider’s minimum and maximum values.

- Offset for Target X: This is a percentage value that is passed to represent the offset as some number of pixels relative to a dimension of the slider handle so that it snaps into the right location.

3. Actions: The slider handle is gripped, slid horizontally by offset pixels, and then released with the `clickAndHold` action method.

 

end.

Replace the `desiredValue` with your desired values.

- This way, you will actually be sure to have appropriate exception handling and initialization of the WebDriver in your real code.

You could now automate the range slider by controlling instead of modifying the input field.