Exploring the DOM - Finding ChildNodes

[coffee]

Hi,

I am very very new in TestComplete. Just trying the product.

I am wondering, can TestComplete explore the DOM and find the Child Nodes ?

E.g. in Javascript we can write this to find some elements in the DOM 

var x = document.getElementById("div3");
var y = x.getElementsByTagName("p");
var contents = y[2].innerHTML;

Or 

var y = document.childNodes[0].childNodes[1].childNodes[1].childNodes[1];

Can TestComplete do the same?  

Secondly, I am also wondering if I am going to the wrong track, because most TestComplete users tend to use the Keyword Recorder and then convert the Keyword to e.g. JavaScript script and modify the script from there (without any need to analyse the DOM).  I find it easier but the Recorder refers to a coordinate on the page , so the script looks like this (instead of referring to the specific web element in the DOM)

Aliases.browser.pageGooglecom.textboxUsername.Click(67, 13);

What is the best practice for TestComplete user? Should TestComplete user analyse the DOM and create Javascript script from there or just run & rely on the Keyword Recorder?

I come from Selenium background , so I tend to analyse the DOM to create my Java code. 

Thank You.

[Colin_McCrae · Accepted solution]

When you record a Click, it takes in the co-ordinates (relative to the control it's applying the click to).

But in most cases, they're not required and you can just remove them. In the above example, try changing it to plain old "Click()" and it should still work just fine. Personally, I write all my scripts from scratch. Converted recordings are OK, but generally need at least some tweaking to make them more flexible/useful and tidy up some of the extra stuff you often get from auto-generated scripts (such as click co-coordinates) which you don't really need.

If you want to explore the DOM, look at the tabs at the bottom of your project area, there should be an "Object Browser" tab. Click that (with your site or application open) and it will show you the entire structure, as TestComplete see's it. On top of that, there are plenty of "Find" type options including XPath and CSS Selector type options similar to Selenium (for web based tests). Similarly, you can start with the object spy on a specific object and then jump to it in the main Object Explorer in TC. (Top right button in the object spy once you select an object)

[tawilli5]

I am unable to retrieve any child elements within a table. When using the following code, I am able to retrieve the entire row with no issue:

1. var xpath = "//tr/td/div[text() = 'Ryan STIG Regression Test']"; 
2. var theVisitor = page.FindChildByXPath(xpath)
3. 
4. if(theVisitor.Exists){
5. 
6. Sys.HighlightObject(theVisitor);
7. Log.Message(theVisitor.parentElement.parentElement.innerText); 
8. 
}

But when adding the following code :

8. Log.Message(theVisitor.parentElement.parentElement.cells[1].innerText);

I receive a JavaScript runtime error. “TypeError: Cannot read property ‘innerText’ of undefined.

This is a valid element search, as it works with no problem when utilizing the browser console via the dev tools

[AlexKaras]

Hi,

> Cannot read property ‘innerText’ of undefined.

This means that theVisitor.parentElement.parentElement does not contain cells[1] child.

Use ObjectBrowser to explore page structure but not dev tools.

P.S.

> page.FindChildByXPath(xpath)

While search by XPath is supported by TestComplete, it is not recommended and .FindXXX() methods must be used instead. Search by XPath is the last resort way in TestComplete world.

[tawilli5]

Thanks for your insight