CSS Selector Path - TestComplete Javascript Can't Click the Button

I have this piece of HTML code

I am using Testcomplete (Javascript) to target the button and try to click it. I think it is more about my CSS path/Javascript rather than TestComplete itself.

I tried this code and it works fine

var path2 = "#Table > div > table > tfoot > tr > th:last-child > span > div";
var z = Page.QuerySelector(path2);
z.Click();   // Works Fine

I also tried this one and it works fine

var path2 = "#Table > div > table > tfoot > tr > th:nth-child(7) > span > div";
var z = Page.QuerySelector(path2);
z.Click();  //Works Fine

But when I tried this one, it won't find and click the button

var path2 = "#Table > div > table > tfoot > tr";   // path to parent table
var z = Page.QuerySelector(path2);
var y = z.QuerySelector('div.blue'); // Look for the child from that parent with tag div and class blue
Log.message(y.getAttribute("class"));  // Will return "button blue w-icon footer-add"
y.Click();  // Will return Javascript Runtime Error. y.Click is not a function

I don't know why if I find the parent node first and then search for it's child , Javascript won't be able to find it and click it ?

The reason for this behavior can be explained by the following text from the QuerySelector Method (Page Objects) TestComplete help topic.

Result Value

If a TestComplete web object matches the specified selector, then the method returns this object.

If there is no matching TestComplete test object, the method returns the appropriate HTML object.

In your case, the first found object (var z = Page.QuerySelector(path2);) does not have a corresponding TestComplete object, so the native HTML object is returned. When you query the second object (var y = z.QuerySelector('div.blue');), you actually calls the native QuerySelector method and not the TestComplete one that can return a TestComplete object. So, you get the native object as a result of the second query as well even while there is a corresponding TestComplete object. The Click method is appended to TestComplete objects and you cannot use it when working with native HTML objects.

So, the only option in your case to break the long path into two pieces is seems to be this one:

  var path2 = "#Table > div > table";
  var z = Page.QuerySelector(path2);
  var y = z.QuerySelector('tfoot > tr > th:last-child > span > div.blue');
  Log.message(y.getAttribute("class"));
  y.Click();