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:
- Element ID: The fastest and most direct locator when elements have unique, static HTML
idattributes (e.g.,#full_name). - CSS Selector Query: Versatile pattern matching based on HTML tags, class names, and attribute combinations (e.g.,
input.form-control[name="email"]). - 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 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:
| 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"] |
<select name="options"> | 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():
| Methods | Examples | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Contains() |
| ||||||||||||
OR & AND |
| ||||||||||||
starts-with(@attribute,value) |
| ||||||||||||
parent, position |
| ||||||||||||
Text Matching with OR |
| ||||||||||||
not(@attribute) |
|