How to move horizontal slider or vertical jQuery slider using Selenium Webdriver

Question

I want to make a selenium script that moves the slider specified on the following site

Example name How to change the orientation of the jQuery UI slider

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

I have no idea how to do this.

Answer 1

Action Chain Generation

The action chain generator implements the Builder pattern to create a CompositeAction action containing a group of other actions. This should facilitate the assembly of actions by setting up an instance of the action chain generator and calling its build () method to obtain a complex action:

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

Answer 2

I developed the Python equivalent of Franz Ebner's Answer . Just in case this helps someone

Notes: In Python

• find_element_by_XXX does not find an element inside a frame unless you use switch_to_frame (not sure about other languages)

• Negative (-) bias values ​​do not work as expected, so they only move over the bias value calculated based on the 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 3

Work 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 4

Have you ever tried the Action interface?

In particular, the item "Creating 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 5

I would rather move the slider 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 sense to move the slider by offset instead of using moveToElement (otherElement) in this particular case.

Hope this helps you.