Slider Automation: How to Automate Range Slider in Selenium
Type Here to Get Search Results !

Slider Automation: How to Automate Range Slider in Selenium

In Selenium web driver, basic operations like Clear(), Sendkeys(), click,(), etc, can be performed directly using driver instance.

But modern web applications came up with some tricky web element actions. One among them is moving the slider horizontally. 

How to Handle Selenium Slider?

This can be done by methods in the Selenium Actions class using x and y coordinates to set the slider's element value.

In this post, we will see how to automate the price slider using the Selenium Actions class. 


Sample Scenario to Automate Range Slider:

  1. Go to "https://jqueryui.com/slider/#rangemin"
  2. Drag price slider to the value of $501

Selenium slider automation: Automate and move range sliders horizontally

Dude, I will try to use the same words pointed in the above picture in the rest of the post. Also, wherever you see a text surrounded by '#', that's meant to be a variable, you have to replace it accordingly in your code. (Eg. #ChromeDriverPath# should be replaced by local chrome Driver's path).

Ok, let's go ahead.

Step 1: Launch Browser and Maximize

This is straightforward. Set system property, initialize chrome driver, and use get() or navigate.to() method like below.

System.setProperty("webdriver.chrome.driver", "#path of chrome driver in your system#");	
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

Step 2: Navigate to the jQuery Website

String destinationUrl = "https://jqueryui.com/slider/#rangemin";
driver.navigate().to(destinationUrl);

Step 3: Switch to the jQuery Slider's iframe

If you find the slider's XPath and try to use it in the code, you will see "Element not found exception". Because the slider belongs to the iframe inside Mainframe as shown in the picture.

So you have to switch frames. To achieve that, we got switchTo().frame("#iframe's xpath#") Selenium method which can be performed on driver instance like below.

WebElement iframeXpath = driver.findElement(By.xpath("//div[@id='content']/iframe"));
driver.switchTo().frame(iframeXpath);

Step 4: Find Slider's Tip

Just an Xpath!
WebElement sliderXpath = driver.findElement(By.xpath("//div[@id='slider-range-min']/span"));

Step 5: Set Slider Element's Value

Now, the main part, dragging the slider horizontally. Before doing that, we need to know the destination point on-axis.  As the screen is a two-dimensional space, any location can be pointed bytaking  x and y coordinates. 

So, we need to get the x and y coordinates of the slider axis for the value $501.

To get coordinate values, you can add and enable coordinates extension from the chrome store.

Once you click on the enabled extension, you'll see coordinate values following your mouse pointer throughout the screen. 



Now, drag the slider tip along the axis till the price value hits $501 and place the mouse pointer at the tip of the slider to see the coordinate values. Note them down.

Wait, a word for you, these coordinate values might not be the same for you and me as they depend on screen resolution.

In the above picture, I got values as (378, 54) for $448 but in runtime, I saw the slider dragged to $501. For any such inaccuracies, just adjust the coordinate values and re-execute till the slider reaches the expected value.


Step 6: Drag and Drop the Slider

To do this, initialize the Actions class and use dragAndDropBy(#WebElement#, #x-axis#, #y-axis#) method as shown below
Actions act = new Actions(driver);
act.dragAndDropBy(sliderXpath, 378, 54).perform();

Always remember, perform() method should be used on top of any method you invoke from the Actions class in Selenium.

This Actions class can perform some cool events which we will explore in coming posts.

So, if the coordinate values are positive, the slider will move along the positive axis else negative.


Step 7: Add Wait Time and Run

We will add 5 seconds wait time to see the action performed by the driver on the slider, and then close.
Thread.sleep(5000);
driver.close();
I've used thread.sleep() method as use-case is simple but its good to know when to use which wait commands in Selenium

Summing Up the SourceCode

@Test
public void dragSlider() throws InterruptedException {	
		
	//1. Launch browser and maximize
	System.setProperty("webdriver.chrome.driver", "/home/joy/Documents/Eclipse/Workspace/GETEC_Handson/mavenproject/lib/chromedriver");	
	WebDriver driver = new ChromeDriver();
	driver.manage().window().maximize();
	
	//2. Navigate to destination Url
	String destinationUrl = "https://jqueryui.com/slider/#rangemin";
	driver.navigate().to(destinationUrl);
	
	//3. Switch to Iframe
	WebElement iframeXpath = driver.findElement(By.xpath("//div[@id='content']/iframe"));
	driver.switchTo().frame(iframeXpath);
	
	//4. Find slider tip
	WebElement sliderXpath = driver.findElement(By.xpath("//div[@id='slider-range-min']/span"));
	
	//5. Drag it
	Actions act = new Actions(driver);
	act.dragAndDropBy(sliderXpath, 378, 54).perform();
	
	//6. Wait for 5 seconds
	Thread.sleep(5000);
	
	//7. close
	driver.close();
		
  }

Output

 

Over To You

I hope you've understood coordinate value-based slider automation. In the same jQuery website, you could also see other tabs like multi sliders, custom handle, color picker, etc,  under the Examples section.

There, You will find sliders that will move vertically as well as horizontally. Give it a try. That should be a solid hands-on for you in understanding slider automation in selenium. 

Before leaving, I would like to shoot a question, and it is "Is there any other method to automate sliders in browsers other than coordinate-based drag and drop?"

If yes, feel free to speak in the comments and teach me.

Stay tuned, we will catch up soon!



Tags

Post a Comment

0 Comments
--Drop your thoughts and comments below!