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

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.