HTML Coding Basics required for Selenium Automation
Selenium Tutorial for Beginners

HTML Coding Basics required for Selenium Automation

Now that you have downloaded & installed Selenium, Eclipse and Java, let’s see how a webpage is rendered in a browser OR the HTML coding basics OR how can Selenium identify the elements on a webpage, uniquely!

HTML Coding Basics

HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS), and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

HTML Elements

An HTML element is an individual component of an HTML document or web page. HTML is composed of a tree of HTML elements and other nodes, such as text nodes. Each element can have HTML attributes specified. Elements can also have content, including other elements and text. Many HTML elements represent semantics, or meaning. For example, the title element represents the title of the document.

HTML documents imply a structure of nested HTML elements. These are indicated in the document by HTML tags, enclosed in angle brackets thus: <p>, indicated by a pair of tags: a “start tag” <p> and “end tag” </p>. Tags may also enclose further tag markup between the start and end, including a mixture of tags and text. This indicates further (nested) elements, as children of the parent element.

Header & Title of the HTML document:

<head>  <title>The Title</title></head>

Headings: HTML headings are defined with the <h1> to <h6> tags:

<h1>Software Testing Studio 1</h1>

<h2> Software Testing Studio 2</h2>

Paragraphs

<p>STS Paragraph 1</p> <p>STS Paragraph 2</p>

HTML Elements – Attributes

An HTML 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. These indicate other information, such as identifiers for sections within the document, identifiers used to bind style information to the presentation of the document, and for some tags such as the <img> used to embed images, the reference to the image resource.

  • Required attributes, needed by a particular element type for that element type to function correctly
  • Optional attributes, used to modify the default functionality of an element type
  • Standard attributes, supported by a large number of element types
  • Event attributes, used to cause element types to specify scripts to be run under specific circumstances.

Most of the attributes of an element are name-value pairs, separated by “=” and written within the start tag of an element after the element’s name. The value may be enclosed in single or double quotes.  The general form of an HTML element is therefore: <tag attribute1=”value1″ attribute2=”value2″>”content”</tag>.

To create a link the <a> tag (element) is used. The href= (attribute) holds the URL address of the link.

<a href=“http://www.softwaretestingstudio.com/”>A link to Software Testing Studio</a>

There are several common attributes that may appear in many elements:

  • The id attribute provides a document-wide unique identifier for an element.
  • The class attribute provides a way of classifying similar elements.
  • The title attribute is used to attach sub-textual explanation to an element.

HTML Coding Basics - Element and Attributes

Document Object Model (DOM)

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.

To render a document such as an HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named as “Document object”. When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. The DOM is also the way JavaScript transmits the state of the browser in HTML pages.

Selenium & HTML Coding Basics

Now how do you think Selenium interacts with the fields displayed on a webpage? How can a script click on a particular link? Or select a particular radio button? Or enter a text in the textbox? Or click on a particular button (say submit)? Yeah! The script first need to identify the field in the webpage and then perform corresponding action, right?

The starting point to learn Selenium (or any other automation tool) is to identify & understand the way Selenium identifies these fields in a webpage. E.g. Textbox, Button, Image, Checkbox, Dropdown, Radio button, Hyperlink, Table, etc. – everything which is visible in a web application is known as “Element”. For Selenium it’s all about identifying these HTML “Elements” using it’s certain “Attributes” (known as “Locators” in Selenium) and then performing the required action to-be-performed on it. Selenium offers a wide choice of Locators (HTML Attributes), namely: ID, Name, Identifier, Link, XPath, CSS, Class, tag, DOM, Filters, etc.

  • findElement(By.id(“email”))
  • findElement(By.name(“email”))
  • findElement(By.linkText(“Forgotten account?”))
  • find_element_by_xpath(“//*[@id=’email’]”)

Hope you got a basic idea of how a webpage is rendered (structured) using HTML Coding Basics – Elements and its attributes. Additionally how Selenium uses these Element + Attribute combinations (called Locators) to identify a particular field. In future posts we will see how different elements can be identified using different attributes using ‘Selenium Locators’!

Save

Save

Save

Save

Save

Leave a Reply

Your email address will not be published. Required fields are marked *