Post#67.How to interact with sliders in Selenium WebDriver

How to interact with sliders in Selenium WebDriver

Sliders allow users to select a value by dragging and dropping a handle. Concept would be very much similar to the old article on mouse event.

Note:

ü  Slider bar size may or may not vary based on browser size.

ü  You may need to slide either by number of pixels or percentage of slider bar length.

Scenario:
1. Launch https://jqueryui.com/slider/
2. Move jQuery slider by 100 pixel offset

Java Code:

package pack5;

import java.util.List;

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.Actions;

import org.openqa.selenium.interactions.Action;

public class JQuerySlider {

  public static void main(String[] args) throws InterruptedException {

  System.setProperty("webdriver.gecko.driver", "D:\\BrowserDrivers\\geckodriver.exe");

   WebDriver driver = new FirefoxDriver();

 

  driver.get("https://jqueryui.com/slider/");

  driver.manage().window().maximize();

  driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@class='demo-frame']")));

//Locate slider pointer.

  WebElement dragElementFrom = driver.findElement(By.xpath("//*[@id='slider']/span")); 

       

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

 }    

}