05. Locators
Srinivas Prasad K T
Engineering Manager @ Decathlon Technology || Ex Harman || Ex E2Open || Oracle Java? || Spring Boot? || WDIO? || Playwright? || Java Script & Type Script? || Scrum? || Gatling? || AI? || Tricentis Tosca? || ACCELQ?
What is Web Element?
?<p>?my first HTML paragraph.?</p>
Locators
Note: Locators are the lifeblood of the tests. Using the right locator ensures the tests are faster, more reliable or has lower maintenance over releases.?If you’re fortunate enough to be working with unique IDs and Classes, then you’re usually all set. But there will be times when choosing a right locator will become a nightmare. It can be a real challenge to verify that you have the right locators to accomplish what you want.
Types of Locators
There are 8 types of locator are available.
Example:
<html>
?????<body>
<a href =?https://www.google/com? id =?a1? name =?n1? class=?c1?>Qspiders</a>
?????</body>
</html>
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
WebElement id = driver.findElement(b);
id.click();
Example:?
Using ID:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
Using Name:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
Using Link Text:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
driver.findElement(By.linktext("Qspiders")).click();
Using Partial Link Text:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
driver.findElement(By.partiallinktext("Qsp")).click();
Using Tag name:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
driver.findElement(By.tagname("a")).click();
Using Class Name:
WebDriver driver = new FirefoxDriver();
driver.get("file://C:/Users/HP/Desktop/mypage.html");
driver.findElement(By.classname("c1")).click();
Id: - Select element with the specified?@id?attribute.
Name: - Select first element with the specified?@name?attribute.
Link text: - Select link (anchor tag) element which contains text matching the specified link text
Partial Link text: - Select link (anchor tag) element which contains text matching the specified partial link text
Tag Name: - Locate Element using a Tag name.
Class name: - Locate Element using a Tag name.
CSS selector: - Select the element using CSS selectors.?
X-path: - Locate an element using an X-Path expression.
Note:?
Error ex:
CSS Selector:?
Syntax: Html tag [Property name = ‘Property Value’]
Ex:
<html>
?????<body>
UN: <input type =?text? ><br>
PW: <input type =?Password?>
?????</body>
</html>
partialLinkText() as those not supported for the password filed. We can’t use the
id() , name() , class Name(), as it not given by the developer , we can’t use
tagName() as it is duplicate. In such scenario we can use the
css Selector.
CSS (Cascaded style sheet) with following syntax.
Html tag [property =?value?]
Ex:?
Input [type =’text’]
Input [type =’password’]
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class cssselectorexpression?
{
public static void main(String[] args)?
{
WebDriver driver = new FirefoxDriver ();
driver.get ("file:///C:/selenium/HTMLfiles/cssselectorex.html") ;
driver.findElement(By.cssSelector ("input[type='text']")).sendKeys("Pramod");
driver.findElement(By.cssSelector("input[type='password']")).sendKeys("Anagha");
driver.close();
}
}
Note:?
Ex:?
Input [id=’username’]
Input [class=’text Field’]
Input [name=’username’]
Input [placeholder=’username’]
1) What are the attributes supported by the locator
Ans: -Id (),name(), class().
2) Then how to use other attribute to identify the elements
Ans: We can use CSS Selector () and x path
Ex:?
<html>
?????????<body>
FN:<input type=?text?><br>
LN:<input type =?text?>
?????????</body>
</html>
Note:
?
Fire Bug:
What is Firebug?
Installing the fir-bug:
To install Firebug on Firefox, we will follow these steps:
Step 1: Open Firefox browser and go to?https://addons.mozilla.org.
Step 2: In the search box of the site, type Firebug and hit?Enter?or click on the?Search for add-ons?button.
Step 3: In the search results, click on?Add to Firefox?button.
Step 4: A pop up will appear asking whether we want to continue with the installation. We will now click?Install now.
Step 5: After installation is complete, let's restart Firefox.
Note:?
Sample code to login to acti-time:
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class ActiTimeLogin?
{
public static void main(String[] args)?
{
WebDriver driver = new FirefoxDriver();
// Go to login page of acti time
driver.get("https://demo.actitime.com/");
// Enter user name
// Enter password
// click on login button
// close the browser
driver.close();
}
}
?
Dynamic element:
X-Path:
Note: Originally x-path is the path of an element present in the xml tree.
//: - go to entire html source code.
/: - go to child.
[]: - represent back end attribute for the web element/ go to parent.
@: - attribute symbol.
*:- match any html tag
.. (Two double dots): - go to parent.?
Note:?
?
Steps To Install Fire-Path Add-On In Firefox Browser
Follow the steps given bellow to Install Fire path
How to verify Fire-Path Is Installed properly or not
Follow steps given bellow to verify fire path is Installed properly or not,
- You will see Fire-Path tab In Firebug window as sown In above Image. That means Fire-path Is Installed properly and you can use it.
X-path is classified into two types
Absolute X-path
Example:?
<html>
?????<body>
<div>
? <input type="text" value="+1"/>
? <input type="text" value="+2"/>
</div>
<div>
? <input type="text" value="+3"/>
? <input type="text" value="+4"/>
</div>
?????</body>
</html>
Html tree structure:
?Html-> body->
????-> input[+1]
????->input[+2]
????-> input[+3]
????->input[+4]
Example:?
Relative X-Path:
Syntax:?
//html tag [@property name = ‘property value’]
Example:?
// input [@name=’User name’]
?Note: While specifying the property value, we can use single quotes “ ‘’ ” or double quotes “” , but if we are using the double quotes means we should suppress it using the escape character (‘\’ back slash).
Example: 1. //a [@id=’a1’] and //a [@id=\”a1\”]
Case 1:?
<html>
?????<title> Qspiders </title>
?????<body>
<div>
? <h1>Welcome to Qspiders</h1>
? <input type="text" name="username"/>
? <input type="text" name="pwd"/>
? <input type="button" name="username"/>
</div>
?????</body>
</html>
X-Path:?
//input[@type=’text’ and @name=’username’]
// input[@type=’checkbox’ and @name=’username’]
Case 2: When similar object is present in UI, how to identify object.
<html>
?????<title> Qspiders </title>
?????<body>
<div class='fs'>
? <img src=''image.jpg' width=100, hight=100/>
? <input type="button" value="buy now"/>
? <input type="button" value="cancel"/>
</div>
<div class='rb'>
? <img src=''image.jpg' width=100, hight=100/>
? <input type="button" value="buy now"/>
? <input type="button" value="cancel"/>
</div>
?????</body>
</html>
X-path:
//div[@class=’fs’]/input[@value=’buy now’]?
//div[@class=’rb’]/input[@value=’buy now’]?
Note: We can use multiple attribute in one x-Path.
Example: //html tag[@attribute=’value’ and @attribute=’value’ and @attribute=’value’ and @attribute=’value’……..]
Case 3: Working with web table.
<html>
?????<title> Qspiders </title>
?????<body>
<tablename ='tab1' border='b'>
? <tbody>
? <tr>
? <td><input type = 'text'/></td>
? <td><input type = 'text'/></td>
? <td><input type = 'text'/></td>
</tr>
<br>
领英推荐
<tr>
? <td><input type = 'text'/></td>
? <td><input type = 'text'/></td>
? <td><input type = 'text'/></td>
</tr>
? ? </tbody>
? ? </table>
?????</body>
</html>
// The table will be created like below, Now if you want to identify element in this table,?
-The x-path will be like before
X-path: //tr[1]/td[2]/input[@type=’text’]
Assignment:?
Case 4: working with the multiple static web tables in UI.
X-path:?
//table[@name=’tab1’]/tbody/tr[1]/td[2]/input[@type=’text’]
//table[@name=’tab2’]/tbody/tr[1]/td[2]/input[@type=’text’]
//table[@name=’tab2’]/tbody/tr[2]/td[1]/input[@type=’text’]
Case 5: working with dynamic web table.
???Content of the web table is chasing dynamically is called dynamic web table.
Example: Inbox table in g-mail, the content will be keeping on changing.
Html structure will be like as below.
//tr[td[a[@href=’https://msg1.com’]]]/td[1]/input[@type=’checkbox’]
<html>
?????<body>
<title> Qspiders </title>
<table>
<tbody>
? ? <tr>
<td><input type='checkbox'/></td>
<td><a >msg1</a></td>
? ? </tr>
? ? <tr>
<td><input type='checkbox'/></td>
<td><a >msg2</a></td>
? ? </tr>
? ? <tr>
<td><input type='checkbox'/></td>
<td><a >msg3</a></td>
? ? </tr>
? ? <tr>
<td><input type='checkbox'/></td>
<td><a >msg4</a></td>
? ? </tr>
? ? <tr>
<td><input type='checkbox'/></td>
<td><a >msg5</a></td>
? ? </tr>
</table>
</tbody>
?????</body></html>
The UI will look as below
Now, consider I want to select the check box of msg2, but in this check box and the msg2 link are different web element, in the above case I want to select one web element based on another web element.
In the above case, the check box element is depending on the another web element msg2,In this cases we always go for creating the dependencies between the web element using the x-path.
Following are the steps to work with dynamic web table.
The element which is identified with respect to some other element is called as dependent element.
In order to identify the dependent element we follow below mentioned steps.
Step 1: Identify dependent and independent element,
Example: in the above UI, select the check box of msg2, in this example, checkbox is dependent and Msg2 is independent.
Step 2: Inspect the independent element.
Example: Right click on the msg2 link and select inspect with firebug
Step 3: Find the common parent and note down the tree structure, which should contain independent, common parent and dependent element.
Example: Place the mouse pointer on the source code of independent element, which will highlight the independent element in the application/UI, then move the mouse pointer in the up-word direction in the html tree till both independent and dependent elements are highlighted. (It will a common parent) and note down the tree structure
Now, consider I want to select the check box of msg2, but in this check box and the msg2 link are different web element, in the above case I want to select one web element based on another web element.
In the above case, the check box element is depending on the another web element msg2,In this cases we always go for creating the dependencies between the web element using the x-path.
Following are the steps to work with dynamic web table.
The element which is identified with respect to some other element is called as dependent element.
In order to identify the dependent element we follow below mentioned steps.
Step 1: Identify dependent and independent element,
Example: in the above UI, select the check box of msg2, in this example, checkbox is dependent and Msg2 is independent.
Step 2: Inspect the independent element.
Example: Right click on the msg2 link and select inspect with firebug
Step 3: Find the common parent and note down the tree structure, which should contain independent, common parent and dependent element.
Example: Place the mouse pointer on the source code of independent element, which will highlight the independent element in the application/UI, then move the mouse pointer in the up-word direction in the html tree till both independent and dependent elements are highlighted. (It will a common parent) and note down the tree structure.
Step 4: derive the x-path for independent element
Example: //a[@]
Step 5: Using the above x-path, derive the x-path for common parent
Example: //tr[td[a[@]]]?
Note: In the above x-path we are using a [] for navigating back to its parent
??[] used to provide the backend attribute for the web element/ go to parent.
Step6: Using the above x-path derive the x-path for dependent element.
Example: //tr[td[a[@]
Note:?
Write a script to select the msg2 checkbox
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
public class DynamicTable?
{
public static void main(String[] args)
{
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.navigate().to("file:///C:/Users/HP/Desktop/dynamic.html");
WebElement ele = driver.findElement(By.xpath("https://tr[td[a[@href='https://msg2.com']]]/td[1]/input[@type='checkbox']"));
if(ele.isDisplayed())
{
System.out.println("Element is present");
ele.click();
if(ele.isSelected())
{
System.out.println("Checkbox is selected...");
}
else
{
System.out.println("Checkbox is not selected...");
}
}
else
{
System.out.println("Element is not displyed");
}
driver.close();
}
}
Output:
Element is present
Checkbox is selected...
If you look in to the x-path we have written,
//tr[td[a[@]
It just looks like an absolute x-path from parent node,?
And typically in the real time application the position of a web element will also be keep on changing, in that case, the above x-path may fail sometime, coz we are traversing to parent by depending on the parent name, if that got changed means, our x-path will fail, to overcome this instead of using ‘[]’ we use ’ ..’ operator, this will also works same as ‘[]’ i.e it will also go to the immediate parent.
But, advantage of ‘..’ operator is that, even if the name of the parent got changed also it will navigate to its immediate parent, as it is not depending on the name of the parent.
Now, if we write our previous x-path using ‘..’ operator, it looks like below.
//a[@]
Note:?
Assignment:
X-Path Functions:
Text () function:
Syntax: text()=’expected value’
? In x-path we use text() like this: //htmltag[text()=’expected value’]
Example:?
<html>
?????<title> Qspiders </title>
?????<body>
<h1>Qspiders <h1>
<h1 class='sub header'> Welcome to Basavavadi Qspiders </h1>
<img src='imag3.png' width='100' height='100'/>
<a >Qspiders</a>
<input type='button' value='Click'/>
?????</body>
</html>
Example 2: Consider an example of Gmail, will try to identify the ‘create new user’ hyper link using the text function.
//a[text()=’create an account’]
Drawback of text () function:
Ex: //a[text()=’create an’]
Example: <a href=”http:gmail.com”>Gmail</a>
Example:?
<html>
?????<title> Qspiders </title>
?????<body>
<h1>Qspiders <h1>
<h1>Welcome to <h1>
<h1>Banasavadi Qspiders<h1>
<input type='button' value='Qspiders'</a>
<div class='gmail'/>
<a >Gmail</a>
</div>
<div class='Yahoo'/>
<a >Yahoo</a>
</div>
?????</body>
</html>
X-path: //div[@class=’gmail’]/a[@href=’https://www.gmail.com’]
Or
//div[@class=’gmail’]/a[text()=’Gmail’]
Normalize-Space function:
Syntax:
normalize-space ( [string] )
?? Example:
normalize-space(text()/@attribute)
How to use in x-path:
Example:?
//htmltag[normalize-space(text()/@attribute)=’expected value’]
//h1[normalize-space(text())=’Welcome’]
//a[normalize-space(text())=’yahoo’]
//a[normalize-space(@value)=’qspiders’]
Gmail application:
X-path:?
//h1[normalize-space(text())=’one account all of google’]
//a[normalize-space(text())=’Create account’]
//a[normalize-space(@value)=’login’]
//input[@type=’button’ and normalize-space(@value)=’login’]
Contains function:
Syntax:
??? Contains(text()/@attribute,’expected value’)
How to use in X-path:
//htmltag[contains(text()/@attribute,’expected value’)]
Example:?
By Text:
//a[contains(text(),’Create’)]
//a[contains(text(),’an’)]
//a[contains(text(),’an account’)]
By Attribute
//a[contains(@id,’signup’)]
//a[contains(@id,’link-signup’)]
//a[contains(@id,’link)]
Note:
Following-Sibling function
Syntax:?
/following-sibling::
How to use in x-path:
//htmltag/following-sibling::htmltag
Example:
//img[@src=’image2.png’]/following-sibling::input[1]
Note:
//img[@src=’image2.png’]/following-sibling::input[@value=’Cancel’]
Preceding sibling function:
Syntax:
?????/prceding-sibling::
How to use in x-path:
//htmltag/preceding-sibling::htmltag
Example:
<td>
<div class="btn-group">
<button class="btn btn btn-danger block" title="Warning, Delete" name="delete" type="button">
<button class="btn btn btn-default block" title="View History" name="history" type="button">
<button class="btn btn btn-default block" title="View Settings" name="settings" type="button">
<button class="btn btn btn-default block" name="device" type="button">
<span class="glyphicon glyphicon-pencil"/>
?Arcade Reader
</button>
</div>
</td>
X-path:
//button[contains(.,’’Arcade reader’)]/../preceding-sibling::button[@name=’settings’]?
Product Owner: QAeverest.ai, FindMYLocator | QA Consultant | Automation tester | Framework Architect
1 年To get a unique locator with just by single click use "FindMyLocator" https://chromewebstore.google.com/detail/find-my-locator/dcbgkkkekedfhfkopmcpgekglckkgmgj?hl=en