The other day a junior team member of mine was having hard time working with HTML DOM and QTP, he was confused between a lot of terms like tags, attributes, values, properties, DOM elements, GetROProperty, GetTOProperty....the list was endless, and as usual, he was already late to meet the deadline. So, instead of asking him to google all the 'gyaan' on this topic, I gave him a shot of red bull, as follows.....
• The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a HTML document. The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. JavaScript uses DOM to add interactivity to HTML pages. The DOM is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation.
• The Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a HTML document. The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them. JavaScript uses DOM to add interactivity to HTML pages. The DOM is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation.
[ The most important thing to realize is - what we refer to as "Property" of an object in QTP, is actually the "Attribute" in HTML terms, and the Value of the Property is actually the value defined for that Attribute. ]
You can modify the appearance and behavior of an HTML element by altering a DOM object's properties and calling its methods.
When you use the QTP's "Object Property" for a Web object, you actually get a reference to the DOM object. You get access to the native methods and properties of that web object.
This means that any operation that you can perform on a DOM object, you can also perform by running a <WebTestObject>.Object statement on the Web object.
For example, you can use the links property of the Internet Explorer document object to retrieve a link collection.
Example: Activate an Edit Box's Native Focus Method
Set MyWebEdit = Browser("Mercury Tours").Page("Mercury Tours").WebEdit("username").Object
MyWebEdit.focus
All the values of the attributes can be accessed by using the following syntax in DOM (as shown below):
object.attribute
These attribute values can also be accessed via GetROProperty method in QTP.
Both the sets of code (the one with the DOM and the other with QTP methods) will return the same values, the only difference being that if a attribute does not exist, then the DOM returns an Error whereas the QTP GetROProperty method returns 0.
• Common Methods used in DOM:
• Supported by QTP by defualt
• getElementById
• getElementsByName
• getElementsByTagName
When we use methods like the GetROProperty to read property values of the objects, QTP actually returns the values of these attributes that are defined for that object. Hence, if we use GetROProperty("href") it will return the value of the href attribute.
If we want to do this via DOM then we can get the value of href property by using the below code:
sHref = oDOM.Document.getElementById("OpenAcct").href
• DOM vs DP:
Code written in DOM will be substantially faster than the code written in DP (to perform the same operation), because there will be no overhead of Object identification with DOM. QTP UnP Pg 202.
Methods like GetROProperty, GetTOProperty, etc will not be supported by DOM elements directly because they are QTP specific methods. However, these methods will be supported by DP because DP is nothing but the same QTP code.
• Tools: Even though QTP has a good built in Object-Spy, its nowhere close to what Firebug add-on for FireFox can do, and is a must in anyone' arsenal of tools.
• WebTables: Now a days modern websites dont use the 'table' tags for building their pages and displaying content, because of the following reasons
If there are multiple nested table tags in the html code for displaying data in tabular format, then that's a poorly written code.
As opposed to this, DIV tags provide easy maintenance, faster loading and search engine friendly features, as described here
Hence, now a days only DIV tags are used to structure data in tabular format. This also means that 'grids' would be used to display data in tabular format. Grids and Tables are 2 different things in HTML world.
Having said all this, it does not mean he can get away with not having to understand HTML, DOM, and related concepts, as I have ensured that this goes in his appraisal goal sheet, and I would suggest you do the same, if not done already.
Happy learning!!!
When you use the QTP's "Object Property" for a Web object, you actually get a reference to the DOM object. You get access to the native methods and properties of that web object.
This means that any operation that you can perform on a DOM object, you can also perform by running a <WebTestObject>.Object statement on the Web object.
For example, you can use the links property of the Internet Explorer document object to retrieve a link collection.
Example: Activate an Edit Box's Native Focus Method
Set MyWebEdit = Browser("Mercury Tours").Page("Mercury Tours").WebEdit("username").Object
MyWebEdit.focus
All the values of the attributes can be accessed by using the following syntax in DOM (as shown below):
object.attribute
These attribute values can also be accessed via GetROProperty method in QTP.
Both the sets of code (the one with the DOM and the other with QTP methods) will return the same values, the only difference being that if a attribute does not exist, then the DOM returns an Error whereas the QTP GetROProperty method returns 0.
• Common Methods used in DOM:
• Supported by QTP by defualt
• getElementById
• getElementsByName
• getElementsByTagName
When we use methods like the GetROProperty to read property values of the objects, QTP actually returns the values of these attributes that are defined for that object. Hence, if we use GetROProperty("href") it will return the value of the href attribute.
If we want to do this via DOM then we can get the value of href property by using the below code:
sHref = oDOM.Document.getElementById("OpenAcct").href
• DOM vs DP:
Code written in DOM will be substantially faster than the code written in DP (to perform the same operation), because there will be no overhead of Object identification with DOM. QTP UnP Pg 202.
Methods like GetROProperty, GetTOProperty, etc will not be supported by DOM elements directly because they are QTP specific methods. However, these methods will be supported by DP because DP is nothing but the same QTP code.
• Tools: Even though QTP has a good built in Object-Spy, its nowhere close to what Firebug add-on for FireFox can do, and is a must in anyone' arsenal of tools.
• WebTables: Now a days modern websites dont use the 'table' tags for building their pages and displaying content, because of the following reasons
- More number of code needs to be written and maintained overtime as compared to the use of div tags
- It makes the page structure rigid
- It tries to mix the content and the style, which is not a good practice
- Its difficult to display the data correctly on mobile devices with table tags
If there are multiple nested table tags in the html code for displaying data in tabular format, then that's a poorly written code.
As opposed to this, DIV tags provide easy maintenance, faster loading and search engine friendly features, as described here
Hence, now a days only DIV tags are used to structure data in tabular format. This also means that 'grids' would be used to display data in tabular format. Grids and Tables are 2 different things in HTML world.
Having said all this, it does not mean he can get away with not having to understand HTML, DOM, and related concepts, as I have ensured that this goes in his appraisal goal sheet, and I would suggest you do the same, if not done already.
Happy learning!!!
