Basic HTML Knowledge for Selenium Webdriver





Basic HTML (Hyper Text Markup Language) Knowledge for Selenium Webdriver will discuss about how much a selenium resource should have the knowledge about the HTML which is used to develop the application. The reason is, selenium webdriver identifies the elements which are there on the application using HTML tags of that application. So, as a selenium resource we should know the basic HTML knowledge to identify the elements uniquely.

HTML uses the tags to display the elements on the web page. Each element will contain a starting tag and corresponding ending tag. Every tag displays the element on webpage in different way depends on its characteristics. Each element will contain attributes, and attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.

Below is the sample HTML code:

<html>
    <head>
        <title>HTML Internal CSS</title>
        <style type="text/css">
            .red{
                color: red;
            }
            .thick{
                font-size:20px;
            }
            .green{
                color:green;
            }
        </style>
    </head>
    <body>
        <p class="red">This is red</p>
        <p class="thick">This is thick</p>
        <p class="green">This is green</p>
        <p class="thick green">This is thick and green</p>
    </body>
</html>

Below is the output of the above Code:

HTML Output





In the above program all the values/text which we put in these “<>” symbols are called starting tags and in these “</>” are called ending tags. html, head, title, style and p are the tags in the above program. Html is the starting tag in any document and this is called root tag.

‘p’ tag contains an attribute called ‘class’. This attribute will give extra information about the tag. And it will apply some styling to the element which will render on the web page. While identifying the element in selenium these attributes also very helpful to identify the elements uniquely.

Points to Remember:

  1. Each tag will have start and end tags
  2. Each tag may contain a parent or not
  3. Each tag may contain a child or not
  4. Each tag may contain a grandchild or not
  5. Each tag may contain a grandparent or not

These relations also will helpful to identify the elements.

In the above code:

  1. html is the root tag.
  2. head is child tag of HTML
  3. body is also child tag of HTML
  4. body and head are siblings and child tags of HTML
  5. p is child tag of body tag.
  6. body is parent tag of p.
  7. html is grandparent of p tag
  8. p tag is grandchild of htnl tag
  9. class is an attribute to p tag.

Below are the sample Elements which we see on any webpage:

  1. Textbox
  2. TextArea
  3. Button
  4. Radio Button
  5. Checkbox
  6. Image
  7. Dropdown
  8. Chosen Dropdown
  9. WebTable
  10. Frames
  11. DatePickers etc.





To get these elements on the webpage, on the backend we will write corresponding tags. To apply the styles we will use attributes to each tag.

We need to talk about one of the attributes called ID, which is unique for each and every tag. If every tag has ID then it is easy to identify the element using this attribute. But, always all the elements will not have the ID; so we will depend on other ways to identify the element. Remaining attributes may be unique or may not. In the above code all the P tags having class attribute, so we can not depend on the class attribute.

Conclusion:

  1. To identify the element in Selenium webdriver we need to depend on the tags of the corresponding application.
  2. Need to identify the element uniquely to interact with the element.
  3. For this, we will depend on attributes of the tags also.
  4. Whether the element is single or one of the group also, we need to identify that uniquely.

This is the basic information about the HTML.

Please watch youtube video for better understanding.



Related Posts