HTML Terminology | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
Lesson Summary
In this lesson, we begin a new section on Locators and Assertions in Playwright, focusing on how to effectively locate web elements on a webpage. Key Concepts Playwright Toolset: A robust set of tools to automatically locate web elements. Custom Web Elements: Understanding how to build and adjust web elements for stability. HTML Basics: Familiarity with HTML terminology is essential for effective element location. HTML Terminology HTML Tag: Starts and ends with angle braces (e.g., <input> ). HTML Attributes: Characteristics of HTML tags, which may or may not have values (e.g., placeholder="email" ). Parent and Child Elements: Elements above are parent elements, while those below are child elements. Sibling elements are at the same level. Understanding the DOM The Document Object Model (DOM) consists of: HTML tags and attributes Attribute values Class and ID as attribute names HTML tags typically come in pairs, with closing tags marked by a forward slash (e.g., </tag> ). The text between angle braces is considered HTML text . Element Relationships Elements above the anchor element are considered parent elements . Elements inside the anchor are child elements . Elements at the same level are sibling elements . Understanding these terms is crucial for navigating and asserting elements effectively in Playwright. In the next lesson, we will explore how to work with text and properties in more detail.
Video Transcript
Hello guys! We're beginning a new section Locators and Assertions. In this section we begin a deeper dive into the Playwright and especially into Locators rules. Playwright has a very good tool set to locate web elements on the web page and it even can locate web elements for you automatically. But sometimes you may have cases when you need to build your custom web elements or for example the test is failing and you need to adjust the web element to make it working and to be more stable. So in order to do that you need to really understand the architecture behind the scenes how Playwright locate web elements. And in this section you will learn about this. And before we begin doing this we begin with the basics about the HTML terminology. So what is HTML tag? What is HTML attribute? What is considered as HTML text? And what is relation between parent and child elements? So we will go through these basics of HTML terminology and then jump in straight to the location of the web elements. So let's get into it. This is example of the HTML code and this represents just an input field that you can use to input the email. At the beginning of each line we have HTML tag name. It usually starts with angle brace and ends up with angle brace as well. Also we have HTML attributes inside and the value highlighted in grid is HTML attribute names. Sometimes HTML attributes can have value and sometimes is not. For example nb-input is just HTML attribute while placeholder has value email. And I highlight this so we can see that value highlighted in blue is HTML attribute value. Also we have IDs and classes. Even ID and class have kind of a special role in HTML. It is also considered as attribute name. Also class have in this example long big value right but each of the values inside of it is independent value. Each values inside of the class are separated by space. And when you use a framework and want to locate your element you can use independently each of those three elements as your CSS locator. So that's important to understand and to know that CSS values are separated by space. Here's another example. This is a table. Table usually starts with T body. TR represents the row. TD represents the table columns. So we have opening tags and we have a closing HTML tag. Closing HTML tag usually have a forward slash. And also tags usually come in pairs. The value which is displayed between the angle braces is considered an HTML text. Not everything that you see on the web page is a text actually. Sometimes the text that is displayed on the page is not hidden inside of the DOM. It can be hidden inside of the properties. The difference is also important to understand because sometimes you want to grab a text from the page or assert a text on the page but it doesn't work and you cannot understand why. Because you're trying to deal with a property instead of the text. The best way to understand what you see in the page is to look into the DOM and look into the value between angle braces. If you see it, it means it is a text. If not, it is not a text. It is a property. And we will talk about text and property and how to assert and work with those values later in the class. Also between angle braces you may find sometimes three little dots. Those dots represent that some nested content is inside of this HTML element. And also a hint is this arrow that turned to the right which is also telling you that it is collapsed. And if you click on this little arrow it will expand and show you the rest of the DOM which is nested for this particular element. Also let's talk about the relations between the web elements. Let's assume that this table row is our key element or anchor element that we want to use. Then all elements that located above this element will be considered apparent elements. And all elements that are located below this element, it's kind of shifted a little bit to the right from the element above, are considered a child element in relation to our key element or in relation to our anchor element. Also elements located one by one next to each other are considered a sibling elements. In this particular example we have a four table columns that located together and they are sibling elements. Or another example these three table rows that are also considered as sibling elements one to another. And let's make a quick summary about the DOM terminology. So HTML DOM consists of HTML tags, HTML attributes and attribute values. Class and ID are also HTML attribute names. Class attribute can have several values and each value is separated by space. HTML tags usually come in pairs of opening and closing tag. Closing tag has the same name in the forward slash. Value in between the angle braces is a plain text or HTML text. Elements above the key element or anchor element are considered apparent elements. Elements inside of the key element are child elements. And elements placed at the same level side by side considered as sibling elements. Alright guys that's it. That's the main terminology that you should clearly understand and see you in the next lesson.