Locate Element

How to locate any element on page?

There are three ways to locate any element on any web page.

1. Using Element ID
2. Using Element Selector Query
3. Using Element XPath Address

Basic Query

Element	HTML	Selector Query	XPath
	<input type="text"> <input type="email">	input[type='text'] input[type='email']	//input[@type="text"] //input[@type="email"]
	<input name="full_name">	input[name='full_name']	//input[@name="full_name"]
	<input id="full_name">	input[id='full_name'] input#full_name	//input[@id="full_name"]
	<input aria-describedby="full_name">	input[aria-describedby='full_name']	//input[@aria-describedby="full_name"]
	<input placeholder="Full Name">	input[placeholder='Full Name']	//input[@placeholder="Full Name"]
	<input readonly>	input[readonly]	//input[@readonly]
	<input disabled>	input[disabled]	//input[@disabled]
	<input type="text" class="input invalid">	input.invalid input[class='input invalid'] input[class*='invalid']	//input[@class='input invalid'] //input[contains(@class,"invalid")]
link	<a href="#" target="_blank">link</a>	a[href] a[href="#"] a[target="_blank"]	//a[@href] //a[@href="#"] //a[@target="_blank"] //a[text()="link"]
Male Female Other	<input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="other"> Other	input[type='radio'] input[name="gender"] input[value="other"] input[name="gender"][value="other"]	//input[@type="radio"] //input[@name="gender"] //input[@value="other"] //input[@name="gender"][@value="male"]
I have a debit card I have a credit card Other	<input type="checkbox" name="card1" value="debit" checked> I have a debit card <input type="checkbox" name="card2" value="credit"> I have a credit card <input type="checkbox" name="card3" value="other"> Other	input[type='checkbox'] input[name="card1"] input[value="credit"]	//input[@type="checkbox"] //input[@name="card1"] //input[@value="credit"]
Option 1Option 2Option 3Option 4	<select name="options">   <option value="op1">Option 1</option>   <option value="op2">Option 2</option>   <option value="op3">Option 3</option>   <option value="op4">Option 4</option> </select>	select[name='options']	//select[@name='options'] //select[@name="options"]/option[2] //select[@name="options"]/option[text()="Option 3"] //select[@name="options"]/option[contains(@value,"op4")]
	<textarea name="address" rows="2" cols="20"></textarea>	textarea[name='address']	//textarea[@name='address'] //textarea[@rows="2"] //textarea[@cols="20"]
	<input type="submit" value="Submit">	input[type='submit'] input[value='Submit']	//input[@type='submit'] //input[@value='Submit']
	<button type="button" alert onclick="alert('Alert Message')">Alert Dialog</button>	button[type='button'] button[onclick] button[alert]	//button[@type='button'] //button[@onclick] //button[@alert]
	<button type="button" confirm onclick="confirm('Confirm Message')">Confirm Dialog</button>	button[type='button'] button[onclick] button[confirm]	//button[@type='button'] //button[@onclick] //button[@confirm]
	<button type="button" id="prompt" prompt onclick="prompt('Please enter you age:')">Prompt Dialog</button>	button[type='button'] button[id='prompt'] button[prompt]	//button[@type='button'] //button[@id='prompt'] //button[@prompt]

Advance XPath

Methods	Examples
Contains()	Element HTML XPath <input type="submit"> //input[contains(@type,"submit")] //input[contains(@type,"sub")] //*[contains(@type,"mit")] <button type="button" name="btn-login">Login</button> //button[contains(@name,"btn")] //button[contains(text(),"Log")] //*[contains(@type,"button")] <input type="text" name="last-name" id="lastName" class="input invalid" placeholder="Last Name" /> //*[@class="input invalid"] //input[contains(@class,"invalid")] //input[contains(@class,"inv")]
OR & AND	Element HTML XPath EmailPassword <form class="form-login">   <label for="inputEmail">Email</label>   <input type="email" id="inputEmail" placeholder="Email" />   <label for="inputPassword">Password</label>   <input type="password" id="inputPassword" placeholder="Password" /> </form> //form/input[@type="email" or @type="password"] //form/input[@type="email" and @id="inputEmail"] //form/input[@type="email" and @id] //form[@class="form-login"]/input[@id="inputPassword"] //form[@class="form-login"]/input[1] //form[@class="form-login"]/input[2]
starts-with(@attribute,value)	Element HTML XPath <button type="button" class="btn-primary">Primary</button> <button type="button" class="btn-secondary">Secondary</button> <button type="button" class="btn-success">Success</button> //button[starts-with(@class,"btn")] //button[starts-with(@type,"but")]
parent, position	XPath //td[text() =' SHG']/parent::*/td[position()=6]/a