Change the attribute (Width) and store it from local storage and apply

Product Forums Katalon Studio
1

Hi All,
I tried to modify the width of the chart. It works fine. But after executing when I click another place on the page or the page reloads the changes disappear resulting in the previous value being reset. How can I avoid this problem? How to use local storage for that?

1 Like
2

Hi @Achini

You’re not providing enough detail to answer your question properly. However, from the little you have said, it certainly sounds like you are modifying the AUT.

That’s a bad thing.

Trust me.

3

This single sentence puzzles me. I don’t see what you mean.

Please describe this with more information.

Please tell us the URL if it is public.
Take screenshots of your target web app before the change, and after the change,
Please describe how you operarted to change the width of the chart.

4

Sorry for the lack of details. Providing more details;

This is how I modified the width.

		// Extract the width value from the style attribute
		String widthValue = ""
		Pattern pattern = Pattern.compile("\\width:\\s*(\\S+)")
		Matcher matcher = pattern.matcher(styleAttributes)
		if (matcher.find()) {
			widthValue = matcher.group(1)
		}

		float currentWidth = Float.parseFloat(widthValue.replaceAll("px", "").replace(";", ""))
		float  newWidthValue = currentWidth + 180.5
		String newWidth = String.valueOf(newWidthValue) + "px"

		// Set the new width value to the style attribute
		String newStyleAttributeValue = styleAttributes.replaceAll("width:\\s*\\S+", "width: ${newWidth}")

		// Apply the new style attribute
		String jsCode = "arguments[0].setAttribute('style', '${newStyleAttributeValue}');"
		WebUI.executeJavaScript("arguments[0].style.width='${newWidth}'", Arrays.asList(element))

This is my chart, (image 01)
image
Once the above code segment is executed, the ‘X’ length is extended like this,
image

My question is, when I click another place on a page or do another action after this, the length of a chart automatically disappears and looks like image 01. I need to keep the changes. How can I save this change?

1 Like
5

If there is no UI capability built into the chart to adjust it’s width, you should not be doing it using JS code.

That said…

It seems there are event delegates capturing events on the page and refreshing the chart (which I’ll assume is a <canvas> element). This would have been a design choice made by the developers. If that’s a good or bad choice, it’s hard to say (not enough information). What it tells me is, whatever you’re trying to test cannot be done with the chart behaving as it does.

If I had no choice, I would write my own event delegate and plug it into the page. You’ll need robust JS development skills (which includes extensive knowledge of the DOM) to do that. Once you have a delegate in place, you can control the width of the canvas element.

Even so, it’s still a meaningless test. Why?

Because no human user can use the AUT in the way you are proposing to test it.

6

+1 from me