Page 1 of 1

Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 12:51 pm
by premravi
Hi,

Is there any method, class or plugin which we can use to identify the color and the texture of the bar diagram

The scenario is on a high level

check the "use gradient" checkbox and load the graph and verify the bars are having gradient textures

Uncheck the "use gradient" checkbox and load the graph and verify the bars are not having gradient textures

Please find the below screenshot for reference

1 screenshot is having gradient texture and other one is not

Please help me with the resolution

Regards

Re: Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 1:27 pm
by odklizec
Hi,

There is definitely no "out of the box" solution for your test case. At first, are the individual color bars identifiable via Ranorex spy (as individual elements)?

In my opinion, you will either have to use image-based validation or you will have to write a piece of code to pick and validate individual pixels of individual bars. But if the bars are not individually identifiable, it will be pretty hard task (to identify each bar and validate it). I think you will have to compare entire graph with reference graph image. But this maybe least reliable solution of your problem.

Re: Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 1:36 pm
by premravi
Hi,

Yes individual bars are identifiable using Ranorex spy but both the properties of the bars are exactly same for both the screenshots attached, so I am not sure how relevant it will be

As far as image based automation is concerned I agree that it will not be the reliable solution because my test data become static

I always have to use the same bar diagram to run this test case

Is there any other way we can think of

Regards

Re: Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 1:49 pm
by odklizec
What kind of UI technology are we talking about? Could you please share the snapshot of given graph?

If the bars are identifiable, it may be possible to get background color of individual bars, using "Invoke Action" command. However, the usability of Invoke Action, highly depends of used UI technology. But even if this approach turns not usable, it may still be easier and more reliable to process the pixels of individual bars, instead of validating whole image. But as mentioned before, this would require a piece of code, which picks and validates individual pixels.

Re: Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 2:29 pm
by premravi
Hi

Please find the attached snapshot

Below is the xPATH for one of the bar graph

/dom[@domain='dashboard-eu-iport-3.nonprod-nielsen-iwatch.com']//tag[#'svgChart']/tag[@tagname='g']/tag[51]/tag[2]

Regards

Re: Automate the color of the bar diagram

Posted: Tue Jan 07, 2020 2:42 pm
by odklizec
Hi,

Thanks for the snapshot. So, there is an attribute called Stroke, which contains the bar's color. Now you have to find out, which of the other attributes is related to gradient ;) Let's take another snapshot (with disabled gradient) and compare the available attributes. Eventually, you can try to get the background-image style via GetStyle method:

Code: Select all

string backImageStyle = repoElement.GetStyle("background-image");
BarColor.png

Re: Automate the color of the bar diagram

Posted: Wed Jan 08, 2020 9:15 am
by premravi
Hi

Thanks for the solution,

But I can see stroke is same for both the bars when the gradient is on and off

One difference I found out is "fill" attribute

Fill attribute is different when the gradient and on and off

Can I use fill attribute to validate if the gradient is on or off

Please suggest

Regards

Re: Automate the color of the bar diagram

Posted: Wed Jan 08, 2020 9:59 am
by odklizec
Hi,

Yes, I would expect that the Stroke will be the same with gradient on/off. Basically, it's the color of boundary line around the rectangle, while "Fill" is the pattern/color inside the rectangle. I guess that if the gradient is off, the Fill attribute shows color value?

Re: Automate the color of the bar diagram

Posted: Fri Jan 10, 2020 2:15 pm
by premravi
Hi,

Yes, if the gradient is OFF the Fill Attribute is showing color value

So, basically I am finding trouble in uniquely identifying the bar when the gradients are on

But if it is OFF I can identify the graph really well using the fill attribute

Now if there is any way where I can uniquely identify an individual bar when the gradients is on, that will solve my scenario

Regards
Ravindra

Re: Automate the color of the bar diagram

Posted: Fri Jan 10, 2020 2:49 pm
by odklizec
Hi,

Since there are no identification attributes for individual graph bars, there is not a simple way to identify individual bars. What I can think of (after evaluating the snapshot you posted) is using two lists, where one contains all graph bars and the other one, list of graph bar labels.

This xpath should return list of all graph bars (12 in the snapshot you posted):

Code: Select all

/dom[@page='']//tag[#'svgChart']//tag[@tagname='rect' and @display='block'] 
This xpath should return list of graph labels (6 of them, starting with TVNZ, TVWorks, Prime,...):

Code: Select all

/dom[@page='']//tag[#'svgChart']//tag[@tagname='g' and @transform~'rotate']//tag[@tagname='text' and @visible='True']
Now assuming that each graph bar label contains two bars, you should be able to loop through the bars and assign each bar with its name, e.g. bar 1 and 2 belongs to 1st graph bar label, etc. For looping through the individual graph elements, you can use code from this example:
https://www.ranorex.com/help/latest/han ... oryelement

But I'm not quite sure if naming individual bars will be useful at all? ;) I think it may be enough to simply loop the bars and examine their fill and stroke attributes?

Re: Automate the color of the bar diagram

Posted: Fri Jan 10, 2020 3:48 pm
by premravi
Hi,

Thanks a lot for helping me out in this scenario,

The xpath what you have suggested are identifying the bar graph in both the condition when the Gradient checkbox is checked and not checked

I am trying some unique xpath which will identify the graph only when the gradient is checked

So later I can just put it in if else statement and I am done

if element present means gradient otherwise not

Regards

Re: Automate the color of the bar diagram

Posted: Fri Jan 10, 2020 3:52 pm
by odklizec
Hi,

This xpath should return bars with enabled gradient:
/dom[@page='']//tag[#'svgChart']//tag[@tagname='rect' and @display='block' and @fill~'url']
So now you must 'somehow' tell your test to do whatewer you want once the gradient checkbox is checked ;) Unfortunately, this is not something I can help you with. Definitely not without seeing the app under test and exact scenario steps.