HTML elements
An HTML element has the following syntax:
<element /> An HTML element in enclosed within a preceding '<' and a trailing '/>' characters. An HTML element can have none, one or many attributes, depending on its' type. The attribute has pairs of keys and values to define additional information about the element.
There are a few attributes that can be assigned to any HTML element. Two of them are described here:
ID - to specify a unique identifier for the element.
CLASS - an element can have one or more classes.
There are a great number of HTML elements, but for the purpose of Selenium testing, the most commonly used ones are presented below.
Common HTML elements
Link
Element: a. Attributes:
href: the URL that will open when the link will be clicked. The value of this attribute is a string. Example:
<a href="http://iamalittletester.wordpress.com" /> target: where the link will open. This attribute can only have a subset of predefined values: _blank (the link opens in a new window or tab), _self (default - opens in the same frame), _parent (opens the link in the parent frame), _top (opens in the same window). A frame represents an area of the whole page, delimited by the <frame> element. Example:
<a href="http://iamalittletester.wordpress.com" target="_top" /> Dropdown
Element: select. Syntax:
<select>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="valuen">Value N</option>
</select>
This will create a dropdown that contains the following values, in this order: Value 1, Value 2, Value N. Each element, as can be seen here, has a corresponding 'option' tag, to create an entry in the dropdown.
Image
Element: img. Attributes:
src: the source URL from where the image is to be loaded.
height: specifies to what height should the image be resized. If not specified, the height will remain the default one (the height of the actual image, as it appears at the 'source' location).
width: specifies to what width should the image be resized. If not specified, the width will remain the default one (the width of the actual image, as it appears at the 'source' location).
Example:
<img src="theSourceUrl" height="500" widht="320" /> Lists
There are three different types of lists:
numbered lists are made up of an opening <ol> and a closing </ol> tags, within which each list element is represented by a <li> and </li> pair of tags. Example:
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol> unordered lists are made up of <li> and </li> tag pairs, as many as the elements of the list. Example:
<li>One</li>
<li>Two</li>
<li>Three</li> bulleted lists are made up of an opening <ul> and a closing </ul> tag, within which each list element is represented by <li> and </li> pairs of tags. Example:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul> Grouping elements
To group elements in the HTML page for structuring purposes, <div>, <span> and <table> elements.
Input
An input element can be of several types. It is included in <form> elements and is used for allowing users to input data, data which is then submitted and processed. An example of a form can be a page where a user is asked to provide his personal details in order to create an account on a site, to purchase something online, and so on. Some of the available inputs are described below. For each of them the syntax is the same (but some of them have different attributes that they can declare):
<input type="theType" /> Text area: By using the type="text" attribute, you will define an area in which you can type text.
Submit button: By using type="submit", you will declare a button that will submit the form, once you click it. Once submitted, the data the user has entered on the form is submitted to be processed.
Checkbox: By using type="checkbox" you will create a checkbox that is by default not selected. It can be selected/unselected by clicking on it.
Email field: By using type="email", you will create an input element into which you need to enter text, that is validated against a valid email format. If the text typed into this input does not match the expected email format, a gentle reminder is displayed next to the field.
File upload: By using type="file", you will define an element that has a 'Browse' button, allowing you to upload a file from your local computer.
Password: By using type="password", you will create an input field into which you can enter text. While you type, the letters will not actually be seen inside the field, but instead '*' characters will be displayed, to mask the characters that were typed into the field.
Radio button: By using type="radio", radio buttons can be created.
There are different attributes that can be used with an input, depending on which type of element you want to create, but there are also some common ones. For example:
checked="checked": if an element is selected (checked) by default (for radio buttons and checkboxes).
disabled="disabled": if an element should be disabled and should not be interacted with. For example, in the case of a checkbox, if it is disabled, it cannot be selected or unselected.
value: this attribute defines string values, and specifies the text to be displayed by default within the input. For example, for an email, you can display a predefined value inside the email field.
Interaction with HTML elements from Selenium
The Selenium library allows interaction with the HTML elements, by means of the following methods implemented within its' classes:
click() - click on an element. The elements you can click on are: buttons, radio buttons, checkboxes. You can also click inside of input fields that allow for typing text (like email, password, regular text input fields). The usage is element.click().
sendKeys() - typing something into a field. The actual usage is: element.sendKeys("The text to be typed"). You can type into fields that allow for this type of action (like email, password, regular text input fields). You cannot type inside buttons of any sort (radio/checkbox/regular ones).
getAttribute() - retrieve the specified attribute for any element. The usage is : element.getAttribute(attribute). For example, by applying this method to an element that has a 'class' attribute, this method will return the value of the attribute (by calling getAttribute("class")).
To be able to use these methods, you will first need to give Selenium the reference to the HTML elements you want to interact with. To understand how to create the elements for Selenium tests, you can read this post: https://imalittletester.com/2014/02/25/creating-the-page-objects/. But before that, as prerequisite for that post, you should first read about XPATH and CSS selectors.