While automating a test understating of DOM is very essential. Any tool read DOM to automate test. In this post we will try to understand what DOM is in simplest words. Tool sees whole page you are doing automation testing as DOM and searches, finds elements in DOM.

As of W3C definition: DOM stands for Document Object Model and it is a programming interface to manipulate a well formed HTML or a valid XML document. Here we will discuss DOM in context of HTML.

Technically, browsers create DOM after parsing the HTML. All browsers follow the specification given here to create the DOM. DOM created by Browsers can be accessed and manipulated by programming languages like JavaScript. Essentially, you can say that DOM connects web pages to programming languages.

DOM expose everything of the web page as objects to programming languages like JavaScript. Whether it is elements, events, styles etc. all are exposed as objects to JavaScript. Let us consider following HTML,

DOM will expose all the HTML elements as objects. These objects can be manipulated and updated by JavaScript.

In other words we can say that DOM is Application Programming Interface (API) which exposes HTML or XML as structured document to programming languages. This structure document can be manipulated by the languages like JavaScript. Above listed HTML can be exposed as following structured document by DOM.

DOM see a HTML document as tree. All elements can be seen as nodes of the tree. Attributes and value of elements can be seen as leaf of the tree.

Browsers generates DOM when it parses the HTML. For example, when you browse above HTML in browser it will parse the HTML and create DOM. You can view created DOM by pressing F12 in any mostly used browser.

I hope now you have descent understanding of DOM. You need understanding of DOM to automate test. I hope you find this post useful. Thanks for reading.