Forum Discussion

gdave's avatar
gdave
Regular Contributor
4 years ago

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>

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

  • AlexKaras's avatar
    AlexKaras
    4 years ago

    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-model-elements.html

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

     

  • AlexKaras's avatar
    AlexKaras
    Champion Level 3
    4 years ago

    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-model-elements.html

    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's avatar
      sonya_m
      SmartBear Alumni (Retired)
      4 years ago

      Great advice Alex, Benoit!

       

      gdave how did you solve your question? Please share🙂

    • gdave's avatar
      gdave
      Regular Contributor
      4 years ago

      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

  • BenoitB's avatar
    BenoitB
    Community Hero
    4 years ago

    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.