Basic HTML knowledge for Selenium

Basic HTML knowledge for Selenium, Selenium is for automating web applications, HTML for web page design, so Web Elements and Element Locators like HTML knowledge is required for Selenium.

HTML Basics — HTML Knowledge for Software Testers

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 a corresponding ending tag.

Selenium uses element locators to locate elements in web pages and perform actions on those web elements as part of the functionality of the application.

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser.

It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

HTML elements are the building blocks of HTML pages, and HTML elements are represented by <> tags.

What is Selenium?

Selenium is a Test tool for automating Web applications.

Why HTML Knowledge for Selenium Testers?

Selenium is used for automating web applications and it is especially for automated functional testing. Software application functionality can be used by actions on elements (objects).

Example:
Enter a value into an Edit box,
Click a Link (Then it redirects to another page or another location)
Click a Button (Then it submits…)
Etc…

Selenium uses web Elements info (locators) to locate web elements, and then it performs actions on those elements as part of functional testing.

Example:
Test Step: Click “Gmail” link in “Google” home page
(Selenium has to recognize/identify/locate that “Gmail” link first then it can perform an action (click) on it. In order to locate web elements in web pages, we use HTML element locators for Selenium.)

Note: No web elements information is required for conducting Functional Database Testing.

Elements which we have on Webpages:

1) Textbox / Edit Box

(Enables the user to input text information to be used by a program.)

2) Text / Error Message

(Text present on a web page)

3) Link

(Redirects to another page or location)

4) Button

(Submits…)

5) Radio Button

(Selects an Option…)

6) Checkbox

(Check or Uncheck an option…)

7) Image / Image Button / Image Link

(General Image, Image Button as like Push Button, and Image link as like Text Link.)

8) Dropdown box / Combo box / List box

(Dropdown – Selects an item, Combo box – Selects an existing item or enter new item, and List box – selects one or more items)

9) WebTable

(Web tables are basically tabular structures in web pages arranged in a row and column format.)

10) Frames

(Frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently.)

11) TextArea
(Allow users to enter a sizeable amount of free-form text, for example, a comment on a review or feedback form.)

12) DatePickers

(The Date picker is a graphical user interface widget which allows the user to select a date…)
Etc.

—————————–
Arrangements

1) Inline Elements

2) Mouse Hover
Etc.

We can divide the elements in three ways:

1) Single Elements
2) Group Elements
3) Customized Elements

Web Element Locators:

Element locators are basically the HTML attributes of a web element. They help identify unique web elements on a page.

Software testing frameworks, such as Selenium WebDriver uses element locators to perform actions on the elements. Locators are also known as selectors.

Several types of web element locators in WebDriver:

1) id – Used to identify web element with an ‘id’ attribute

2) name – Used to locate an element with a ‘name’ attribute

3) class name – Locates elements whose class name contains the search value (compound class names are not permitted)

4) tag name – Locates elements whose tag name matches the search value

5) link text – Used to identify the hyperlinks on a web page with the help of ‘<a>’ (anchor) tag

6) partial link text – Locates anchor elements whose visible text contains the search value. If multiple elements are matching, only the first one will be selected.

7) css selector – Used to locate complex elements on the page

8) xpath – A language to query XML documents, consisting of a path expression along with some conditions

Tips on using selectors

> In general, if HTML IDs are available, unique, they are the preferred method for locating an element on a page. They tend to work very quickly.

> If unique IDs are unavailable, a well-written CSS selector is a preferred method of locating an element, but the syntax is complicated and frequently difficult to debug.

> XPath works as well as CSS selectors, Though XPath selectors are very flexible, they are typically not performance tested by browser vendors and tend to be quite slow.

> Selection strategies based on linkText and partialLinkText have drawbacks in that they only work on link elements. Additionally, they call down to XPath selectors internally in WebDriver.

> Tag name can be a dangerous way to locate elements. There are frequently multiple elements of the same tag present on the page.

Relative Locators

Selenium 4 brings Relative Locators which are previously called as Friendly Locators. This functionality was added to help you locate elements that are nearby other elements.

The Available Relative Locators are:

1) above

2) below

3) toLeftOf

4) toRightOf

5) near

Note: findElement method now accepts a new method withTagName() which returns a RelativeLocator.

Common HTML terms

Alt text – Text description of a graphic that appears before the graphic is loaded into the browser.

Anchor <a> – The anchor tag is used to define a hypertext link.

Angle brackets – less than (<) and greater than (>) symbols used to surround an element to create a tag.

Attribute – A property of an HTML element used to provide additional instructions to a given HTML tag.

Broken links – Broken links are those links that do not work because the destination has been deleted or the path has been changed.

Deprecated element – An element that will be obsolete in the future is referred to as deprecated.

Document content – Parts (such as text and graphics) of a web document that you want the user to see.

Document Type Definition (DTD) – A specification for a mark-up language.

Elements – An element in HTML refers to a tag (such as <head>, <body>, and <p>).

Form – A mechanism that enables a user to supply input to the web page author.

Footer text – The text that is not specifically related to the content of the webpage and that appears on every webpage is referred to as footer text.

Frames – HTML supports frames to divide a web page into independent and scrollable sections.

FTP – FTP stands for File Transfer Protocol. FTP is a robust method for transferring files between computers using TCP/IP.

GIF (Graphics Interchange Format) – A file format (commonly used for web pages) used for storing image files.

Hotspot – A defined area on an image that acts as a hyperlink.

HTML converter – A software that converts text to HTML code.

HTML editor – A software that inserts HTML code as you work to create an HTML file.

Hypermedia – Hypertext that may include multimedia like text, images, sound, and video.

Imagemap – A graphic that has clickable areas (or hotspots) defined to allow a user to move to another URL.

Inline – Elements that are supported directly by HTML are known as inline.

JPEG or JPG (Joint Photographic Experts Group) – A common cross-platform image format that is used on the web.

Line break – Line break simply refers to stop of the current line and continuation to the next line.

Link – A hypertext link used to connect one document with another document or file.

Mirror site – A mirror site is a copy of a publicly available website.

Nested tags – Nesting occurs when you place tags within other tags.

Navigating – The act of observing the content of web for some purpose.

Obsoleted element – An element that won’t necessarily work in the future versions of browsers.

Pixel – A collection of dots that make up a monitor’s display.

Robot – A software that automatically explores the web.

Server – A software application that serves requests initiated by client programs.

Style sheet – A style sheet includes styling syntax (rules) that dictates how your web page will look.

Syntax – Syntax basically refers to the rules a computer language uses to perform a task. HTML syntax dictates what and how a web page will display.

Syntax error – A syntax error basically refers to a situation in which the rules (or a rule) of the computer language are (is) broken.

Tags – The HTML code that controls the appearance of an HTML document’s content.

Uploading – Think of uploading as just opposite of downloading. While uploading simply means moving/sending files to the server.

World Wide Web Consortium (W3C) – An organization consisting of representatives from member companies and responsible for making rules for the World Wide Web.

A Sample HTML Document:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Output: