DOM Terminology | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore locators and DOM navigation , emphasizing their importance in achieving stable and reliable test automation. Key Concepts DOM : The entire document structure of an HTML page, which can be inspected using browser tools. Locating Elements : Right-clicking on a web element (e.g., a sign-in button) and selecting Inspect reveals the corresponding HTML code. DOM Terminology HTML Tags : Each element on a web page is represented by an HTML tag (e.g., <div> , <input> ). HTML Attributes : Properties of HTML tags, such as id , class , and placeholder , which can have values or be empty. Class and ID Attributes : class : Defines styles for elements, can have multiple values. id : Unique identifier for an element on the page. Element Relationships Parent Elements : Elements above a key element in the DOM. Child Elements : Elements nested within a key element. Sibling Elements : Elements at the same level in the DOM structure. Summary The HTML DOM consists of tags, attributes, and their values. Understanding the relationships between elements (parent, child, sibling) is crucial for effective DOM navigation and element location in test automation.