Forum Discussion

pkudrys's avatar
pkudrys
Frequent Contributor
16 days ago

getting "FindAll is not a function" error

Hi folks,

Any idea why I'm getting error "FindAll is not a function"? Below code successfully returns parentElement object, But when I try to call FindAll with the obtained object, it fails with the above error.

The interesting point is, that if I call FindAll directly on inputElement object, it works OK. There seems to be a problem only with the parentElement-based object. Do I need to somehow convert the localParent before calling FindAll?  

...
else if (inputElement.className.includes('mat-mdc-chip-input'))
{
  var localParent = inputElement.parentElement;
  var getAllChips = localParent.FindAll("tagName","mat-chip-row",10);
  for (let j = 0; j<=getAllChips.length - 1; j++)
  {
    getAllChips[j].FindElement("//mat-chip-row//*[contains(@class,'mat-mdc-chip-remove')]/parent::span").Click();
   }
}
...

 

15 Replies

  • rraghvani's avatar
    rraghvani
    Icon for Champion Level 3 rankChampion Level 3

    You have defined localParent to be an object of inputElement.parentElement. You can access the property values of localParent (as shown in the watch list) e.g.

    localParent.clientHeight
    localParent.defaultChecked
    localParent.disabled
    localParent.innerHTML

    but you have not inherited any of the methods. Therefore, FindAll will not work because it's a JavaScript DOM and not TestComplete’s Test Object Model

    What does inputElement and parentElement reference to in the Object Browser? And how have you defined them?

  • pkudrys's avatar
    pkudrys
    Frequent Contributor

    Hi, thank you for the reply. inputElement is filled with the alias object and parentElement is a property of the inputElement. 

    I've created a simple test project showing the issue: FindAll.zip

    As shown on the previous image, localParent appears to be the same object (the structure of the object), like inputElement, so I'm a bit surprised FindAll does not work with it.  Any idea how to access the object properly?   

    • rraghvani's avatar
      rraghvani
      Icon for Champion Level 3 rankChampion Level 3

      Here's the issue - the same code, just commented out line 3

      function GetAllButtonsFromAlias(aliasItem)
      {
          //var parentElement = aliasItem.parentElement;
          var buttons = aliasItem.FindAll("ObjectType", "Button", 100);
          buttonsArray = buttons.toArray();
          Log.Message(`Number of buttons on page, using NameMapping ${buttonsArray.length}`);
      }
      
      function test1()
      {
          //GetAllButtonsFromAlias(Aliases.browser.pageCssButtons.buttons.Parent);
          Log.Message(Aliases.browser.pageCssButtons.buttons.parentElement.nodeName);
      }

      When calling parentElement (line 12) it is retrieving the buttons' parent element, which is <p> (highlighted in yellow)

      Aliases.browser.pageCssButtons.buttons highlights "Default Button" for me

      The element <p> does not appear in the Object Browser

      As mentioned in the documentation,

      Use FindAll to search for all objects that have the specified values of the specified properties. The search is performed in the object hierarchy displayed in the Object Browser panel starting from the testedObj object and continuing down the hierarchy to the specified depth.

      Hence, FindAll does not work on <p> element.

      If I uncomment line 11 and comment line 12, and use Parent (highlighted in yellow) instead of parentElement, then 61 buttons are returned (highlighted in green)

      To make your function return the appropriate number of items, don't use line 3, but do pass parameters like "Aliases.browser.pageCssButtons.buttons" or "Aliases.browser.pageCssButtons.buttons.Parent". 

      Hopefully, this should also resolve your issue with your other post relating to "FindAll returns only one (first) element"

      • pkudrys's avatar
        pkudrys
        Frequent Contributor

        Thank you for your investigation! I really missed the part about Object Browser requirement. Unfortunately, the solution you are suggesting is not what I can use. The above sample is just a simplified example, not the real-world problem.

        If you check my original code in the first post, I need to get the list of mat-chip-row tags, which are located on the same level as the inputElement (alias item). And because watch list shows directly what I want under the node parentElement property (of the obtained alias element), I hoped to use it in my code. 

        Is there another way to get the list of items according of my needs? Using alias element, pointing to the input, instead of direct parent element, is apparently not an option?     

        In other words, is there a way to get a direct HTML parent (not mapped parent) of an element, which is referenced by the Alias object?   

         

  • rraghvani's avatar
    rraghvani
    Icon for Champion Level 3 rankChampion Level 3

    The screenshot that your have provided,

    What do the items look like in the Object Browser? What item does it reference in your web app? And what item(s) are you trying to find and click on, on the web app?

    Also, what technology does you web application use? Is there a similar web app that I can use to test?

    • pkudrys's avatar
      pkudrys
      Frequent Contributor

      It's an Angular-based app. I just found a public sample page, where this can be tested:
      https://material.angular.dev/components/chips/overview#autocomplete

      I've updated the test project with this particular page and elements. 

       FindAll_test.zip

      Basically, I need to find all mat-chip-rows and click [x] button for each row. Of course, I know there is an easy way to achieve this by using name mapping and simple loop. But I can't use it that way. This project is just a simplified sample. In original project, I'm collecting all form inputs (using the complicated xpath) and do various things for each input. Basically collecting IDs/values, storing them in JSON, eventually loading IDs/values from JSON and filling individual form inputs. Therefore, I'm working on a generic method, which should work with various forms, containing variable number and types of elements. 

      • rraghvani's avatar
        rraghvani
        Icon for Champion Level 3 rankChampion Level 3

        Not sure if this is helpful, but here's a few coding examples that highlights the button. Example 4 highlights and deletes. Name mappings are not used

        function examples()
        {
            // Using Chrome, navigate to https://material.angular.dev/components/chips/examples
            var page = Sys.Browser("chrome").Page("https://material.angular.dev/components/chips/examples");
                        
            var panel = page.FindElement("//example-viewer[@id='chips-reactive-form']//chips-reactive-form-example/section/mat-form-field//mat-chip-grid[@role='grid']");
        
            // Example 1
            var items = panel.FindAll(["CustomObjectType", "contentText"], ["MatChipRow", "regexp:(how-to.*)"], 100);
            for (var i = 0; i < items.length; i++) {
                Sys.HighlightObject(items[i]);
            }
            
            // Example 2
            var items = panel.FindAll(["CustomObjectType", "contentText"], ["MatChipRow", "tutorial*"], 100);
            for (var i = 0; i < items.length; i++) {
                Sys.HighlightObject(items[i]);
            }
            
            // Example 3
            var items = panel.FindElements("//span[@aria-describedby='mat-mdc-chip-7-aria-description']|//span[@aria-describedby='mat-mdc-chip-4-aria-description']");
            for (var i = 0; i < items.length; i++) {
                Sys.HighlightObject(items[i]);
            }
        
            // Example 4
            var panel = page.FindElement("//app-component-viewer[contains(., 'overview')]")
            // Fina all objects in the page, where CustomObjectType = MatChipRow
            var items = panel.FindAll("CustomObjectType", "MatChipRow", 100);
            // Iterate through all found objects, highlight them and then click the X button to close them
            for (var i = 0; i < items.length; i++) {
                Sys.HighlightObject(items[i]);
                items[i].Button(0).Click();        
            }
        }

        I also have this snippet of code,

        function pagesize()
        {
            var page = Sys.Browser("chrome").Page("*");
            page.contentDocument.Script.eval("document.body.style.transform='scale(0.8, 0.8)'");
            aqUtils.Delay(2000);
        }

        which performs JavaScript injections - which performs the same as if using Chrome DevTools. However, this functionality was last working in TC v15.55 and has been broken since.