How to move Horizontal Slider or Vertical Slider of jQuery using Selenium Webdriver

Question

I want to Make selenium script which move slider given on following site

Example name is How to change orientation of jQuery UI Slider

http://jqueryui.com/demos/slider/

I have no idea How to do this

Answer 1

I worked out Python equivalent of Franz Ebner's answer. Just in case if it helps someone

Notes: In Python,

1. find_element_by_XXX doesn't find an element within a frame, unless you use switch_to_frame (Not sure about other languages )

2. Negative (-) offset values don't work as expected, hence moving only by the offset value calculated based on percentage passed to the method

---

def check(self, percent):
 driver = self.driver
 driver.get("http://jqueryui.com/demos/slider/");
 driver.switch_to_frame(0)
 driver.switch_to_active_element()
 slidebar = driver.find_element_by_id("slider")
 height = slidebar.size['height']
 width = slidebar.size['width']
 move = ActionChains(driver);
 slider = driver.find_element_by_xpath("//div[@id='slider']/a")
 if width > height:
 //highly likely a horizontal slider
 move.click_and_hold(slider).move_by_offset(percent * width / 100, 0).release().perform()
 else:
 //highly likely a vertical slider
 move.click_and_hold(slider).move_by_offset(percent * height / 100, 0).release().perform()
 driver.switch_to_default_content()

• Derorrist: move_by_offset on vertical slider should move on y axis. so move_by_offset(0, percent * width / 100)

Answer 2

Working code -

WebDriver driver = new InternetExplorerDriver();
driver.get("http://jqueryui.com/demos/slider/");
//Identify WebElement
WebElement slider = driver.findElement(By.xpath("//div[@id='slider']/a"));
//Using Action Class
Actions move = new Actions(driver);
Action action = move.dragAndDropBy(slider, 30, 0).build();
action.perform();
driver.quit();

Answer 3

Have you ever tried the Action interface?

Especially the point "Generating Action chains" should help you

/**
 * Moves a jQuery slider to percental position, don't care about directions
 * @param slider to move
 * @param percent to set the slider
 */
public void moveSliderToPercent(WebElement slider, int percent){
 Actions builder = new Actions(this.driver);
 Action dragAndDrop;
 int height = slider.getSize().getHeight();
 int width = slider.getSize().getWidth();
 if(width>height){
 //high likely a horizontal slider
 dragAndDrop = builder.clickAndHold(slider).moveByOffset(-(width/2),0).
 moveByOffset((int)((width/100)*percent),0).
 release().build();
 }else{
 //high likely a vertical slider
 dragAndDrop = builder.clickAndHold(slider).moveByOffset(0, -(height/2)).
 moveByOffset(0,(int)((height/100)*percent)).
 release().build();
 }
 dragAndDrop.perform();
}

Answer 4

Generating Action chains

The Actions chain generator implements the Builder pattern to create a CompositeAction containing a group of other actions. This should ease building actions by configuring an Actions chains generator instance and invoking it's build() method to get the complex action:

 Actions builder = new Actions(driver); 
 Action dragAndDrop = builder.clickAndHold(someElement)
 .moveToElement(otherElement)
 .release(otherElement)
 .build(); 
 dragAndDrop.perform();

Answer 5

I would prefer moving the slider by using the following code in this situation-

Actions builder = new Actions(driver);
Action dragAndDrop =
builder.clickAndHold(someElement).moveByOffset(xOffset,yOffset).release().build();
dragAndDrop.perform();

It makes some sense to move the slider by an offset instead of using moveToElement(otherElement) in this particular case.

Hope this helps you.

• Franz Ebner: in case of JQuery slider this would only move the slider out of the middle... because the point where you start moving is the center of the WebElement

Answer 6

I found that calculating offset by pixels was off due to rounding from float to int, so the solution I found was to first move slider to the beginning and then move arrow key in a loop. Each arrow key move to the right is 1 unit of the slider.

Actions action = new Actions(_driver);
var width = slider.Size.Width;
//the moment you issue a click Selenium clicks in the center of the slider
//therefore to move slider to beginning we need to move left half of the slider's length
action.ClickAndHold(slider).MoveByOffset(-(int)(width / 2), 0).Perform();
int increment = 50;
for (int i = 0; i < increment ; i++)
{
 action.SendKeys(Keys.ArrowRight);
}
action.Perform();