BASICS OF HTML :
HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content
HTML TAGS:
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
Note : The start tag is often called the opening tag. The end tag is often called the closing tag.
The <!DOCTYPE> DECLARATION
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are different document types on the web.To display a document correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>
HTML DOCUMENTS
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML HEADINGS
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML LINKS
HTML links are defined with the <a> tag:
<a href="http://www.amrit.com">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML IMAGES
HTML images are defined with the <img> tag.
<img src="amrit.jpg" alt="amrit.com" width="104" height="142">
HTML ATTRIBUTES
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
THE TITLE ATTRIBUTE
HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title attribute. The value of the attribute is "About W3Schools":
<p title="About Amrit">
THE href ATTRIBUTE
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="http://www.amrit.com">This is a link</a>
THE alt ATTRIBUTE
The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML HORIZONTAL RULES
The <hr> tag creates a horizontal line in an HTML page.
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
HTML PARAGRAPHS
The HTML <p> element defines a paragraph.
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Example:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
HTML LINE BREAKS
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
EXAMPLE
<p>This is<br>a para<br>graph with line breaks</p>
Defining HTML Tables
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
EXAMPLE EXPLAINED:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
NOTE Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
LOCATORS tell Selenium IDE which GUI elements ( say Text Box, Buttons, Check Boxes etc) its needs to operate on. Identification of correct GUI elements is a prerequisite to create an automation script.
THE DIFFERENT LOCATORS IN SELENIUM ARE
1. ID
2. Name
3. Link Text
4. CSS Selector
5. DOM (Document Object Model)
6. XPath
WEBPAGE :
Web pages are what make up the World Wide Web. These documents are written in HTML (hypertext markup language) and are translated by your Web browser. Web pages can either be static or dynamic. Static pages show the same content each time they are viewed. Dynamic pages have content that can change each time they are accessed. These pages are typically written in scripting languages such as PHP, Perl, ASP, or JSP. The scripts in the pages run functions on the server that return things like the date and time, and database information. All the information is returned as HTML code, so when the page gets to your browser, all the browser has to do is translate the HTML.
WEBELEMENT : (Interface WebElement)
public interface WebElement extends SearchContext
WebElement represents an HTML element. HTML documents are made up by HTML elements. HTML elements are written with a start tag, with an end tag, with the content in between: <tagname>content </tagname>
The HTML element is everything from the start tag to the end tag: <p> My first HTML paragraph. </p>
HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.
<html>
<body>
<h1> My First Heading </h1>
<p> My first paragraph. </p>
</body>
</html>
All operations to do with interacting with a page will be performed through this WebElement Interface.
DIFFERENCE BETWEEN findElement() and findElements:
findElement() method is the first returns a WebElement object otherwise it throws an exception.
RULES OF findElement():
On Zero Match : throws NoSuchElementException
On One Match : returns WebElement
On One+ Match : returns the first appearance in DOM findElements()
RULES OF findElements():
Find all elements within the current page using the given "locating mechanism".Returns List of WebElements.
Syntax: java.util.List<WebElement> findElements(By by)
By:
public abstract class By
extends java.lang.Object
ID LOCATOR :
This is the most common way of locating elements since ID's are supposed to be unique for each element.
<form name="loginForm">Login
Username: <input id="username" type="text" name="login" />
Password: <input id="password" type="password" name="password" />
<input type="submit" name="signin" value="SignIn" /></form>
You can easily choose the element with the help of ID locator from the above example:
id = “username”
id = “password”
Use the same in your Selenium test script as well:
WebElement elementUsername = driver.findElement(By.id("username"));
WebElement elementPassword = driver.findElement(By.id("password"));
LOCATING BY NAME:
Locating elements by name are very similar to locating by ID, except that we use the "name=" prefix instead. name attributes don’t have to be unique in a page.
Let’s take the above example:
You can easily choose the element with the help of Name locator from the above example:
name = “login”
name = “password”
Use the same in your Selenium test script as well:
WebElement elementUsername = driver.findElement(By.name("login"));
WebElement elementPassword = driver.findElement(By.name("password"));
LINK LOCATOR :
With this you can find elements of “a” tags(Link) with the link names. Use this when you know link text used within an anchor tag.
Example: If an element is given like this:
<a href="link.html">Name of the Link</a>
To click this hyperlink using the anchor tag’s text, you can use the link locator:
link=”Name of the Link”
Use the same in your Selenium test script as well:
WebElement element=driver.findElement(By.linkText("Name of the Link"));
DOM LOCATOR
The DOM strategy works by locating elements that matches the JavaScript expression referring to an element in the DOM of the page. DOM stands for Document Object Model. DOM is convention for representing objects in HTML documents.
Example:
<form name="loginForm">Login
Username: <input id="username" type="text" name="login" />
Password: <input id="password" type="password" name="password" />
<input type="submit" name="signin" value="SignIn" /></form>
Example: To select the username from the example you can use the following ways: document.forms[0].elements[0]
document.forms[‘loginForm’].elements[‘username’]
document.forms[‘loginForm’].username
document.getElementById(‘username’)
CSS SELECTORS
CSS Selectors are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes.
CSS Selectors have many formats, but we will only focus on the most common ones.
Tag and ID
Tag and class
Tag and attribute
Tag, class, and attribute
Inner text
What is XML?
The Extensible Markup Language (XML) is the context in which the XML Path Language, XPath, exists.
XML provides a standard syntax for the markup of data and documents.
XML documents contain one or more elements. If an element contains content,whether other elements or text, then it must have a start tag and an end tag. The text contained between the start tag and the end tag is the element’s content.
<Element> //Start tag
Element content goes here.//Element Content
</Element>//End Tag
An element may have one or more attributes, which will provide additional information
about the element type or its content.
Below is the sample XML:
about the element type or its content.
Below is the sample XML:
<?xml version='1.0'?>
<Catalog>
<Book>
<Title>XML Tutorial</Title>
<Author>Selenium Easy</Author>
</Book>
</Catalog>
It can also be written as:
<?xml version='1.0'?>
<Catalog>
<Book Title="XML Tutorial" Author="Selenium Easy">
</Book>
</Catalog>
XPATH:
XPath can be viewed as a way to navigate round XML documents. Thus XPath has similarities to a set of street directions.
When you need to search for a address, you should know what is your starting point to reach your destination.
In XPath the starting point is called the context node.
ABSOLUTE PATH (/)
Absolute XPath starts with the root node or a forward slash (/).
The advantage of using absolute is, it identifies the element very fast.
Disadvantage here is, if any thing goes wrong or some other tag added in between, then this path will no longer works.
Absolute XPath starts with the root node or a forward slash (/).
The advantage of using absolute is, it identifies the element very fast.
Disadvantage here is, if any thing goes wrong or some other tag added in between, then this path will no longer works.
EXAMPLE
If the Path we defined as
html/head/body/table/tbody/tr/th
If the Path we defined as
html/head/body/table/tbody/tr/th
If there is a tag that has added between body and table as below
html/head/body/form/table/tbody/tr/th
html/head/body/form/table/tbody/tr/th
The first path will not work as 'form' tag added in between
RELATIVE PATH (//)
A relative xpath is one where the path starts from the node of your choise - it doesn't need to start from the root node.
A relative xpath is one where the path starts from the node of your choise - it doesn't need to start from the root node.
It starts with Double forward slash(//)
Syntax:
//table/tbody/tr/th
//table/tbody/tr/th
Advantage of using relative xpath is, you don't need to mention the long xpath, you can start from the middle or in between.
Disadvantage here is, it will take more time in identifying the element as we specify the partial path not (exact path).If there are multiple elements for the same path, it will select the first element that is identified
XPATH AXES
XPath has a total of 13 different axes, which we will look at in this section. An XPath axis tells the XPath processor which “direction” to head in as it navigates around the hierarchical tree of nodes.
Identifying Xpath using full path of XML
xpath=//body/div[3]/form/fieldset/input[2]
Here //body is the main root node, /div[3] describes the 3rd div child node of parent node body, /form describes the child node form of parent node div[3], /fieldset describes the child node fieldset of parent node form, /input[2] describes the 2nd input child node of parent node fieldset.
Writing Xpath using last()
xpath=//body/div[3]/form/fieldset/input[last()-2]
Here /input[last()-2] describes the 3rd upper input node(input[2]) from last input node.
xpath=//body/div[3]/form/fieldset/*[last()-3]
Here /*[last()-3] describes the 4th upper node(input[2]) from last node.
Xpath locator using @ and attribute
xpath=//body/div[3]/form/fieldset/input[@type='search']
Here /input[@type='search'] describes the input node having attribute type='search'.
Xpath expression using @ and attribute
xpath=//body/div[3]/form/fieldset/input[@accesskey='F']
Here /input[@accesskey='F'] describes the input node having attribute @accesskey='F'.
Xpath syntax using @ and attribute
xpath=//input[@accesskey='F']
Xpath example using @ and attribute
xpath=//input[@type='search']
Here /input[@type='search'] describes the input node having attribute type='search'.
XML Xpath using /descendant:: keyword
xpath=//div[@class='search-container']/descendant::input[@accesskey='F']
Here i have used descendant in between. In this case i have described only starting node div with attribute class='search-container' and final node input with accesskey='F' attribute. So not need to describe in between nodes.
Xpath query example using contains keyword
xpath=//input[contains(@id, "searchInput")]
Here i have used contains keyword to identify id attribute with text "searchInput".
Xpath using and with attributes
xpath=//input[contains(@id, "searchInput") and contains(@accesskey,"F")]
In this example, It will look at two attributes in input node.
XML xpath value value using position()
xpath=//div[@class='search-container']/descendant::input[position()=2]
This xpath will select input node which is on number 2 position and it is for input text box as shown in image.
Using starts-with keyword
xpath=//input[starts-with(@type, "s")]
In this example, It will find input node with attribute is 'type' and its value is starting with 's' (here it will get type = 'search').
Using OR (|) condition with xpath
xpath=//input[@accesskey='F'] | //input[@id='searchInput'] xpath=//input[@accesskey='F' or @id='searchInput']
In both these example, it will find input text box with accesskey='F' or @id='searchInput'
Using wildcard * with to finding element
xpath xpath=//*[@accesskey='F'
Finding nth child element of parent
xpath=//body/*[3]/form/fieldset/*[2]
This xpath is for search text box.
Here, /*[3] describes the 3rd child element of body which is div[3]. Same way *[2] describes the 2nd child element of fieldset which is input[2]
XPATH EXAMPLES FOR DROP DOWN
1. xpath=//body/div[3]/form/fieldset/select
2. xpath=//body/div[3]/form/fieldset/select[last()]
3. xpath=//body/div[3]/form/fieldset/select[@id='searchLanguage']
4. xpath=//body/div[3]/form/fieldset/select[@name='language']
5. xpath=//div[@class='search-container']/descendant::select[@name='language']
6. xpath=//select[contains(@id, "searchLanguage")
7. xpath=//div[@class='search-container']/descendant::select[position()=1]
8. xpath=//body/div[3]/form/fieldset/select[count(*)>1]
OTHER XPATH EXAMPLES
Xpath: "//ul/li[contains(text(),'Apple Mobiles')]/preceding-sibling::li"
This will give "Samsung Mobiles"
How to get all the following siblings of Apple
Xpath: "//ul/li[contains(text(),'Apple Mobiles')]/following-sibling::li"
This will give all the preceding siblings ( Nokia Mobiles, HTC Mobiles, Sony Mobiles, Micromax mobiles).
There is trick to use preceding-sibling and following-sibling. Place matters when you use this at beginning it will give you reverse result
When you use preceding-sibling at beginning then it will give result ( Nokia Mobiles, HTC Mobiles, Sony Mobiles, Micromax mobiles) instead of Samsung mobiles This will give Samsung mobiles.
Xpath : "//li[preceding-sibling::li='Apple Mobiles']"
When you use following-sibling at the beginning then it will give reverse result. Instead of giving all below nodes of Apple mobile this will give Samsung Mobiles.
Xpath: "//li[following-sibling::li='Apple Mobiles']"
Now the question is how to get all the nodes between Apple Mobiles and Sony Mobiles.
Xpath : "//ul/li[preceding-sibling::li='Apple Mobiles' and following-sibling::li='Sony Mobiles']"
This will return Nokia Mobiles and HTC Mobiles.
or
Xpath : "//ul/li[preceding-sibling::li[.='Apple Mobiles'] and following-sibling::li[.='Sony Mobiles']]"
or
You can use this in contains as well
Xpath: "//ul/li[preceding-sibling::li[contains(text(),'Apple Mobiles')] and following-sibling::li[contains(text(),'Sony Mobiles')]]"
Dynamic elements:
In this section we will learn different ways to handle dynamic element and construct generic Xpath.
In few scenarios, element attributes change dynamically. It can be ‘id’, ’name’ etc.
Example: let’s say ‘id’ of a username field is ‘username_123’ and the xpath will be
//*[@id=’username_123′] but when you open the page again the ‘id’ of ‘username’ field might have changed and the new value may be ‘username_234’.
In this case the test will fail because the selenium could not find the xpath you have passed earlier as the id of the field has changed to some other value.
There are many approaches depending upon the type of problem:
Problem Type 1: If part of the attribute value changes.
Example: As in the above example, id value changes but few fields remains constant.
‘username_123’ changed to ‘username_234’ but ‘username’ always remained constant.
You can construct xpath as below:
driver.findElement(By.xpath(“//*[contains(@id,’username’)]”)).sendKeys(“username”);
driver.findElement(By.xpath(“//*[starts-with(@id,’user’)]”)).sendKeys(“username”);
driver.findElement(By.xpath(“//*[contains(@id,’username’)]”)).sendKeys(“username”);
driver.findElement(By.xpath(“//*[starts-with(@id,’user’)]”)).sendKeys(“username”);
‘contains’ is a java method which checks if id contains the substring username.
starts-with() checks if any attribute starts with “user”.
starts-with() checks if any attribute starts with “user”.
Problem Type 2: If entire value of the attribute changes dynamically.Again in this case, there could be different approaches:
Solution: Use of sendKeys.
Selenium provides different api to use function keys. For example tab key, enter keys, F5 etc.
Ste-1: Enter password
driver.findElement(By.id(“password”)).sendKeys(“password”));
Step-2: Use key functions to navigate to element.
driver.findElement(By.id(“password”)).sendKeys(Keys.ENTER));
or
driver.findElement(By.id(“password”)).sendKeys(Keys.TAB));
Selecting Nodes
XPath uses path expressions to select nodes in an XML document. The node is selected by following a path or steps. The most useful path expressions are listed below:
| Expression | Description |
|---|---|
| nodename | Selects all nodes with the name "nodename" |
| / | Selects from the root node |
| // | Selects nodes in the document from the current node that match the selection no matter where they are |
| . | Selects the current node |
| .. | Selects the parent of the current node |
| @ | Selects attributes |
In the table below we have listed some path expressions and the result of the expressions:
| Path Expression | Result |
|---|---|
| bookstore | Selects all nodes with the name "bookstore" |
| /bookstore | Selects the root element bookstore
Note: If the path starts with a slash ( / ) it always represents an absolute path to an element!
|
| bookstore/book | Selects all book elements that are children of bookstore |
| //book | Selects all book elements no matter where they are in the document |
| bookstore//book | Selects all book elements that are descendant of the bookstore element, no matter where they are under the bookstore element |
| //@lang | Selects all attributes that are named lang |
Predicates
Predicates are used to find a specific node or a node that contains a specific value.
Predicates are always embedded in square brackets.
In the table below we have listed some path expressions with predicates and the result of the expressions:
| Path Expression | Result |
|---|---|
| /bookstore/book[1] | Selects the first book element that is the child of the bookstore element.
Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1]. To solve this problem in IE, set the SelectionLanguage to XPath:
In JavaScript: xml.setProperty("SelectionLanguage","XPath"); |
| /bookstore/book[last()] | Selects the last book element that is the child of the bookstore element |
| /bookstore/book[last()-1] | Selects the last but one book element that is the child of the bookstore element |
| /bookstore/book[position()<3] | Selects the first two book elements that are children of the bookstore element |
| //title[@lang] | Selects all the title elements that have an attribute named lang |
| //title[@lang='en'] | Selects all the title elements that have a "lang" attribute with a value of "en" |
| /bookstore/book[price>35.00] | Selects all the book elements of the bookstore element that have a price element with a value greater than 35.00 |
| /bookstore/book[price>35.00]/title | Selects all the title elements of the book elements of the bookstore element that have a price element with a value greater than 35.00 |
Selecting Unknown Nodes
XPath wildcards can be used to select unknown XML nodes.
| Wildcard | Description |
|---|---|
| * | Matches any element node |
| @* | Matches any attribute node |
| node() | Matches any node of any kind |
2 comments:
Thank you for introducing this tool. keep it updated.
Selenium with Java Online Training
Selenium Online Training India
your valuable information and time. Please keep updating.
Selenium Online Training Hyderabad
Selenium Testing Course Online
Post a Comment