Ranorex Forum

Our office is evaluating Ranorex and I'm having trouble validating the class of a non-standard HTML tag. This is a web based application (written using React) in which we generate an SVG based graph. I can interact with the graph no problem and record tests successfully, but I want to validate somethings in the graph. I can validate the existence of the group node (<g></g>), but when building the validation, the 'class' field is disabled (I'm assuming this is due to the fact that this is not a standard HTML tag). Ideally we would like to validate that this <g> tag has a specific class (in our example, the tag looks like this: <g class='icon_tick'>...</g>, so we'd like to confirm that the class == icon_tick). I can see this is working for standard HTML tags (ex: div or h1), is there anything we can do to get this working on these non-standard tags?

Hi,

Please post a Ranorex snapshot (not screenshot) of the page/element in question. There is unfortunately not much we can suggest without at least a Ranorex snapshot Thanks.

I've tried following the steps on your website for creating a Snapshot, but whether I click on the Solution, the Project or the individual recordings, I do not see an option for Save As Snapshot ... where is that option?

To further describe my issue ... looking at the selected element I am trying to validate has a specific class, Ranorex has created the following element which it references in my test: div/div[2]/div[2]/div[1]//tag[@tagname='g'] ... that's the repository item I am validating ... unfortunately when creating this validation, after I select my target tag (first step of the validate wizard), the 'class' checkbox is greyed out in the second step of the wizard and thus I cannot validate that this element has the 'icon_tick' class associated with it.

The HTML structure of that element in the browser is as follows:
<g class="icon_tick" transform="translate(-30, -18)"><circle class="icon_tick_circle" r="8"></circle><path class="icon_tick_path" d="M-3 0 L -1.5 1.8 L3 -1.5 L -1.5 1.8"></path></g>

That outer group tag (<g>) is the one we are trying to validate the class on

Hi,

You must open the Ranorex Spy tool, click "Track" button and then select the element in question (or its nearest parent) in your app. This should set the element (or its parent) as current element in Spy. Then simply right click the element in question in Spy tree structure and from the appeared menu select "Save as Snapshot" and save it. That's all

Thank you for the instructions, I was able to grab a snapshot and have attached it as requested. The element in the is the child of the actual element I was interested in (unfortunately when I selected the parent element in Spy, the screenshot of the element when blank). Regardless, the same issue exists on this element ... when I try to validate it, the class checkbox is disabled (would be good to be able to validate if this element has the class "icon_tick_circle"). We want to be able to create recordings that test whether we have a successful element (class='icon_tick_circle') or a failure element (class='icon_error_circle')

The HTML structure of the actual element being selected (gathered from 'inspect element' in the browser) is:
<circle class="icon_tick_circle" r="8"></circle>

Hi,

Thanks for the snapshot. OK, it seems that the "class" attribute for 'g' (and other custom tags) is not read by the Ranorex. The question is, if the class attribute from custom tag is correctly processed by the browser? Could you please check if the "class" attribute is available in Chrome (via devtools)? Also check is the class attribute is available in other browsers (IE or FF).

Yes I can confirm that the class attribute is supported on the <g> and <circle> tags in both Chrome and Fire Fox (see attached screenshot). We are generating an SVG in our application and leveraging the assigned class in order to style this element ... i.e. fill the circle green if a success type class (icon_tick_circle) or fill it red if an error type class (icon_error_circle).

As this is a large part of our organizations UI (we have many generated graphs and charts which are based on D3 - Data Driven Documents), we need a means for validating that the generated elements have certain classes. In saying this, this is a fairly large showstopper that would prevent us from purchasing Ranorex as the automation test tool of choice for our organization ... is there any way this can be supported? To be honest, we see a huge value in Ranorex (simplifying and expediting generation of our automation suites) and would love to work with you in order to get this supported.

Hi SteveThomas,

Thank you for the snapshot.
I've tried recreating a small sample website using your code line for the g-tag, but everything seems to be ok on my side. May I ask you if you have any additional settings which might cause a difference on your system?
Additional, you can also get in touch with us by email ([email protected]) if you don't want to share your information on this public forum.

Regards,
Markus (S)

Hi,

I have this same problem. I'm trying to identify <g> and/or <text> tags in an SVG and the class doesn't seem to be picked up by Spy nor recognised by the repository if I enter it manually.

I've attached a snapshot which I hope will illustrate one of the objects I'm interested in: Also an HTML snippet: You can see here that class is blank in the browser despite a correct example of this repository item being found and even though it clearly has a value in the HTML: I'd like to be able to identify:

• the <g> by class to represent a container with the below items in it
• the <circle> by class so I can click on the node in the tree to expand/collapse it (this happens to be OK because there are no other circle types at the moment that I need to differentiate from)
• the following <text> by class so I can click on the name of the node to select it (and other operations)
• the next following <text> by class so I can find the count of items in the node

The two text tags are the most problematic at the moment because my attempt to find all the names to make an array is currently finding the names and the counts.

Any help on why the class attribute isn't recognised would be much appreciated.

Hi sarahw,

I'm not quite sure if I got your issue correctly, but the snapshot you have uploaded seems to be different than your screenshot.
Also the snapshot contains the desired g tag as described in your html snippet Best,
DP

Hi DP,

The text and circle tags are children of the g tag, so I took a snapshot at the g level because I thought it would show all the affected tags. Sorry if that caused any confusion.

What I'm hoping you can reproduce and help with is that although the g, circle and text tags all have a class specified in the HTML, Spy shows class as being blank in the WebElement section of the details. This is the root of my problems.

Thanks again in advance for any help.

Hi Sarah,

please excuse the slow response.
The class attribute is currently not supported for G-tags in Firefox and Chrome browser, but you should be able to get the class name by using the following line of code

var className = repo.RootElement.Self.ExecuteScript("return document.getElementById('text').className");

whereby the RootElement is the root Ranorex Repository Item: Please let me know if you have any further questions.

Regards,
Markus (S)

Hi Markus,

Thank you for your reply, I will try your suggested solution and see how I get on.

Does this also explain why I can't work with the class value for the circle and text tags which are children of the g tag?

And is there any roadmap for this being supported properly for g tags?

I don't think this code suggestion is going to help me unfortunately. I need to be able to differentiate between two different sets of text tags based on their class. If I can't uniquely identify one set from the other via the repository then I can't see how accessing its class via code in my test is going to help. Unless I'm missing something?

Hi Sarah,

Would you mind contacting us directly at https://www.ranorex.com/support-query/. I'd like to see if we can find a workaround directly by having a short remote session.

Thank you in advance.

Regards,
Markus (S)