Forum Discussion

GGuezet's avatar
GGuezet
Contributor
2 years ago

Testcomplete is unable to recognize an <p> html element that does not contain text

Hello everyone,

I am working on a web project, and I need to interact with an object.

I am using TestComplete 15.50.3.7

 

The HTML is looking like this:

 

<div class="col-sm-2 ms-2">
	<p class="btn btn-link text-white my-0 p-0" id="btn-toolbar-back" data-test-name="btn-toolbar-back" aria-label="back" title="Retour vers Plages horaires">
		<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<line x1="19" y1="12" x2="5" y2="12"></line>
			<polyline points="12 19 5 12 12 5"></polyline>
		</svg>
	</p>
</div>

 

 

 Currently, TestComplete is unable to view the <p> element on the object browser, and cannot find with functions like .Find()

 

The object browser looks like this:

 

If I add some text on the <p> element, now TestComplete is able to detect it and interact with it:

 

<div class="col-sm-2 ms-2">
	<p class="btn btn-link text-white my-0 p-0" id="btn-toolbar-back" data-test-name="btn-toolbar-back" aria-label="back" title="Retour vers Plages horaires">
		Sample Text
		<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
			<line x1="19" y1="12" x2="5" y2="12"></line>
			<polyline points="12 19 5 12 12 5"></polyline>
		</svg>
	</p>
</div>

 

 

Now, the object browser looks like this:

 

Do I need to enable a feature to be able to detect this element natively ?

Object Recognition
Script Tests
web testing
  • tristaanogre's avatar
    tristaanogre
    2 years ago

    So, here's the thing.  I'm not a web developer myself so I wasn't quite sure what the <p> element was in HTML.  So, I googled it.... it's a text delimiter indicating a block of text as a paragraph.  So, most HTML browsers, readers, etc., are probably going to look for that being some sort of text block.  Without any actual text in it, that's probably confusing the engine that TestComplete uses because it is looking for text but there is no text until you add text.

    My suggestion:  This is bad HTML.  While it's not causing issues in the application itself, it seems that using the <p> element is a non-standard way of constructing a web app.  <div> seems most proper for this use.  I'd go back to your developers and make that suggestion.  Good job!  As a tester, you found a bug in your application!

  • tristaanogre's avatar
    tristaanogre
    2 years ago

    You're probably right.  But then, if I can't see it in the web browser myself, on the screen, not sure how TestComplete could render it.  Note that when you DID add text, it showed up as a "TextNode" which is exactly what the <p> tag is.  Might be worth bringing up to TestComplete support folks as suggested but this feels low on the scale of something that needs fixed.  Just my thoughts.  YMMV

  • rraghvani's avatar
    rraghvani
    Champion Level 3
    2 years ago

    I've never come across this issue before, since it works with the web application that I am using,

    Majority of our controls are enclosed in <div> tags with id attribute.

     

    It might be worth raising a TestComplete: New Support Request. If the browser is able to draw the SVG without any errors, then ideally, TestComplete should identify the object

     

     

  • GGuezet's avatar
    GGuezet
    Contributor
    2 years ago

    Parent objects are contained into <div> elements.

    Replacing the <p> element with a <div> element make it recognized by TestComplete.

    • tristaanogre's avatar
      tristaanogre
      Esteemed Contributor
      2 years ago

      So, here's the thing.  I'm not a web developer myself so I wasn't quite sure what the <p> element was in HTML.  So, I googled it.... it's a text delimiter indicating a block of text as a paragraph.  So, most HTML browsers, readers, etc., are probably going to look for that being some sort of text block.  Without any actual text in it, that's probably confusing the engine that TestComplete uses because it is looking for text but there is no text until you add text.

      My suggestion:  This is bad HTML.  While it's not causing issues in the application itself, it seems that using the <p> element is a non-standard way of constructing a web app.  <div> seems most proper for this use.  I'd go back to your developers and make that suggestion.  Good job!  As a tester, you found a bug in your application!

  • GGuezet's avatar
    GGuezet
    Contributor
    2 years ago

    I agree with your previous statement, the <p> attribute is inappropriate, and will be changed by our internal team.

    I still think that if the browser can render the attribute, TestComplete should be able to see it

    • tristaanogre's avatar
      tristaanogre
      Esteemed Contributor
      2 years ago

      You're probably right.  But then, if I can't see it in the web browser myself, on the screen, not sure how TestComplete could render it.  Note that when you DID add text, it showed up as a "TextNode" which is exactly what the <p> tag is.  Might be worth bringing up to TestComplete support folks as suggested but this feels low on the scale of something that needs fixed.  Just my thoughts.  YMMV