The DOM, your ally for Testing Web Applications
Article initially published in MacroTesting magazine (November 2009).
Since the invention of the World Wide Web by Tim Berners-Lee in 1989, the browser has evolved quite dramatically. It is now capable of running Web applications using a technology that initially was not meant for that purpose. The HTML language was created for enabling researchers to collaborate and share information.
The elements are:
- HTML Parser: it processes the received HTML documents and generates the DOM, a tree representation of the HTML document.
- DOM: a tree representation of the displayed page.
- Rendering Engine: the engine in charge of reading the DOM tree and generating a graphic representation of it.
A typical flow consists of the following steps:
- A user types a URL which triggers the download of a main HTML page and all the related resources.
- The HTML parser processes the HTML code and generates the static part of the DOM tree.
- The DOM represents the Web page to be displayed and each node is a piece of graphical information with its own data (type, location, style).
- The rendering engine processes the DOM and generates the graphical representation that the user sees in the browser.
As you can see, the DOM plays a central role in the Browser architecture. It is the cornerstone of a browser. The differences you see between various browsers (Chrome, Firefox, Internet Explorer, Opera, Safari, and al.) is partly due to the way this DOM representation is generated.
Any testing tool that seriously supports Web applications must have a means of accessing the DOM giving the tester more freedom. This functionality can be used to:
- Access some DOM objects that carry information not visible on the screen.
- Allow more complex interactions using the structure of the data in the DOM.
- Interact with the DOM to perform actions not available to carry out with the testing tool.
For instance, Borland SilkTest and HP QuickTest Professional, the two major functional testing tools available on the market allow this type of interaction. QuickTest Professional has a property Object that gives access to the corresponding DOM object, whereas SilkTest has a method ExecMethod() that provides this access. See both examples below:
HP QuickTest Professional
Thanks to the DOM, you now no longer have any limitations to your testing capability!