LOCATORS
| LOCATORS |
Locator is a technique to find any element on the web page.
A locator is a way to identify element on a page.
Different type of locators
- ID
- NAME
- LINK TEXT
- X-PATH
- CSS SELECTOR
- CLASS NAME
- TAG NAME
- PARTIAL LINK TEXT
- To identify the locator, open the application in the chrome browser.
- Right click on the target element and select inspect to find the locator
- Locating element in web driver is done by using the method findElement(By.locator());
ID LOCATOR
ID’s are unique for each element so it is common way to locate elements using ID Locator. As per W3C, ID’s are supposed to be unique on a page and it makes ID’s are the most reliable locator. ID locators are the fastest and safest locators out of all locator
id = id of the element
syntax: findElement(By.Id("id value"));
NAME LOCATOR
We sometimes use Name locator to identify the elements on our webpage. Locating elements using Name is same as locating elements using ID locator.
These are not unique on a page. If there are multiple elements with the same Name locator then the first element on the page is selected. Test may fail, if another element with the same Name locator is present on the web page or added by the developers in the later Stages.
Name = name of the element
Syntax: findElement(By.Name("Name value"));
CLASS NAME LOCATOR
class name locator giver the element which matches the value specified in the attribute name "class".
Syntax: findElement(By.ClassName("ClassName value"));
TAG NAME LOCATOR
Tag name locator is used to find the element matching the specified tag name
Syntax: findElement(By.TagName("TagName value"));
LINK TEXT LOCATOR
f there are multiple elements with the same link text then the first one will be selected. This Link Text locator works only on links (hyperlinks) so it is called as Link Text locator.
Syntax: findElement(By.LinkText("LinkText value"));
PARTIAL LINK TEXT LOCATOR
In some situations we may need to find links by a portion of the test Link Text Element. It contains in such situation we use Partial Link Text to locate element.
Syntax: findElement(By.PartialLinkText("PartialLinkText value"));
CSS SELECTOR |
CSS selector is a patter used to select the element you want to style wed development
To fiind the element in html webpage selector 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 Id
- Inner Text
Tag and Id
Syntax: tag#Id
Tag and CLASS
Syntax: tag.class
Tag and ATTRIBUTE
Syntax: tag[attribute=value]
Tag, class and ATTRIBUTE
Syntax: tag.class[attribute=value]
INNER TEXT
Syntax: tag:contains["Inner Text"]
X - PATH |
X-Path is designed to allow the navigation of XML documents, with the purpose of selecting individual elements, attributes, or some other part of an XML document for specific processing.
There are two type of x-paths
Absolute and Relative x-path
- Attribute a
- Text()
- Contains text()
- Contains (attribute)
- Using index
- Using and
- Using or
- Using Starts with
- Chained X-path
- Using Ends with And using index
|
ABSOLURE X-PATH |
To identify the x-path open the application in the chrome browser. Right click on the target element select inspect, click on the tauget name and pass
- To identify x-path ctrl+f
- Single / is used to move from parent tag to child tag
- It is the direct way to find the element
ADVANTAGES
1.it identify the element very fast
DISADVANTAGES
1. If there ia any changes made in the path of the element the that xpath get failes
Example
If the path we defined as
Html/head/body/table/tbody/tr/td
If there is a tag is added between body and table
Html/head/body/form/table/tbody/tr/td
The first path will not work.
RELATIVE X-PATH |
· Relative x-path the path starts from the middle of the HTML DOC structure
· It starts with the double forward slash (//)
HOW TO CAPTURE X-PATH
There are different ways to capture X-PATH
1. Right click on element --> inspect-->Highlight Html-->right click copy X-PATH
2. Chropath extenction.
3. SelectorHub and manually (own xpath).....
ATTRIBUTE
Identifying an element using its sets of attribute and value is called x-path attribute
Syntax: //html tag[@attribute=’value’]
TEXT ()
Finding a element by its text using text()
Syntax: //html tag[text()=’value’]
Note: text() is an extra match function and it will not be able to match an element if the text of an the element has space on the either side
CONTAINS ( TEXT () )
Contains text is the pattern matching function which can be used to matxh an element with an text in the pattern
Syntax: //html tag[contains(text(),’value’)]
CONTAINS ( ATTRIBUTE )
To find link with it is part of attribute value we use contains attribute
Syntax: //html tag[contains(@attribute,’value’)]
USING INDEX
This approach comes in use when you wish to specify a given tag name in term of the index value you wish to locate index
Syntax: (//html tag[@attribute=’value’])[index]
USING AND & OR
In or expression two conditions are used whether 1 condition or 2nd condition should be true it is also applicable, it may any one condition is true or may be both
Syntax : //html tag[@attribute=’value’or@attribute=’value’]
In and expression two conditions are used both the conditions should be true
Syntax: //html tag[@attribute=’value’and@attribute=’value’]
X-PATH STARTS-WITH
It is a function used for finding the web element whose attribute value gets changed on refresh or by other dynamic operations on the webpage. In this method, the starting text of the attribute is matched to find the element whose attribute value changes dynamically. You can also find elements whose attribute value is static (not changes).
For example -: Suppose the ID of particular element changes dynamically like:
- Id=" message12"
- Id="message345"
- Id="message8769" and so on.. but the initial text is same.
In this case, we use Start-with expression.
In the below expression, there are two elements with an id starting "message"(i.e., 'User-ID must not be blank' & 'Password must not be blank'). In below example, XPath finds those element whose 'ID' starting with 'message'.
Syntax: //html tag[starts-with(@id,’message’)]
X-PATH AXES METHODS |
These XPath axes methods are used to find the complex or dynamic elements. Below we will see some of these methods.
Following
Select all elements in the document of the current node( ) [ UserID input box is the current node] as shown in the below screen.
Syntax: //html tag[@atttribut=’value’]//following::html tag
There are 3 "html tag" nodes matching by using "following". If you want to focus on any particular element then you can use the below XPath method:
Syntax: //html tag[@atttribut=’value’]//following::html tag[1]
Preceding
Select all nodes that come before the current node as shown in the below screen.
Syntax: //html tag[@atttribut=’value’]//preceding::html tag
There are 3 "html tag" nodes matching by using "preceding". If you want to focus on any particular element then you can use the below XPath method
Syntax: //html tag[@atttribut=’value’]//preceding::html tag[1]
Following-sibling
Select the following siblings of the context node. Siblings are at the same level of the current node as shown in the below screen. It will find the element after the current node.
Syntax: //html tag[@atttribut=’value’]//following-sibiling::html tag
Parent
Selects the parent of the current node
Syntax: //html tag[@atttribut=’value’]//parent::html tag
Child
Selects all children elements of the current node
Syntax: //html tag[@atttribut=’value’]//child::html tag