Forum Discussion

ANHristov01's avatar
ANHristov01
Occasional Contributor
2 months ago
Solved

Button with "..." not completing selection - step stops after dropdown choice (Chrome & Edge)

Hello, We are experiencing an issue when selecting buttons that open a dropdown menu - specifically the ones with "...". When TestComplete tries to click and select an option from that dropdown, i...
web testing
  • rraghvani's avatar
    rraghvani
    2 months ago

    When using the Record feature, TestComplete will create individual name mappings for each URLs -

    https://www.w3schools.com/
https://www.w3schools.com/html/default.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/js/default.asp

    You need to instruct TestComplete on how to identify UI objects correctly. In this instance, you can use wildcard, so the name mapping URL will become https://www.w3schools.com/*. There should be only one pageEPostbank.

    If this is your first time using TestComplete, I do suggest you read through Object Identification as it's one of the most important parts of TestComplete, and to get right. Also, use appropriate ID's as opposed to indexes in "//button[14]".

    From my experience, it's best to create name mappings first, for the UI controls you'll be interacting with - get the name mappings hierarchy/tree structure correct.

ANHristov01's avatar
ANHristov01
Occasional Contributor
2 months ago

Hi rraghvani​ 

To answer your questions:
1) Yes, after clicking on the ellipsis button ("..."), the menu popup appears correctly.
2) However, there is no specific name mapping created for the individual menu items, because TestComplete does not seem to detect or highlight them properly - it only detects the entire popup container.
3) For the click action, we are using the "Click" keyword (standard keyword test action). The step appears as passed (green), but nothing changes in the UI.

When inspecting through the Object Browser, the menu items are not recognized as separate clickable elements - only the general popup or browser window is shown.

Do you think this could be related to how the dropdown is implemented (maybe as a dynamic overlay or shadow DOM element)? And is there a recommended way to make TestComplete identify those inner elements?

rraghvani's avatar
rraghvani
Icon for Champion Level 3 rankChampion Level 3
2 months ago

The keyword actions shown in the video, was that from "Record Keyword Test"? If yes, TestComplete may record the wrong actions being performed on the control, i.e. Click(). Try to change the method from Click() to ClickItem("Statements"), and see if that works.

Popup menu items can be tricky to identify with the Object Spy tool, because as soon as the popup menu loses focus, it disappears. Since you are working with a web application, it's possible to change the "visible" property value of the popup menu, so that you can use the Object Spy tool - you will have to use the browsers' DevTools to do this to modify the HTML code. 

Here's an example,

Popup is hiddenChanging the visibility property value, to make the popup appear

 

  • ANHristov01's avatar
    ANHristov01
    Occasional Contributor
    2 months ago

    Hi rraghvani​ 

    Yes, the actions in the video were recorded using "Record Keyword Test". I'll try changing the step from Click() to ClickItem() as you suggested and see if that allows the selection to complete properly.

    Regarding the Object Spy issue - yes, that's exactly what happens. The popup disappears immediately after losing focus, so I can't inspect the individual elements. I'll follow your suggestion to modify the "visible" property in DevTools (if I have the permissions for my security team) so that the popup stays open long enough to capture the correct element structure.

    I'll test both approaches and update the thread once I have results. 

    • ANHristov01's avatar
      ANHristov01
      Occasional Contributor
      2 months ago

      Hi rraghvani​ 

      Quick update on the two suggestions:

      1) ClickItem(): In our case TestComplete doesn't expose ClickItem() on the menu item object (Keyword Test). The object we get after opening the "..." popup is just the overall popup/container (or even BrowserWindow), with no child items that provide ClickItem() We tried DblClick() as well, but it didn't resolve the issue - the step passes, yet the I state doesn't change.
      2) Changing the "visible" property via DevTools: our security team doesn't allow modifying DOM properties in the target web app, so we can't use that aproach.

      Could you advise on an alternative that doesn't require DOM changes? 

      • rraghvani's avatar
        rraghvani
        Icon for Champion Level 3 rankChampion Level 3
        2 months ago

        From your video, you have the following name mappings defined - 

        browser.pageEPostbank.button4
browser.pageEPostbank9.linkStatements

        What are the name mappings for pagePostbank and pageEPostbank9? Are they identifying the correct UI objects? Also, what is the name mappings for button4 and linkStatements?

        You should not have to consult your Security Team, if you want to edit pages on-the-fly on your local browser - pressing F5 or refreshing the page, your changes will disappear.

        Example - modifying HTML code, to add the following text on my local browser.

        Example: 

        https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-menu&stacked=h

        Modifying the class to show the popup menu item, and then using Object Spy tool. I can use this information to build a name mapping