How To Move JQuery Slider In Selenium WebDriver

To drag and drop any element on other element, We can use moveToElement or dragAndDrop methods of Actions class as described In THIS POST. Same way, To move element by specific X,Y Pixel offset, We can use dragAndDropBy method of Actions class as described on THIS PAGE. To select multiple JQuery Items, We can use clickAndHold method of Actions class. Example Is given on THIS PAGE. So Actions class has many different such methods to perform this kind of tricky operations on your web application using selenium WebDriver.

If you have observed, Now a days, many web applications are using sliders to set/change price range limits to filter records. You can find this kind price range sliders on E-Commerce websites. Actions class can help us to move this kind of sliders In selenium webdriver test case. We can do same thing In two different ways or I can say using different methods of Actions class as shown In bellow example.

package Testing_Pack;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class moveSlider {
 
 WebDriver driver = null;
 
 @BeforeTest
    public void setup() throws Exception {  
  driver = new FirefoxDriver();
         driver.manage().window().maximize();
         driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
         driver.get("http://only-testing-blog.blogspot.com/2014/09/selectable.html");
    } 
 
 @Test
 public void selectItems() throws InterruptedException {  
  //Locate slider pointer.
  WebElement dragElementFrom = driver.findElement(By.xpath("//span[contains(@class, 'ui-slider-handle')]"));  
        
  //To Move jQuery slider by 100 pixel offset using dragAndDropBy method of Actions class.
  new Actions(driver).dragAndDropBy(dragElementFrom, 100, 0).build().perform();
  Thread.sleep(5000);
  
  //After 5 seconds, This will Move jQuery slider by 100 pixel offset using the combination of clickAndHold, moveByOffset and release methods of Actions class.
  new Actions(driver).clickAndHold(dragElementFrom).moveByOffset(100,0).release().perform();
 }
}

If you see In above example, I have used  dragAndDropBy method to move element by 100 pixel offset In horizontal direction. Same thig we can do using clickAndHold and moveByOffset methods as shown In above example.

<< PREVIOUS || NEXT >>