Unsupported HTML Tag Class

Ask general questions here.
SteveThomas
Posts: 4
Joined: Fri Jan 13, 2017 8:55 pm

Unsupported HTML Tag Class

Post by SteveThomas » Fri Jan 13, 2017 9:06 pm

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?

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 3932
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: Unsupported HTML Tag Class

Post by odklizec » Mon Jan 16, 2017 8:35 am

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.
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

SteveThomas
Posts: 4
Joined: Fri Jan 13, 2017 8:55 pm

Re: Unsupported HTML Tag Class

Post by SteveThomas » Tue Jan 17, 2017 7:48 pm

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

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 3932
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: Unsupported HTML Tag Class

Post by odklizec » Wed Jan 18, 2017 7:11 am

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 ;)
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

SteveThomas
Posts: 4
Joined: Fri Jan 13, 2017 8:55 pm

Re: Unsupported HTML Tag Class

Post by SteveThomas » Wed Jan 18, 2017 9:59 pm

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>
Attachments
supportSnapShot-noClass.rxsnp
(127.6 KiB) Downloaded 49 times

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 3932
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: Unsupported HTML Tag Class

Post by odklizec » Thu Jan 19, 2017 8:26 am

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).
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

SteveThomas
Posts: 4
Joined: Fri Jan 13, 2017 8:55 pm

Re: Unsupported HTML Tag Class

Post by SteveThomas » Thu Jan 19, 2017 5:16 pm

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.
Attachments
classSupportChrome.jpg
classSupportChrome.jpg (239.49 KiB) Viewed 1602 times

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: Unsupported HTML Tag Class

Post by Support Team » Fri Jan 20, 2017 2:33 pm

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.
gTag.png
gTag.png (29.79 KiB) Viewed 1588 times
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)
.
Image

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unsupported HTML Tag Class

Post by sarahw » Tue Jul 17, 2018 6:25 pm

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:
formularyname.rxsnp
(47.42 KiB) Downloaded 11 times
Also an HTML snippet:

Code: Select all

<g data-v-35e61218="" class="node list-complete-item" style="transform: translate(633.5px, 428.382px);">
	<circle data-v-35e61218="" r="6.5" class="list-complete-item" style="fill: white;"></circle>
	<text data-v-35e61218="" dx="-10" dy=".35em" class="text list-complete-item" style="text-anchor: end; font-weight: normal;">
          Geriatric
    </text>
	<text data-v-35e61218="" class="subtext list-complete-item" style="text-anchor: end; transform: translate(-10px, 20px); font-weight: normal;">
          Items 0
    </text>
</g>
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:
spy browser.png
spy browser.png (123.31 KiB) Viewed 785 times
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.

dpFourOFour
Certified Professional
Certified Professional
Posts: 38
Joined: Mon Dec 12, 2016 9:24 am

Re: Unsupported HTML Tag Class

Post by dpFourOFour » Thu Jul 19, 2018 1:03 pm

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
gtag.jpg
gtag.jpg (92.76 KiB) Viewed 763 times
Best,
DP
Please always include the following information to your posts
  • Ranorex Version
  • OS Version

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unsupported HTML Tag Class

Post by sarahw » Thu Jul 19, 2018 3:45 pm

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.

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: Unsupported HTML Tag Class

Post by Support Team » Tue Jul 24, 2018 1:23 pm

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:
RepoRoot.png
RepoRoot.png (2.28 KiB) Viewed 696 times
Please let me know if you have any further questions.

Regards,
Markus (S)
.
Image

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unsupported HTML Tag Class

Post by sarahw » Mon Jul 30, 2018 12:24 pm

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?

sarahw
Posts: 8
Joined: Fri Jun 22, 2018 11:11 am

Re: Unsupported HTML Tag Class

Post by sarahw » Mon Jul 30, 2018 12:59 pm

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?

User avatar
Support Team
Site Admin
Site Admin
Posts: 11709
Joined: Fri Jul 07, 2006 4:30 pm
Location: Graz, Austria

Re: Unsupported HTML Tag Class

Post by Support Team » Mon Aug 06, 2018 11:28 am

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)
.
Image