2020-12-20 21:18:50 +08:00
|
|
|
---
|
|
|
|
|
title: XPath
|
|
|
|
|
date: 2020-12-19 22:15:43
|
2021-12-15 10:48:31 +08:00
|
|
|
background: bg-[#77aeeb]
|
2020-12-20 21:18:50 +08:00
|
|
|
tags:
|
2024-05-22 03:30:58 -07:00
|
|
|
- document
|
|
|
|
|
- expression
|
|
|
|
|
- select
|
2020-12-20 21:18:50 +08:00
|
|
|
categories:
|
2024-05-22 03:30:58 -07:00
|
|
|
- Toolkit
|
2020-12-20 21:18:50 +08:00
|
|
|
intro: |
|
2024-05-22 03:30:58 -07:00
|
|
|
This is an [XPath](https://en.wikipedia.org/wiki/XPath) selectors cheat sheet, which lists commonly used XPath positioning methods and CSS selectors
|
2023-03-06 16:19:19 +08:00
|
|
|
plugins:
|
2024-05-22 03:30:58 -07:00
|
|
|
- copyCode
|
2020-12-20 21:18:50 +08:00
|
|
|
---
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath Selectors {.cols-6}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
### Getting started {.col-span-2}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
- [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_
|
|
|
|
|
|
2025-05-09 22:23:54 -04:00
|
|
|
Test in Firefox or Chromium based browser console:
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
```console
|
|
|
|
|
$x('/html/body')
|
|
|
|
|
$x('//h1')
|
|
|
|
|
$x('//h1')[0].innerText
|
|
|
|
|
$x('//a[text()="XPath"]')[0].click()
|
2020-12-20 21:18:50 +08:00
|
|
|
```
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
### Descendant selectors {.col-span-2}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ------------ | ------------ |
|
2021-09-14 13:03:55 +08:00
|
|
|
| `//h1` | h1 |
|
|
|
|
|
| `//div//p` | div p |
|
|
|
|
|
| `//ul/li` | ul > li |
|
|
|
|
|
| `//ul/li/a` | ul > li > a |
|
2024-05-22 03:30:58 -07:00
|
|
|
| `//div/*` | div > \* |
|
2021-09-14 13:03:55 +08:00
|
|
|
| `/` | :root |
|
|
|
|
|
| `/html/body` | :root > body |
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
### Order selectors {.col-span-2}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ------------------- | -------------------- |
|
2021-01-08 16:38:44 +08:00
|
|
|
| `//ul/li[1]` | ul > li:first-child |
|
|
|
|
|
| `//ul/li[2]` | ul > li:nth-child(2) |
|
|
|
|
|
| `//ul/li[last()]` | ul > li:last-child |
|
|
|
|
|
| `//li[@id="id"][1]` | li#id:first-child |
|
|
|
|
|
| `//a[1]` | a:first-child |
|
|
|
|
|
| `//a[last()]` | a:last-child |
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
|
|
|
|
### Attribute selectors {.col-span-3 .row-span-2}
|
|
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ------------------------------- | -------------------- |
|
2021-09-14 13:03:55 +08:00
|
|
|
| `//*[@id="id"]` | #id |
|
|
|
|
|
| `//*[@class="class"]` | .class |
|
|
|
|
|
| `//input[@type="submit"]` | input[type="submit"] |
|
|
|
|
|
| `//a[@id="abc"][@for="xyz"]` | a#abc[for="xyz"] |
|
|
|
|
|
| `//a[@rel]` | a[rel] |
|
|
|
|
|
| `//a[starts-with(@href, '/')]` | a[href^='/'] |
|
|
|
|
|
| `//a[ends-with(@href, '.pdf')]` | a[href$='pdf'] |
|
|
|
|
|
| `//a[contains(@href, '://')]` | a[href*='`:`//'] |
|
|
|
|
|
| `//a[contains(@rel, 'help')]` | a[rel~='help'] |
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
{.show-header}
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
### Siblings {.col-span-3}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ------------------------------------ | -------- |
|
2021-01-08 16:38:44 +08:00
|
|
|
| `//h1/following-sibling::ul` | h1 ~ ul |
|
|
|
|
|
| `//h1/following-sibling::ul[1]` | h1 + ul |
|
|
|
|
|
| `//h1/following-sibling::[@id="id"]` | h1 ~ #id |
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
|
|
|
|
### jQuery {.col-span-3}
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| -------------------------------- | -------------------------- |
|
2021-01-08 16:38:44 +08:00
|
|
|
| `//ul/li/..` | $('ul > li').parent() |
|
|
|
|
|
| `//li/ancestor-or-self::section` | $('li').closest('section') |
|
|
|
|
|
| `//a/@href` | $('a').attr('href') |
|
|
|
|
|
| `//span/text()` | $('span').text() |
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
{.show-header}
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
### Misc selectors {.col-span-3}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2021-09-14 13:03:55 +08:00
|
|
|
| Xpath | CSS |
|
2024-05-22 03:30:58 -07:00
|
|
|
| --------------------------------- | ------------------------- | --------------------- |
|
2021-09-14 13:03:55 +08:00
|
|
|
| `//h1[not(@id)]` | h1:not([id]) |
|
|
|
|
|
| `//button[text()="Submit"]` | Text match |
|
|
|
|
|
| `//button[contains(text(),"Go")]` | Text contains (substring) |
|
|
|
|
|
| `//product[@price > 2.50]` | Arithmetic |
|
|
|
|
|
| `//ul[*]` | Has children |
|
|
|
|
|
| `//ul[li]` | Has children (specific) |
|
|
|
|
|
| `//a[@name or @href]` | Or logic |
|
2024-05-22 03:30:58 -07:00
|
|
|
| `//a | //div` | Union (joins results) |
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath Expressions
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
### Steps and axes {.secondary}
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
<br/>
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
| - | - | - | - |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ---- | ---- | ---- | --------------- |
|
2020-12-20 21:18:50 +08:00
|
|
|
| `//` | `ul` | `/` | `a[@id='link']` |
|
|
|
|
|
| Axis | Step | Axis | Step |
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.left-text}
|
2021-01-08 16:38:44 +08:00
|
|
|
|
2020-12-20 21:18:50 +08:00
|
|
|
### Prefixes
|
|
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
| Prefix | Example | Means |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ------ | --------------------- | -------- |
|
2020-12-20 21:18:50 +08:00
|
|
|
| `//` | `//hr[@class='edge']` | Anywhere |
|
|
|
|
|
| `/` | `/html/body/div` | Root |
|
2021-01-08 16:38:44 +08:00
|
|
|
| `./` | `./div/p` | Relative |
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Axes
|
|
|
|
|
|
2021-01-08 16:38:44 +08:00
|
|
|
| Axis | Example | Means |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ---- | ------------------- | ---------- |
|
2020-12-20 21:18:50 +08:00
|
|
|
| `/` | `//ul/li/a` | Child |
|
|
|
|
|
| `//` | `//[@id="list"]//a` | Descendant |
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
{.show-header}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath Predicates
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Predicates
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//div[true()]
|
|
|
|
|
//div[@class="head"]
|
|
|
|
|
//div[@class="head"][@id="top"]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Restricts a nodeset only if some condition is true. They can be chained.
|
|
|
|
|
|
|
|
|
|
### Operators
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# Comparison
|
|
|
|
|
//a[@id = "xyz"]
|
|
|
|
|
//a[@id != "xyz"]
|
|
|
|
|
//a[@price > 25]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# Logic (and/or)
|
|
|
|
|
//div[@id="head" and position()=2]
|
|
|
|
|
//div[(x and y) or not(z)]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Using nodes
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# Use them inside functions
|
|
|
|
|
//ul[count(li) > 2]
|
|
|
|
|
//ul[count(li[@class='hide']) > 0]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# Returns `<ul>` that has a `<li>` child
|
|
|
|
|
//ul[li]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
You can use nodes inside predicates.
|
|
|
|
|
|
|
|
|
|
### Indexing
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//a[1] # first <a>
|
|
|
|
|
//a[last()] # last <a>
|
|
|
|
|
//ol/li[2] # second <li>
|
|
|
|
|
//ol/li[position()=2] # same as above
|
2021-01-08 16:38:44 +08:00
|
|
|
//ol/li[position()>1] #:not(:first-child)
|
2020-12-20 21:18:50 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Use `[]` with a number, or `last()` or `position()`.
|
|
|
|
|
|
|
|
|
|
### Chaining order
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
a[1][@href='/']
|
|
|
|
|
a[@href='/'][1]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Order is significant, these two are different.
|
|
|
|
|
|
|
|
|
|
### Nesting predicates
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
//section[.//h1[@id='hi']]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
This returns `<section>` if it has an `<h1>` descendant with `id='hi'`.
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath Functions {.cols-2}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Node functions
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
name() # //[starts-with(name(), 'h')]
|
|
|
|
|
text() # //button[text()="Submit"]
|
|
|
|
|
# //button/text()
|
|
|
|
|
lang(str)
|
|
|
|
|
namespace-uri()
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
count() # //table[count(tr)=1]
|
|
|
|
|
position() # //ol/li[position()=2]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### String functions
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
contains() # font[contains(@class,"head")]
|
|
|
|
|
starts-with() # font[starts-with(@class,"head")]
|
|
|
|
|
ends-with() # font[ends-with(@class,"head")]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
concat(x,y)
|
|
|
|
|
substring(str, start, len)
|
|
|
|
|
substring-before("01/02", "/") #=> 01
|
|
|
|
|
substring-after("01/02", "/") #=> 02
|
|
|
|
|
translate()
|
|
|
|
|
normalize-space()
|
|
|
|
|
string-length()
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Boolean functions
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
not(expr) # button[not(starts-with(text(),"Submit"))]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Type conversion
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
string()
|
|
|
|
|
number()
|
|
|
|
|
boolean()
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath Axes {.cols-2}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Using axes
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//ul/li # ul > li
|
|
|
|
|
//ul/child::li # ul > li (same)
|
|
|
|
|
//ul/following-sibling::li # ul ~ li
|
|
|
|
|
//ul/descendant-or-self::li # ul li
|
|
|
|
|
//ul/ancestor-or-self::li # $('ul').closest('li')
|
|
|
|
|
```
|
2024-05-22 03:30:58 -07:00
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2020-12-20 21:18:50 +08:00
|
|
|
| | | | |
|
2024-05-22 03:30:58 -07:00
|
|
|
| ---- | ---- | ---------- | ---- |
|
2020-12-20 21:18:50 +08:00
|
|
|
| `//` | `ul` | `/child::` | `li` |
|
|
|
|
|
| Axis | Step | Axis | Step |
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2020-12-20 21:18:50 +08:00
|
|
|
{.left-text}
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
Steps of an expression are separated by `/`, usually used to pick child nodes. That's not always true: you can specify a
|
|
|
|
|
different "axis" with `::`.
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Child axis
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# both the same
|
|
|
|
|
//ul/li/a
|
|
|
|
|
//child::ul/child::li/child::a
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`child::` is the default axis. This makes `//a/b/c` work.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# both the same
|
2024-05-22 03:30:58 -07:00
|
|
|
# this works because `child::li` is truthy
|
2020-12-20 21:18:50 +08:00
|
|
|
//ul[li]
|
|
|
|
|
//ul[child::li]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# both the same
|
|
|
|
|
//ul[count(li) > 2]
|
|
|
|
|
//ul[count(child::li) > 2]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Descendant-or-self axis
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# both the same
|
|
|
|
|
//div//h4
|
|
|
|
|
//div/descendant-or-self::h4
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
`//` is short for the `descendant-or-self::` axis.
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# both the same
|
|
|
|
|
//ul//[last()]
|
|
|
|
|
//ul/descendant-or-self::[last()]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Other axes {.row-span-2}
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
| Axis | Abbrev | Notes |
|
|
|
|
|
| -------------------- | ------ | ------------------------------------------------ |
|
|
|
|
|
| `ancestor` | | |
|
|
|
|
|
| `ancestor-or-self` | | |
|
2020-12-20 21:18:50 +08:00
|
|
|
| `attribute` | `@` | `@href` is short for `attribute::href` |
|
|
|
|
|
| `child` | | `div` is short for `child::div` |
|
|
|
|
|
| `descendant` | | |
|
|
|
|
|
| `descendant-or-self` | `//` | `//` is short for `/descendant-or-self::node()/` |
|
|
|
|
|
| `namespace` | | |
|
|
|
|
|
| `self` | `.` | `.` is short for `self::node()` |
|
|
|
|
|
| `parent` | `..` | `..` is short for `parent::node()` |
|
|
|
|
|
| `following` | | |
|
|
|
|
|
| `following-sibling` | | |
|
|
|
|
|
| `preceding` | | |
|
|
|
|
|
| `preceding-sibling` | | |
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2020-12-20 21:18:50 +08:00
|
|
|
{.headers}
|
|
|
|
|
|
|
|
|
|
There are other axes you can use.
|
|
|
|
|
|
|
|
|
|
### Unions
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//a | //span
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Use `|` to join two expressions.
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## XPath More examples {.cols-2}
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Examples
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//* # all elements
|
|
|
|
|
count(//*) # count all elements
|
|
|
|
|
(//h1)[1]/text() # text of the first h1 heading
|
|
|
|
|
//li[span] # find a <li> with an <span> inside it
|
|
|
|
|
# ...expands to //li[child::span]
|
|
|
|
|
//ul/li/.. # use .. to select a parent
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### Find a parent
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//section[h1[@id='section-name']]
|
|
|
|
|
```
|
2024-05-22 03:30:58 -07:00
|
|
|
|
2020-12-20 21:18:50 +08:00
|
|
|
Finds a `<section>` that directly contains `h1#section-name`
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//section[//h1[@id='section-name']]
|
|
|
|
|
```
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
Finds a `<section>` that contains `h1#section-name`. (Same as above, but uses descendant-or-self instead of child)
|
2020-12-20 21:18:50 +08:00
|
|
|
|
|
|
|
|
### Closest
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
./ancestor-or-self::[@class="box"]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Works like jQuery's `$().closest('.box')`.
|
|
|
|
|
|
|
|
|
|
### Attributes
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
//item[@price > 2*@discount]
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Finds `<item>` and check its attributes
|
|
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
## Also see
|
2020-12-20 21:18:50 +08:00
|
|
|
|
2024-05-22 03:30:58 -07:00
|
|
|
- [Devhints](https://devhints.io/xpath) _(devhints.io)_
|
|
|
|
|
- [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_
|
