A web page is composed of many different types of HTML elements, such as links, textboxes, dropdown buttons, a body, labels, and forms. These are called WebElements in the context of WebDriver. Together, these elements on a web page will achieve the user functionality. For example, let's look at the HTML code of the login page of a website:
<html>
<body>
<form id="loginForm">
<label>Enter Username: </label>
<input type="text" name="Username"/>
<label>Enter Password: </label>
<input type="password" name="Password"/>
<input type="submit"/>
</form>
<a href="forgotPassword.html">Forgot Password ?</a>
</body>
</html>
In the preceding HTML code, there are different types of WebElements, such as <html>, <body>, <form>, <label>, <input>, and <a>, which together make a web page provide the Login feature for the user. Let's analyze the following WebElement:
<label>Enter Username: </label>
Here, <label> is the start tag of the WebElement label. Enter Username: is the text present on the label element. Finally, </label> is the end tag, which indicates the end of a WebElement.
Similarly, take another WebElement:
<input type="text" name="Username"/>
In the preceding code, type and name are the attributes of the WebElement input with the text and Username values, respectively.
UI-automation using Selenium is mostly about locating these WebElements on a web page and executing user actions on them. In the rest of the chapter, we will use various methods to locate WebElements and execute relevant user actions on them.