Ask a Question

Inner HTML

SOLVED
gdave
Regular Contributor

Inner HTML

Hi all

I was wondering if any of you can help me with this.

 

<div data-v-2b025292="" class="u-p-md u-flex u-flex-col u-items-start u-font-h3"><span data-v-2b025292="">Dashboard Widgets</span> <div data-v-2b025292="" class="u-font-caption u-mt-xs"><span data-v-2b025292="">Show/hide widgets on your home page</span></div></div> <span data-v-2b025292="" aria-hidden="true" class="silk-icon tol-view-edit-panel__edit-button u-flex u-items-center u-px-md u-cursor-pointer fa-pencil fas silk-icon--large"></span>

gdave_0-1611843788787.png

Above is my innerhtml and the pencil icon in the screenshot of 'dashboard wizard' is something which I would like to Click.

The object spy fails to identify the pencil icon so I am unable to perform a click function on it. Can anyone please advise or help me to get that click function on the pencil icon ?

 

Thanks

1 ACCEPTED SOLUTION

Accepted Solutions
AlexKaras
Community Hero

Re: Inner HTML

Hi,

 

Basically, as it was advised by @BenoitB.

Actual markup for the pencil:

<span data-v-2b025292="" aria-hidden="true" class="silk-icon tol-view-edit-panel__edit-button u-flex u-items-center u-px-md u-cursor-pointer fa-pencil fas silk-icon--large"></span>

So this is just empty span element with custom-drawn pencil via the class specification.

Empty span is not included in the Objects tree in TC as documented here: https://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/tree-m...

So you have three options:

-- Talk to your developers and ask them to change page markup so that the required element is included into Objects tree in TC; or

-- Identify container object (or the neighbor one) and perform coordinate-based relative click (e.g. 5 pixels to the left from container's right border) so that it is executed over the pencil icon, like it was suggested by Benoit; or

-- Search for the span with the pencil using CSS/XPath and call .click() method for the found object. Note: small initial 'c' is essential, because the result of the search will be not TC-object, but native DOM one which does not provide .Click() method. (The latter is provided by TC for the objects that are included into Objects tree.)

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

5 REPLIES 5
BenoitB
Community Hero

Re: Inner HTML

Perhaps an on-screen drawn component.

In thise case, use click with coordinates, object.Click(object.Width -8, -1) .. The -8 is to adapt, it will click on eight pixels at the left of the end of the button.

Un sourire et ça repart

AlexKaras
Community Hero

Re: Inner HTML

Hi,

 

Basically, as it was advised by @BenoitB.

Actual markup for the pencil:

<span data-v-2b025292="" aria-hidden="true" class="silk-icon tol-view-edit-panel__edit-button u-flex u-items-center u-px-md u-cursor-pointer fa-pencil fas silk-icon--large"></span>

So this is just empty span element with custom-drawn pencil via the class specification.

Empty span is not included in the Objects tree in TC as documented here: https://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/tree-m...

So you have three options:

-- Talk to your developers and ask them to change page markup so that the required element is included into Objects tree in TC; or

-- Identify container object (or the neighbor one) and perform coordinate-based relative click (e.g. 5 pixels to the left from container's right border) so that it is executed over the pencil icon, like it was suggested by Benoit; or

-- Search for the span with the pencil using CSS/XPath and call .click() method for the found object. Note: small initial 'c' is essential, because the result of the search will be not TC-object, but native DOM one which does not provide .Click() method. (The latter is provided by TC for the objects that are included into Objects tree.)

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================

View solution in original post

sonya_m
Community Manager

Re: Inner HTML

Great advice Alex, Benoit!

 

@gdave how did you solve your question? Please share🙂


Sonya Mihaljova
Community and Education Specialist

Join Wintertainment 2021 to share your stories, have fun, earn community badges, and more!
gdave
Regular Contributor

Re: Inner HTML

Hi

 

Thanks for your input.

 

So I went back to developers with below suggest option:

Talk to your developers and ask them to change page markup so that the required element is included into Objects tree in TC

 

They aren't very sure how to achieve this. They asked what specific change can be made so that the required element is included into Objects tree in TC. Are you able to provide some guidance around it ?

 

Thanks

AlexKaras
Community Hero

Re: Inner HTML

Hi,

 

what specific change can be made so that the required element is included into Objects tree in TC.

As per referenced help article (https://support.smartbear.com/testcomplete/docs/app-testing/web/general/object-identification/tree-m...) :

"Other elements, <are included> only if they have any of the following:

  • text contents (in the element, not in its child elements)

  • a role other than presentation"

See markup examples in the same help article.

So your developers should implement any of two mentioned options whichever works better for them.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
cancel
Showing results for 
Search instead for 
Did you mean: