Skip to content
On this page

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
Field Selector Address

Basic Query

ElementHTMLSelector QueryXPath
<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"]
<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

MethodsExamples
Contains()
ElementHTMLXPath
<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
ElementHTMLXPath
<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)
ElementHTMLXPath
<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")]

Released under the MIT License.