DOM Terminology

The DOM represents the HTML structure of a page and can be inspected using developer tools available in most browsers.

The DOM consists of HTML elements, which are defined by tags. Each HTML element has a tag name, such as <div> or <input>. Tags usually appear in pairs with an opening and closing tag, but some elements like <input> are self-closing.

Within these tags, attributes are specified. Attributes consist of a name and a value, for example, type="email".

Attributes provide essential information about the element’s behavior and identity, and are often highlighted in developer tools.

Some attributes act only as flags, without a value (for example, disabled). Whether or not they include a value, attributes play a key role in identifying elements for automation.

Among attributes, id and class have special significance.

• The id attribute serves as a unique identifier for the element on the page.

• The class attribute is used to group elements for styling or functional categorization.

Both id and class are still treated as standard HTML attributes, and can be used as locators for automation purposes.

The class attribute can contain multiple class values separated by spaces. Each of these values can be used individually as a locator in test automation.

Another HTML structure example is a table. In the code shown, the table body contains three rows, and the first row includes three columns. HTML tags generally consist of an opening tag and a closing tag. The opening tag marks the start of an element, while the closing tag marks its end. Content placed between these tags is what is displayed or processed by the browser.

The content between the ">text<" is referred to as the text value. Sometimes, this text value is directly visible on the page, while in other cases it may be hidden or rendered differently depending on the browser’s interpretation of the element.

Elements within the DOM have relationships to one another.

For example, elements higher up in the structure are called parent elements, while elements nested inside them are called child elements. In a table, the <tbody> tag is a parent element, while all rows (<tr>) and cells (<td>) inside it are its children.

The element of focus in an automation scenario is often called the key element.

Understanding the relationship between parent and child elements is important for building accurate locators.

Sibling elements are elements that share the same parent and exist on the same level within the structure. For example, multiple table rows within the same <tbody> are considered siblings.

Summary

• The HTML DOM consists of HTML tags, attribute names, and attribute values.

• class and id are also attribute names in HTML.

• The class attribute can have multiple values, separated by spaces.

• HTML tags usually come in pairs with an opening tag and a closing tag (the closing tag has the same name with a forward slash).

• The value between the angle brackets (><) is considered plain text.

• Elements above a key element in the DOM hierarchy are called parent elements.

• Elements contained within the key element are child elements.

• Elements located at the same structural level (side by side) are referred to as sibling elements.