Issue with div slider

Hello everyone,

I am a beginner with a bit experience and I have a problem with testing a slider function.

I have a slider that is defined in a div-element:
“<div class=“noUi-origin noUi-connect” style=“left: 0%;”>”

When I move the slider to the right side, the style element changes to another value in 5% steps, e.g.
“<div class=“noUi-origin noUi-connect” style=“left: 5%;”>”

Now I want to move this slider in my test case to the right side, let’s say to 10%.
I have tried to change this TestObject with WebUI.modifyObjectProperty but when I change the style element e.g. to 5% it moves to 50% (always to 50%, even if I change the style to 10%).

I also created a temporary TestObject with “xpath EQUALS <div class=“noUi-origin noUi-connect” style=“left: 5%;”>” and tried WebUI.dragAndDropToObject but it had the same behavior.

Has anybody an idea how to manage this test case?

I think you misunderstand what WebUI.modifyObjectProperty actually does. It modifies the property of a Test Object, not of an actual element on your web page.

It’s important that you understand what Test Objects actually are, and how they are used. Test Objects are simply a container for a locator that will ultimately be used by Selenium to locate a true WebElement. So when you are modifying a Test Object property, that has nothing to do with modifying the WebElement, or even the HTML of the application you are testing. You are just changing a property of the container.

To actually manipulate the web page, you will need to use JavaScript. Try something like this for starters:

WebDriver driver = DriverFactory.getWebDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement slider = WebUiCommonHelper.findWebElement(findTestObject("path/to/test/object"), 30)
js.executeScript("arguments[0].setAttribute('style', 'left: 5%;')", slider);
1 Like

Hello Brandon,

I am a colleague of Nills and trying the same code suggested by you. But ending up with error like:

groovy.lang.MissingMethodException: No signature of method: com.kms.katalon.core.webui.driver.SmartWaitWebDriver.executeJavaScript() is applicable for argument types: (java.lang.String, org.openqa.selenium.support.events.EventFiringWebDriver$EventFiringWebElement) values: [arguments[0].setAttribute(‘style’, ‘left: 5%;’),

Please suggest.

Thanks In Advance

We need to see the code. Please post it.

A missingMethodException generally means that the parameters you have used for a Groovy method do not match any of the possible acceptable methods. As an example, if a method has parameters like below:
method(TO, String, boolean)
method(TO, String, boolean, FailureHandling)

and you put the parameters like:
method(TO, String, int)

then the parameters of the lower method (TO, String, int) does not match either of the upper (and acceptable) parameters–giving a missingMethodException. More information can be found in other forum answers, like below.

If you show your code, then we can give you more specific information.

Hello Thomas,

This is the code.

def automateScrollBar() {
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor js=(JavascriptExecutor) driver

	WebElement slider = WebUiCommonHelper.findWebElement(findTestObject('Object Repository/Search/Scroll'), 30)

	js.executeJavaScript("arguments[0].setAttribute('style', 'left: 5%;')", slider);

}

Hello Brandon,

I am trying to use the same code suggested by you. the slider is changing the Position but the rate is not changing. For example, if I try to move the slider left for 15%, the position of the slider changes but the price will be 0. Here is the code.

WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor js = ((driver) as JavascriptExecutor)
WebElement slider = WebUiCommonHelper.findWebElement(findTestObject(‘Pages/Startseite/slider_budget-min’), 30)

js.executeScript(‘arguments[0].setAttribute(‘style’, ‘left: 15%;’)’, slider)

Any suggestions would be highly appreciated. TIA.

Hello
Slider automation in Katalon studio

This video is a gem. We got it working. I have to check how to move it dependent from the element width but it works :smiley:

1 Like