Thursday, 25 August 2016

Handle Sliders using selenium Webdriver

Now a days, many applications are having sliders to change price range for filtering records.Ex:Travel Domain,E-Commerce websites.



We have to handle this kind of slider while designing effective automation script.There are two ways to handle sliders using Action class.

1) By Using  dragAndDropBy(WebElement source, int xOffset, int yOffset) :

This is method that performs click-and-hold at the location of the source element, moves by a given offset, then releases the mouse.

          //web element
   WebElement slider = driver.findElement(By.xpath("xpath"));

           // Creating Object for a Actions class
    Actions action = new Actions(driver);
         
          // move slider by 300 pixel offset using dragAndDropBy method
  action.dragAndDropBy(slider, 300, 0).build().perform();

2)By using clickAndHold and moveByOffset(int xOffset, int yOffset):
Here Clicks (without releasing) in the middle of the given element using clickAndHold  method and Moves the mouse from its current position to the given offset using moveByOffset method.
          
           //web element
  WebElement slider = driver.findElement(By.xpath("xpath"));

           // Creating Object for a Actions class
   Actions action = new Actions(driver);

           //Moves the mouse from its current position to the given offset.
  action .clickAndHold(slider).moveByOffset(100,0).release().perform();  

Please find below sample code for the same.

Sample Code:
     
public class Slider {
 public WebDriver driver;

 @BeforeClass
 public void start() throws InterruptedException{
     driver = new FirefoxDriver();
     driver.manage().window().maximize();
     driver.get("http://jqueryui.com/demos/slider/");
     Thread.sleep(5000);
 }
 @Test
 public void handleDateSlider() throws InterruptedException{

  //Handle frame
  driver.switchTo().frame(driver.findElement(By.className("demo-frame")));
           //Handling Sliders
  WebElement slider = driver.findElement(By.xpath("//div[@id='slider']/span"));
   Actions action = new Actions(driver);
  action.dragAndDropBy(slider, 300, 0).build().perform();
  //action.clickAndHold(slider).moveByOffset(100,0).release().perform();


 } 

}   



19 comments:

  1. And if that doesn't work, as was the case for me for one slider on our site, have your developer's add in automation hook to control the slider via javascript (as it is often javascript based too), and then call that javascript with Selenium to move the slider. It could be a hidden feature hook that could be disabled by default except when testing.

    ReplyDelete
  2. Sorry,I am not getting your exact requirement.Can you please explain it again?

    ReplyDelete
  3. In my application, the slider is a budget range slider. So how can I give exact amount like 300 using Actions class. Above code is working for me but i am unable to give budget.

    ReplyDelete
  4. Great and I have a neat give: Where Do You Get The Money To Renovate A House split level kitchen remodel

    ReplyDelete