Forum Discussion

Hazey's avatar
Hazey
Occasional Contributor
8 years ago

TestComplete not finding object using QuerySelector

I seem to be having problems when trying to use QuerySelector. I've had this working in the past, but sometimes scripts that I have had working just seem to stop working, despite there being no changes to the html code.

 

In this scenario I already have located an element in the DOM and passed this element to a variable. I am then trying to use QuerySelector on this variable to further refine what I am looking for. Here is the script I have which is written in Python:

 

def selectFromDropdown(PropertyNameId,value):
  openDropdown(PropertyNameId)
  propNames = ["tagname","className"]
  propValues = ["DIV","lae-dropdown-options expanded "]
  DropdownOptions = Aliases.browser.WebApp.FindChild(propNames,propValues,2,True)
  DropdownOptions.QuerySelector('p[data-option-value="'+value+'"]').scrollIntoView()
  DropdownOptions.QuerySelector('p[data-option-value="'+value+'"]').Click()

This code is opening a dropdown menu and then selecting a specific option from within that dropdown. The dropdowns being used are custom dropdowns so may work slightly differently to normal ones. Below is the section of the HTML code thats being searched:

 

<div class="lae-dropdown-options expanded " style="left: 1547px; top: 387.22px; width: 324px; bottom: auto;">
                	<p class="lae-dropdown-option  " data-ember-action="9443" data-option-value="default">
<!---->                    	<span class="field ">Default</span>
                	</p>
                	<p class="lae-dropdown-option  " data-ember-action="9439" data-option-value="Red">
<!---->                    	<span class="field ">Red</span>
                	</p>
                	<p class="lae-dropdown-option  " data-ember-action="9435" data-option-value="Green">
<!---->                    	<span class="field ">Green</span>
                	</p>
                	<p class="lae-dropdown-option  " data-ember-action="9431" data-option-value="Blue">
<!---->                    	<span class="field ">Blue</span>
                	</p>
            <div style="width: 0px; height: 0px; -ms-overflow-y: hidden;">&nbsp;</div>
    </div>

As you can see from the Python script I am first locating the DIV which has the className "lae-dropdown-options expanded " which gets passed into the variable DropdownOptions, this part works fine. I then want to use QuerySelector to find the elements within the object I passed into the variable, which has the attribute data-option-value, which is this part in the Python script

 

DropdownOptions.QuerySelector('p[data-option-value="'+value+'"]').Click() 

 

This part just won't locate the object, so then obviously doesn't perform the click method. This has worked in the past but has just stopped working, and I have had similar occurrences like this with some other scripts.

 

Does anyone know if this should work the way I have it, or if I should be approaching this in different way?  

3 Replies

Sort By
  • Colin_McCrae's avatar
    Colin_McCrae
    Community Hero
    8 years ago

    I may be missing something here, but you say:

     

    "In this scenario I already have located an element in the DOM and passed this element to a variable"

     

    But in your code, your search for the dropdown elements is against:

     

    DropdownOptions = Aliases.browser.WebApp.FindChild(propNames,propVal​ues,2,True)

     

    Where is "WebApp" coming from? I don't see it being passed into your function anywhere? Unless you have scoped it globally and assign it elsewhere? (Messy!) If "PropertyNameId" is your top level object, then you only seem to be using that to actually open the dropdown (assuming "openDropdown(PropertyNameId)" is another function which does exactly that?) that reference doesn't seem to be used in the search within the elements.

     

    You are only telling it to search two layers deep within "WebApp" (whatever it is) so maybe it's finding the wrong top level element on the page (may be hidden?) so never finds the values you want? (And this may happen inconsistently depending on the state of other parts of the site at any given time I guess?)

    • Hazey's avatar
      Hazey
      Occasional Contributor
      8 years ago

      Thanks for the reply Colin.

       

      'WebApp' is actually part of the name map, and just refers to the actual web page. So I am then looking within the page for the drop down options. The drop down options I'm looking for are at the top of the DOM so that's why I limited the tree level to 2. The openDropdown is a separate function and this part works fine. The drop down options only appear in the DOM once the drop down is expanded. So I essentially am searching within the page for the element that contains the drop down options, which gets passed into a variable of the type object. This part seems to work as when I debug through the script I can see the variable has a object assigned to it. Manually looking through the object I can find the values I am expecting, so I know its found the correct element in the DOM. So once I have found the drop down options element and assigned it to the variable 'DropdownOptions', I then want to search this variable object using the QuerySelector funciton, which should find the individual drop down option I'm looking for.

       

      The issue with all of this really is that it was working. I'm not sure if the QuerySelector function is a little unreliable, or the element isn't being stored properly in the object variable, so I then can't find what I'm looking for.

      • Colin_McCrae's avatar
        Colin_McCrae
        Community Hero
        8 years ago

        Ah right.

         

        OK. I think I misinterpreted part of that slightly.

         

        So DropdownOptions contains the top level DIV. But the QuerySelector, when applied to it, does not find the selection you want?

         

        In which case, I'm out of answers at this point I'm afraid. QuerySelector is not a method I've used personally (in TC) so I know nothing about it. I have used CSS Selectors with Selenium Python bindings before, but only within Selenium world and I'm pretty rubbish with CSS notation so had to get a chunk of help from the devs. Your notation looks about right to me, but then, as I say, I'm pretty rubbish with CSS notation! :smileyembarrassed: