To create a webpage we need to use tagname <html> and to create a component or
element we need to use tagname <input>
To create a listbox we use <select> tag
To create a link we use <a> tag (anchor)
To create a web table we use <table> tag
1. Tag Name - Any keyword which is present after < symbol is known as tagname.
E.g. <html> <body> <input>
2. Attribute – Any keyword which is present after tagname with = symbol. E.g. type
= ‘text’ value = ‘Login’ (type : attribute name & ‘text’ : attribute value)
3. Text - Any keyword which is present (><) in between greater than symbol (>) &
less than symbol (<). E.g. link1, India, Aus
<html>
<body>
UN<input type = ‘text’ id = ‘abc’> </br>
PWD<input type = ‘password’ id = ‘456’> </br>
<a href = ‘url’> Link1 </a>
<input type = ‘Button’ value = ‘Login’> </br>
</body>
</html>
Locators :
1. Locators are used to identify an element present in a webpage with the help of
locator types.
2. To identify an element present in a webpage we need to use findElement()
method which is present in WebDriver interface.
3. findElement() method will identify an element with the help of “By” class which
contains static methods.
4. All the static methods present in a By class are known as locator types.
There are different types of locators:
1. ID
2. Class
3. Name
4. Tagname
5. Linked Text
6. Partial Linked Text
7. CSS Selector
8. X-path
Xpath :
WebDriver driver = new ChromeDriver();
driver.get(“url”);
driver.findElement(By.xpath(“xpath_expression”)).sendkeys(“abc”);
Types of xpath :
1. xpath by attribute
Syntax :
//tagname[@attribute name = ‘attribute value’]
e.g. :- //input[@id = ‘abc’], //input[@id='autocomplete']
driver.findElement(By.xpath(“//input[@id = ‘abc’]”).click();
2. xpath by text
Syntax :
//tagname[text() = ‘textvalue’]
e.g. :- //a[text() = ‘link1’]
3. xpath by contains()
a. Here we can mention the substring without writing a whole text, when
link/text is big in size.
b. If any non-breakable space (nbsp) is there.
We can use contains in two ways :
I. Contains with text() :
//tagname[contains(text(),’textvalue’)]
//h2[text()='Facebook helps you connect and share with the people in
your life.']→ normal text method
//h2[contains(text(),'Facebook ')]→using contains text
//a[contains(text(),‘link1’)]
II. Contains with attribute :
//tagname[contains(@attribute name, ‘attribute value’)]
//input[contains(@name,‘first’)], //img[contains(@alt,'gle')]
4. xpath by index
(//tagname[@attribute name = ‘attribute value’] )[2]
(//input[@type = ‘text’] )[2]
(//input[@name='radio'])[2]
(//h1[contains(text(),'Practice Page')])[1]
5. Absolute and Relative xpath
html/body/div[2]/input[1]
//div[2]/input[1]
Root→ html/body/ div[1]/ input[1]→absolute
// div[1]/input[1]→ relative xpath
/html/body/div[2]/input[1]-→//div[2]/input[1]
HTML Tree Diagram
html
body
div[1]
input[1] – URL
input[2] – PWD
div[2]
input[1] – male
input[2] – female
div[3]
a[1] – link1
a[2] – link2
input – submit
<html>
<body>
<div>
UN<input type = ‘text’>
PWD<input type = ‘password’>
</div>
<div>
male<input type = ‘radio’>
female<input type = ‘radio’>
</div>
<div>
<a href = ‘_’> link1
<a href = ‘_’> link2
<button type = ‘submit’ value = ‘login’>
</div>
</body>
</html>
Absolute Relative
/html/body/div[3]/a[1] //div[3]//a[1]
/html/body/div[3]/input //div[3]//input or input[5]
/html/body/div[2]/input[2] //div[2]//a[2] or input[4]
Disadvantages of Absolute xpath
1. Absolute xpath is too lengthy and time consuming.
2. Identifying an element by developing html tree diagram is difficult.
Absolute xpath
Absolute xpath is used to navigate from root of parent to its immediate
child. To achieve absolute xpath, we need to use ‘/’.
/html/body/div[2]/input[1]
Relative xpath
Relative xpath is used to navigate from parent to any child. To achieve
relative xpath, we need to use ‘//’.
//div[2]//input[1]
html/body/section/div[1]/div[1]
//section[2]//div//div
