Inner HTML

[gdave]

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>

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

[BenoitB]

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.

[AlexKaras · Accepted solution]

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

[sonya_m]

Great advice Alex, Benoit!

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

[gdave]

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]

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.