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.
Video Transcript
Hello, guys. In this lesson, we will talk about locators and DOM navigation. And in my opinion, half of the success in test automation, making your test stable and reliable, depends on how well you're able to locate web elements on the web page. And in this particular lesson, we will talk about DOM terminology, making sure that we are speaking the same technical language down the road. All right, so let's get into it. So before we jump into terminology, let's look into our test application. So let's say you want to find the locator for this sign-in button. How to do that? So you make a right-click on this button, and in the menu, look for this inspect. Make an inspect, and here we go. The source code of the HTML page opened for you. And this entire thing, this entire document over here, top to bottom, is called DOM, okay? And this is the button that is highlighted for us. This is the HTML source code for this particular button, this entire box. And if I move the mouse up and down over here, Chrome DevTools highlights for us in the browser, each section in HTML that is responsible for the elements on the page. This is how you can navigate the DOM and understand, okay, which element responsible for what element in the source code. Now let's jump into the presentation and talk about some technical terminology related to the DOM. So here is the sample of HTML code that represents the input field. So here's the input tag and with a bunch of other values. So let's talk about the terminology in the DOM. So every element on the web page has HTML tag. So this angle brace and then div is the HTML tag name. And input is also HTML tag name. And in the DOM, you would see it in the blue color. Also within the HTML tag, you would see HTML attributes. So for example, data-c-y or fold-width, id and nb-input, placeholder, and so on, this is HTML attributes. And some of the HTML attributes can have HTML attributes value. For example, id has the value input email1, or placeholder attribute name has the value email. But some HTML attributes not necessary have the values, for example, nb-input in this example, or full-width also attribute. It does not have a value, and that's important to understand. Also in the DOM, class and id, they have kind of a special role. But this is also HTML attribute. Class HTML attributes define the custom style sheets, also known as CSS. Custom style sheets create the design of the web page. For example, what colors are used, what shape of the button we use, and so on. And those custom style sheets define the design of the web application. And id, usually it is the unique attribute for the entire page. So if you see id on the web page, it means that most likely this element, the value for this id, for example, input email1, is unique for the entire page. But still, id is the attribute, and class is the attribute as well. So also for the class attribute, you see there are three values separated by space. So it's in double quotes, but each of this value is independent value. And you can use each of those values independently as part of your locators targeting web elements, that's also worth remembering. So what's next? Now this is the next example of HTML that represents the web table. So if you look at this tag, tbody represents table body. Then the next one, tr is a table row, and then next after that, td is the table column. So that's the code for the web table. And usually HTML tags come in pairs. So this is the opening tag, and this is the closing tag. So closing tag comes with a forward slash. For example, this is a tbody opening tag, and the closing tag, it's all the way in the bottom. Or this table row is the opening tag, and this is the closing tag for the same table row. Or this td, opening tag is over here, and closing tag is over here at the end of the row. The values that are located between the angle brace, you see the angle brace of the tag, and before the closing brace of the td tag, is the text value. So 1.8 MB is literally the text that you see on the web page. Quick note that not all text that you see on the web page will be visible in the DOM. Sometimes text can be hidden in the browser properties. We're gonna talk about it later. It's mostly related to the input field. But generally, if you see the text in the DOM displayed between the angle brace, it means that this is a text for sure. So moving on, if you see the little dots over here between the angle braces, it means that something inside of this tag is available, some additional context hidden in the DOM, and you can expand and watch what is inside. And also as a hint, you can watch at this icon. You see this triangle icon turned to the right. It means that it's possible to be expanded. For example, this table row, this triangle icon showing to the bottom, it means it's already expanded. This one is not yet expanded. And if you click on this, it will expand the DOM structure for you, and you will see what is inside of this particular table column. So moving on. Let's talk about the relation between web elements. So let's assume that this is our, let's say, key element, the element that we are starting from. Then all elements that are located above this web element, we would call parent elements. And all elements that are located below this key element would be children elements, but not like all elements in the DOM. Only within the tag that is open. So here is the opening tag, here is the closing tag. And all elements that are nested inside of this element are considered child element in relation to this parent element. So this relation of child elements and parent elements is important to understand. Also, we have a sibling elements. For example, these tds, which are columns, you see they are located kind of on the same level next to each other. So those are sibling elements. Or these table rows as well. So they are located kind of on the same level, one, two, and three. So those elements are sibling elements to each other. And let's make a quick summary. So HTML DOM consists of HTML tags, HTML attributes, and attribute values. Class and ID have kind of a special role in the DOM, but they are also considered HTML attributes. Class attribute can have several values, and each value is separated by space. HTML tag usually come in pairs of opening and closing tags. Closing tags has the same name and the forward slash. Value between the angle braces is a plain text. And elements that are above key elements is the parent element. And elements that are inside of the key element considered child elements. And elements placed at the same level side by side are sibling elements. All right, guys, so that's the DOM terminology that we're gonna use down the road, making sure that we are speaking the same language. So see you in the next lesson.