Skip to content

Locate Element

To automate data filling, element clicks, or scraping tasks, Excellent Data Filler requires precise DOM element addresses to identify target inputs, buttons, dropdowns, and text containers on a web page.

There are three primary methods used to locate any element on a webpage:

  1. Element ID: The fastest and most direct locator when elements have unique, static HTML id attributes (e.g., #full_name).
  2. CSS Selector Query: Versatile pattern matching based on HTML tags, class names, and attribute combinations (e.g., input.form-control[name="email"]).
  3. XPath Address: Advanced XML path query language supporting bidirectional DOM traversal, text content matching, ancestor/child axes, and attribute negation (e.g., //input[@name="email"], //button[contains(text(),"Submit")]).

Inspect Elements with One Click

You don't need to manually inspect or construct element selectors by hand. Use the built-in Inspect Elements Inspect Elements Tool (Alt + Shift + I) or right-click any page element (Alt + Shift + C for Selector, Alt + Shift + X for XPath) to automatically detect, test, and copy unique element addresses in real time.


Basic Query Reference

Common CSS selector queries and equivalent XPath addresses for standard HTML input elements:

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]

Advanced XPath Reference

Advanced XPath functions including contains(), starts-with(), boolean operators (and / or), DOM axis traversal (parent::*, position()), text matching, and attribute negation not():

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")]
parent, position
XPathDescription
//td[text() =' SHG']/parent::*/td[position()=6]/a
Find a td element with text "SHG", navigate to its parent, then select the 6th td child and get the anchor tag
Text Matching with OR
XPathDescription
//*[contains(text(),'Partial Text 1') or contains(text(),'Partial Text 2')]
Match elements containing either "Partial Text 1" or "Partial Text 2"
//*[text()='Exact Text 1' or text()='Exact Text 2']
Match elements with exact text "Exact Text 1" or "Exact Text 2"
//*[text()='Exact Text' or contains(text(),'Partial Text')]
Match elements with exact text "Exact Text" or containing "Partial Text"
not(@attribute)
ElementHTMLXPath
<input type="text" placeholder="Active input">
<input type="text" disabled placeholder="Disabled input">
//input[not(@disabled)]
//input[not(@readonly)]
//tag_name[not(@attribute_name)]
//button[not(@disabled) and contains(text(),"Submit")]
Active Box
<div class="card active">Active Box</div>
<div class="card hidden">Hidden Box</div>
//div[not(contains(@class,"hidden"))]
//div[not(@id)]
//div[@class="card"][not(contains(@class,"hidden"))]