How select an area on the element: drag while holding the left mouse button?

Hello!

Please advise the way to select area by Katalon.
I have an area that should be scaled up to custom selection.
Manually it is done like drag from one point to other.
I tried with the recorder, this action is not recorded.

Thank you in advance for your help!

What if you were to try a mouse down, a mouse over offset, and then a mouse up?

More info:

@mwarren04011990
Mentioned actions give no expected result. The element is released at the same point as it is started. While WebUI.mouseOverOffset() is done properly.

Actions actions = new Actions(DriverFactory.getWebDriver());
WebElement element = WebUiCommonHelper.findWebElement(findTestObject('Object Repository/TopMenu/Chainage/set range drag area'), 30);

actions.clickAndHold(element).perform();
WebUI.mouseOverOffset(findTestObject('Object Repository/TopMenu/Chainage/set range drag area'), -500, 150)
actions.release(element).perform();

I don’t know what to say…

@kazuyaram do you have any other options for this one?

my opinion is, such should never be subject for automation test.
apparently, that is a dinamic element collecting data from certain external resource, just consumed by the AUT
saw that in plenty applications, like datadog, aws monitoring etc.

supposed the user is actually able to perform the ‘drag and drop’ to zoom, how this test will be validated?

1 Like

@yakovlieva.olena

Are you aware how the “area” is implemented in the web page?

Probably you aren’t.

Perhaps you are expecting Katalon to solve everything for you automagically.

But the life is not as easy as you think.

I guess that the “area” you are looking at is implemented by Scalable Vactor Graphics; something like: Basic line | Highcharts.com . Please find the <svg> element in the attached screenshot. That is an instance of SVG.

The problem is that Selenium Webdriver does not support interacting with the nodes INSIDE the <svg> element at all. SVG is out of the scope of WebDriver. As you know, Katalon Studio works on top of the WebDriver which can work with HTML DOM only. WebDriver is not designed to work with SVG at all. Therefore Katalon Studio can not interact with the the SVG node inside the <svg> element.

I suppose, if you are able to write JavaScript code that interact with the target SVG instance via the API provided by the software vendor (e.g. HIGHCHARTs), then you can execute the script using [WebUI] Execute JavaScript | Katalon Docs from your Katalon test script. That would be the easiest way for your Test Case script to interact with the SVG instance.

I think, you should abandone the idea of “select an are on the element: drag wh…”.


Just for your interest, have a look at the following old post:

This post describes how to select a single SVG text node by XPath. It is this complicated. But I do not know how to simulate “drag from one point to other on SVG instance” using WebDriver API.

1 Like

And that is for a single chart.
Now let’s suppose you have more charts on your page, and by zooming into one of them, the time axis has to be updated for all of them.
Good luck to validate this by automation.

I am not saying is impossible, perhaps with custom solutions something may be achieved.
But this require lot of knowledge and plenty effort, with a high probability that the end result to be flaky.

Is it worth it?

1 Like