Mastering the Art of Moving Sliders in an Accordion Using JavaScriptExecutor

Question

Mastering the Art of Moving Sliders in an Accordion Using JavaScriptExecutor

I am facing an issue while trying to move the Slider using the DragandDropBy method. The slider seems to be moving to the wrong position consistently. I also attempted to use javascriptexecutor, however, that doesn't seem to work either.

driver.manage().window().maximize();
driver.get("http://www.globalsqa.com/demo-site/sliders/#Color Picker");

driver.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS );

WebElement iFrame = driver.findElement(By.cssSelector("#post-2673 > div.twelve.columns > div.newtabs.horizontal > div > div.single_tab_div.resp-tab-content.resp-tab-content-active > p > iframe"));

String sFrameContent = iFrame.getText().toString();
System.out.println("The Iframe Content is: "+sFrameContent );

driver.switchTo().frame(iFrame);

Actions action = new Actions(driver);

WebElement redSlider = driver.findElement(By.cssSelector("div#red > div"));

Thread.sleep(1000);

action.clickAndHold(redSlider).moveByOffset(90,0).release(redSlider).release().build().perform();

JavascriptExecutor jse = (JavascriptExecutor) driver;

jse.executeScript("document.getElementsByTagName('span')[0].style.left = '10.000%' ");
System.out.println("-------END--------");

driver.switchTo().defaultContent();

The above code runs without any errors, but unfortunately, the Slider does not move correctly to the desired position.

<body class="ui-widget-content" style="border:0;">
  <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
    <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span> Simple Colorpicker
  </p>
  <div id="red" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 9.80392%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 9.80392%;"></span></div>
  <div id="green" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 54.902%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 54.902%;"></span></div>
  <div id="blue" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
    <div class="ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min" style="width: 23.5294%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 23.5294%;"></span></div>
  <div id="swatch" class="ui-widget-content ui-corner-all" style="background-color: rgb(25, 140, 60);"></div>

</body>

javascript java selenium css-selectors

Answer 1

Answer №1

Avoid using JSE-type responses as they do not reflect typical user interactions. Users are more likely to click on a slider rather than set it using JavaScript. To streamline testing, consider encapsulating the slider interaction within a function as shown below:

public static void adjustSlider(int position)
{
    driver.switchTo().frame(driver.findElement(By.cssSelector("iframe.demo-frame")));
    WebElement slider = new WebDriverWait(driver, 3).until(ExpectedConditions.elementToBeClickable(By.id("slider")));
    Dimension d = slider.getSize();
    new Actions(driver).moveToElement(slider, d.width * position / 100, d.height / 2).click().build().perform();
    driver.switchTo().defaultContent();
}

Simply call the function like this:

driver.get("http://www.example.com/slider-demo");
adjustSlider(50);

It is advisable to include validation checks in your function to ensure the input position is within the valid range of 0-100.

Answer 2

Avoid using JSE-type responses as they do not reflect typical user interactions. Users are more likely to click on a slider rather than set it using JavaScript. To streamline testing, consider encapsulating the slider interaction within a function as shown below:

public static void adjustSlider(int position)
{
    driver.switchTo().frame(driver.findElement(By.cssSelector("iframe.demo-frame")));
    WebElement slider = new WebDriverWait(driver, 3).until(ExpectedConditions.elementToBeClickable(By.id("slider")));
    Dimension d = slider.getSize();
    new Actions(driver).moveToElement(slider, d.width * position / 100, d.height / 2).click().build().perform();
    driver.switchTo().defaultContent();
}

Simply call the function like this:

driver.get("http://www.example.com/slider-demo");
adjustSlider(50);

It is advisable to include validation checks in your function to ensure the input position is within the valid range of 0-100.

Answer 3

Answer №2

If you're looking for a solution, this code should do the trick:

    JavaScriptExecutor js = (JavaScriptExecutor) driver;

    js.executeScript("document.getElementById('red').getElementsByTagName('div')[0].setAttribute('style', 'width: 50%;')");
    js.executeScript("document.getElementById('red').getElementsByTagName('span')[0].setAttribute('style', 'left: 50%;')");

UPDATE:-

You can also try the following method:

    WebElement spanButton = driver.findElement(By.cssSelector("div#red > div+span"));

            Actions action = new Actions(driver);

            action.clickAndHold(spanButton).moveByOffset(-20,0).release(spanButton).build().perform(); // to move slider backward

action.clickAndHold(spanButton).moveByOffset(20,0).release(spanButton).build().perform(); // to move slider forward

Answer 4

If you're looking for a solution, this code should do the trick:

    JavaScriptExecutor js = (JavaScriptExecutor) driver;

    js.executeScript("document.getElementById('red').getElementsByTagName('div')[0].setAttribute('style', 'width: 50%;')");
    js.executeScript("document.getElementById('red').getElementsByTagName('span')[0].setAttribute('style', 'left: 50%;')");

UPDATE:-

You can also try the following method:

    WebElement spanButton = driver.findElement(By.cssSelector("div#red > div+span"));

            Actions action = new Actions(driver);

            action.clickAndHold(spanButton).moveByOffset(-20,0).release(spanButton).build().perform(); // to move slider backward

action.clickAndHold(spanButton).moveByOffset(20,0).release(spanButton).build().perform(); // to move slider forward

Mastering the Art of Moving Sliders in an Accordion Using JavaScriptExecutor

Answer №1

Answer №2

Similar questions

Is there a way I can showcase each number that is inputted into my while loop?

What is the better option in GWT client - Java or JSON?

Express receiving undefined data in Ajax POST request

To trigger the action of any button in Ionic/Angular, I need to double-click

Methods for automating the clicking of a hyperlink within Bootstrap tabs programmatically

Why is JSP compilation essential in achieving its goals?

What is the process for establishing a reference to a property of an object in JavaScript?

`How to handle a java.lang.NullPointerException when using Selenium with Cucumber?`

Can you explain the meaning of classpath:/, classpath:/config/, file:./, and file:./config/ in Spring Boot?

Issue with firing the React-Redux action has been encountered

What is the best way to retrieve the crash traceback in Android Studio?

Updating the span's value with Javascript

Is it possible to perform a cucumber test with variable modifications?

Reduce the number of divs on a webpage while incorporating animated transitions

Guide to successfully formatting and outputting JSON on a Jersey RESTful web service

Refreshed page causing hide/show div to reset

What is the best way to identify when a particular character has been entered into the input field?

Guide: Utilizing ng-repeat in Ionic framework for displaying nested JSON objects

What is the best way to prevent elements in the split function from being stored in an array?

What is the best overlay to utilize for developing Java games?