How To Automate Slider in Selenium Java - selenium

Question

Hi I am trying to automate https://emicalculator.net/
.I tried many approach but did not get success Below is my code for automating Interest rate slider
package seleniumBasics;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
public class AdjustSliderValue {
static String baseUrl = "https://emicalculator.net/";
public static WebDriver driver;
#BeforeTest
public WebDriver createDriver() {
driver = DriverSetup.getWebDriver();
driver.get(baseUrl);
return driver;
}
#AfterMethod
public void CloseDriver() {
driver.quit();
}
public static int GetPixelsToMove(WebElement Slider, double Amount, double SliderMax, double SliderMin) {
int pixels = 0;
int tempPixels = Slider.getSize().getWidth();
System.out.println(tempPixels);
tempPixels = (int)(tempPixels / (SliderMax - SliderMin));
System.out.println(tempPixels);
tempPixels = (int) (tempPixels * (Amount - SliderMin));
System.out.println(tempPixels);
pixels = tempPixels;
return pixels;
}
#Test
public static void verifySlider() throws InterruptedException {
WebElement Slider = driver.findElement(By.xpath("//*[#id=\"loaninterestslider\"]"));
int PixelsToMove = GetPixelsToMove(Slider, 15, 20, 5);
Actions SliderAction = new Actions(driver);
SliderAction.clickAndHold(Slider).moveByOffset((-(int) Slider.getSize().getWidth() / 2), 0)
.moveByOffset(PixelsToMove, 0).release().perform();
}
}
I want a method which can automate any slider. Could any one who knows please help me. Thanks in advance.

Answer 1

You may also try Key actions using Send Keys
// Set Loop counter to get desired value
<Your_Slider_Element>.sendKeys(Keys.ARROW_LEFT); // Or ARROW_RIGHT
// End loop

Answer 2

dragAndDropBy usually work best with slider. Make sure the way you calculate pixel is correct then it good to go.
driver.get("https://emicalculator.net/");
WebElement Slider = driver.findElement(By.xpath("//*[#id=\"loaninterestslider\"]"));
int PixelsToMove = GetPixelsToMove(Slider, 15, 20, 5);
Actions move = new Actions(driver);
Action action = (Action) move.dragAndDropBy(Slider, PixelsToMove, 0).build();
action.perform();
Import package
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

Answer 3

Sliderwidth is basically just 100% of the size here but you can add whatever pixel you want.
driver.get("https://emicalculator.net/");
WebElement Slider = driver.findElement(By.xpath("//*[#id=\"loaninterestslider\"]"));
Dimension sliderSize = Slider.getSize();
int sliderWidth = sliderSize.getWidth();
int xCoord = Slider.getLocation().getX();
Actions builder = new Actions(driver);
builder.moveToElement(Slider)
.click()
.dragAndDropBy
(Slider,xCoord + sliderWidth, 0)
.build()
.perform();
Import
import org.openqa.selenium.Dimension;
import org.openqa.selenium.interactions.Actions;

Answer 4

WebDriver driver = new ChromeDriver();
driver.get("https://emicalculator.net/");
WebElement a = driver.findElement(By.cssSelector("#loanamountslider span"));
Actions action = new Actions(driver);
action.clickAndHold(a).moveByOffset(500, 0).perform();
Here you go , you have to click the slider element and drag it

Answer 5

As the topicstarter correctly mentioned, the question is about how to automate any slider. So let me extend existing answers with requested solution.
The solution is not new - Selenium already has sample with Select. Let's build similar solution.
So assume we wanted to have some object of type EmiSlider so we could use it the way:
...
EmiSlider slider = new EmiSlider(driver.findElement(By.id("loanamountslider")));
slider.slide(100);
...
We are explicitly mentioning the desired locator and passing into constructor of class EmiSlider. The EmiSlider class then would be:
public class EmiSlider {
private final WebElement sliderRoot;
private final WebDriver driver;
public EmiSlider(WebElement slider) {
// Simply store passed root WebElement
this.sliderRoot = slider;
// We require driver instance for internal use so resolve it and store
this.driver = ((WrapsDriver) slider).getWrappedDriver();
}
/**
* Moves slider left or right
* #param x pixels to move slider by. Positive value moves right, negative - left
*/
public void slide(int x) {
// Find the slider WebElement, which is child of root element, using relative search
WebElement sliderElement = this.sliderRoot.findElement(By.cssSelector("span"));
// Perform slide action
new Actions(this.driver)
.clickAndHold(sliderElement)
.moveByOffset(x, 0)
.release()
.perform();
}
}
The current slider implementation had few drawbacks:
It does not count on the current and extreme positions
Different sliders might have different scales (and they do)
The amout inputs are left alone while
Hope one can add missed functionality