selenium webdriver move slider on left side

Question

I want to move slider on left side of slider-bar. However, selenium webdriver moves it to right side but it does not move to left side. I want to move slider to 25% of total width of slider-bar. I am using below given code with java 1.8 with selenium 2.44. I have tried all the option using up,down,left,right arrow key but still not able to achieve it.

I would appreciate your inputs.

package RandD;

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class test{
static WebDriver driver;
public static void main(String[] args)

{
    driver = new FirefoxDriver();
    driver.get("http://jqueryui.com/slider/");
    driver.switchTo().frame(0);
    slider();
}

public static void slider(){
    WebElement slider = driver.findElement(By.id("slider"));
    int width=slider.getSize().getWidth();
    Actions move = new Actions(driver);
    org.openqa.selenium.interactions.Action action  = move.dragAndDropBy(slider, ((width*25)/100), 0).build();
    action.perform();
    System.out.println("Slider moved");
}
}

Answer 1

I always use this code to move a slide bar:

action.click(webElement).build().perform();
Thread.sleep(1000);
for (int i = 0; i < 10; i++) {
    action.sendKeys(Keys.ARROW_LEFT).build().perform();
    Thread.sleep(200);
}

Answer 2

Well, I was not able to move the slider using all the possible option using dragAndDropBy and clickAndHold. However, using below snippet I was able to move slider to exact location of slid-bar. I am still wondering what was wrong in above code which does not move the slider to exact location as I was expecting.

you can set choose value of X is any its depends of width of your slider and if you use for loop to drag pointer on multiple position

public static void slider(){
  x=10;
    WebElement slider = driver.findElement(By.id("slider"));
    int width=slider.getSize().getWidth();
    Actions move = new Actions(driver);
    move.moveToElement(slider, ((width*x)/100), 0).click();
    move.build().perform();
    System.out.println("Slider moved");
}

Answer 3

I've used this with success.

var sliderA = driver.FindElementsByCssSelector(".ccwa")[0];
        var sliderB = driver.FindElementsByCssSelector(".ccwa")[1];
        Actions action = new Actions(driver);
        for (int i = 0; i < 5; i++)
        {
            action.DragAndDropToOffset(sliderA, 50, 0).Build().Perform();
            Thread.Sleep(300);

            action.DragAndDropToOffset(sliderB, 50, 0).Build().Perform();                
            Thread.Sleep(300);
        }

Answer 4

Simply add a minus to the 25

org.openqa.selenium.interactions.Action action  = move.dragAndDropBy(slider, ((width*-25)/100), 0).build();

• Positive values go to the right
• Negative values go to the left

The same applys to scrolling pages.

Also just a note for you. I had some issues with this approach due to the width I wanted to move being a decimal amount. I suggest actually setting the attribute DOM value for the slider instead

Answer 5

Below code worked fine for my application:

   WebElement slider = driver.findElement(By.xpath("//input[@id='savingsSlider']"));
        for(int i=0;i<=30;i++){
                         //Slide to RIGHT
                        slider.sendKeys(Keys.ARROW_RIGHT);
                        //Slide to LEFT
                        slider.sendKeys(Keys.ARROW_LEFT);
                    }

Answer 6

You need to first switch to the iframe it is contained in ie

<iframe class="demo-frame" src="/resources/demos/slider/default.html">

after that you can perform slide using JavascriptExecutor:

((JavascriptExecutor) driver).executeScript("document.getElementsByTagName('span')[0].style.left='50%'"); // 50% or whatever you like to provide.

Answer 7

The following code works for slide bars with two sliders:

    WebElement sliderA = driver.findElement(By.xpath("Left slider xpath"));
    Actions move = new Actions(driver);
    move.dragAndDropBy(sliderA,10, 0).click();
    move.build().perform();


    WebElement sliderB = driver.findElement(By.xpath("Right slider xpath"));

    move.dragAndDropBy(sliderB, -50, 0).click();
    move.build().perform();