# curl https://devtools.krishanchawla.com/raw/complete-xpath-cheatsheet.txt

COMPLETE XPATH CHEATSHEET
Complete generic XPath reference with real-world patterns and examples for locating elements in HTML and XML

Category: Web · Type: cheatsheet
Official docs: https://www.w3.org/TR/xpath/

────────────────────────────────────────────────────────────

## What is XPath?

**XPath (XML Path Language)** is a query language used to locate and navigate elements within HTML and XML documents. It allows precise element selection using tags, attributes, text, and DOM relationships.

**⚡ Key Features**
- DOM traversal
- Attribute and text matching
- Axis-based navigation
- Tool and language agnostic

**🎯 Use Cases**
- UI automation
- Web scraping
- DOM inspection
- Dynamic element identification

---

## 📍 XPath - Absolute Path

Select element using full DOM hierarchy.

XPath:
```plaintext
/html/body/div/form/input
```

Example (HTML):
```html
<form>
  <input />
</form>
```

Avoid in real projects due to fragility.

## 🎯 XPath - Relative Path

Select element anywhere in the document.

XPath:
```plaintext
//input
```

Example (HTML):
```html
<input type="text" />
```

Recommended for maintainable locators.

## 🏷️ XPath - Select by Tag Name

Select elements by HTML tag.

XPath:
```plaintext
//button
```

Example (HTML):
```html
<button>Save</button>
```

## 🔍 XPath - Select by Attribute

Match exact attribute value.

XPath:
```plaintext
//input[@id='username']
```

Example (HTML):
```html
<input id="username" />
```

## 🔗 XPath - Multiple Attributes

Match multiple attribute conditions.

XPath:
```plaintext
//input[@type='text' and @name='email']
```

Example (HTML):
```html
<input type="text" name="email" />
```

## 🔀 XPath - OR Condition

Match any one condition.

XPath:
```plaintext
//input[@id='email' or @name='email']
```

Example (HTML):
```html
<input name="email" />
```

## 📌 XPath - contains() Attribute

Partial attribute match.

XPath:
```plaintext
//div[contains(@class,'header')]
```

Example (HTML):
```html
<div class="main-header"></div>
```

## ▶️ XPath - starts-with()

Match attribute prefix.

XPath:
```plaintext
//input[starts-with(@id,'user_')]
```

Example (HTML):
```html
<input id="user_name" />
```

## ✏️ XPath - Exact Text Match

Match exact visible text.

XPath:
```plaintext
//button[text()='Login']
```

Example (HTML):
```html
<button>Login</button>
```

## 📝 XPath - contains(text())

Match partial visible text.

XPath:
```plaintext
//span[contains(text(),'Welcome')]
```

Example (HTML):
```html
<span>Welcome John</span>
```

## 🧹 XPath - normalize-space()

Ignore extra whitespace.

XPath:
```plaintext
//button[normalize-space()='Submit']
```

Example (HTML):
```html
<button>  Submit </button>
```

## 🔢 XPath - Index Selection

Select element by position (1-based).

XPath:
```plaintext
(//input[@type='text'])[1]
```

Example (HTML):
```html
<input type="text" />
<input type="text" />
```

Use cautiously — indexes may change.

## 🔚 XPath - last() Function

Select last matching element.

XPath:
```plaintext
(//button)[last()]
```

Example (HTML):
```html
<button>Cancel</button>
<button>Save</button>
```

## ⬆️ XPath - Parent Axis

Navigate to parent element.

XPath:
```plaintext
//input[@id='email']/parent::div
```

Example (HTML):
```html
<div>
  <input id="email" />
</div>
```

## ⬇️ XPath - Child Axis

Select direct children.

XPath:
```plaintext
//ul/child::li
```

Example (HTML):
```html
<ul>
  <li>Item</li>
</ul>
```

## 🌳 XPath - Ancestor Axis

Navigate upward in DOM.

XPath:
```plaintext
//input[@id='email']/ancestor::form
```

Example (HTML):
```html
<form>
  <div>
    <input id="email" />
  </div>
</form>
```

## 🌿 XPath - Descendant Axis

Select all nested children.

XPath:
```plaintext
//form//descendant::input
```

Example (HTML):
```html
<form>
  <div>
    <input />
  </div>
</form>
```

## ➡️ XPath - Following Sibling

Select next sibling.

XPath:
```plaintext
//label[text()='Username']/following-sibling::input
```

Example (HTML):
```html
<label>Username</label>
<input />
```

## ⬅️ XPath - Preceding Sibling

Select previous sibling.

XPath:
```plaintext
//input[@id='password']/preceding-sibling::label
```

Example (HTML):
```html
<label>Password</label>
<input id="password" />
```

## 📊 XPath - Table Row Match

Select row by cell value.

XPath:
```plaintext
//tr[td[text()='John']]
```

Example (HTML):
```html
<tr>
  <td>John</td>
</tr>
```

## 🎬 XPath - Action Inside Table Row

Select element inside matched row.

XPath:
```plaintext
//tr[td[text()='John']]//button
```

Example (HTML):
```html
<tr>
  <td>John</td>
  <td><button>Edit</button></td>
</tr>
```

## ☑️ XPath - Checkbox Near Label

Locate input associated with label.

XPath:
```plaintext
//label[text()='Accept']/preceding-sibling::input
```

Example (HTML):
```html
<input type="checkbox" />
<label>Accept</label>
```

## 📦 XPath - Scoped Container Search

Search within a container.

XPath:
```plaintext
//div[@id='modal']//button[text()='Save']
```

Example (HTML):
```html
<div id="modal">
  <button>Save</button>
</div>
```

## 🎨 XPath - SVG Elements

Handle SVG elements using name().

XPath:
```plaintext
//*[name()='svg']//*[name()='path']
```

Example (HTML):
```html
<svg>
  <path />
</svg>
```

## 🐞 XPath - Debug XPath

Test XPath in browser console.

```text
$x("//input[@id='username']")
```

Always validate XPath before using it in automation or scraping.

## ⭐ XPath - Best Practices

Recommended rules:
- Prefer relative XPath
- Avoid absolute paths
- Use stable attributes
- Avoid indexes when possible
- Keep XPath short and readable

────────────────────────────────────────────────────────────

Full page: https://devtools.krishanchawla.com/devtools/complete-xpath-cheatsheet
More tools: https://devtools.krishanchawla.com