Update the xpath cheatsheet
This commit is contained in:
Rico Sta. Cruz
parent
49c950ed24
commit
657ff90fd1
|
|
@ -94,16 +94,68 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.greycode code {
|
pre {
|
||||||
|
background: #fcfcfc;
|
||||||
|
border-bottom: solid 1px #eef3fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* grey code
|
||||||
|
*/
|
||||||
|
|
||||||
|
.greycode td:first-child code,
|
||||||
|
.greycode th:first-child code {
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
padding: 5px 5px 4px 5px;
|
padding: 5px 5px 4px 5px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greycode code + em {
|
.greycode td:first-child code + em,
|
||||||
color: #aaa;
|
.greycode th:first-child code + em {
|
||||||
|
color: #808890;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.greycode a {
|
.greycode a {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
table.greycode {
|
||||||
|
width: calc(620px + 100px);
|
||||||
|
margin-left: -50px;
|
||||||
|
background: #fcfcfc;
|
||||||
|
border-radius: 4px;
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: solid 1px #eef3fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.greycode thead:first-child > tr:first-child > th,
|
||||||
|
table.greycode thead:first-child > tr:first-child > td,
|
||||||
|
table.greycode tbody:first-child > tr:first-child > th,
|
||||||
|
table.greycode tbody:first-child > tr:first-child > td {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.greycode thead > tr:first-child > th,
|
||||||
|
table.greycode thead > tr:first-child > td,
|
||||||
|
table.greycode tbody > tr:first-child > th,
|
||||||
|
table.greycode tbody > tr:first-child > td {
|
||||||
|
border-top: solid 1px #c7d7ee;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.greycode td:first-child,
|
||||||
|
table.greycode th:first-child {
|
||||||
|
padding-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.greycode td:last-child,
|
||||||
|
table.greycode th:last-child {
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
|
||||||
295
xpath.md
295
xpath.md
|
|
@ -3,47 +3,288 @@ title: Xpath
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
|
|
||||||
|
CSS equivalents
|
||||||
|
---------------
|
||||||
|
|
||||||
|
| CSS | Xpath |
|
||||||
|
| --- | --- |
|
||||||
|
| `div p` | `//div//p` |
|
||||||
|
| `ul > li` | `//ul/li` |
|
||||||
|
| `div > *` | `//div/*` |
|
||||||
|
| `h1 ~ ul` | `//h1/following-sibling::ul` |
|
||||||
|
| `h1 ~ #id` | `//h1/following-sibling::[@id="id"]` |
|
||||||
|
| --- | --- |
|
||||||
|
| `:root` | `/` |
|
||||||
|
| `:root > body` | `/body` |
|
||||||
|
| --- | --- |
|
||||||
|
| `input[type="submit"]` | `//input[@type="submit"]` |
|
||||||
|
| `a[href^='/']` | `//a[starts-with(@href, '/')]` |
|
||||||
|
| `a[href$='pdf']` | `//a[ends-with(@href, '.pdf')]` |
|
||||||
|
| --- | --- |
|
||||||
|
| `#id` | `//[@id="id"]` |
|
||||||
|
| `.class` | `//[@class="class"]` *...see below* |
|
||||||
|
| --- | --- |
|
||||||
|
| `ul > li:first-child` | `//ul/li[1]` |
|
||||||
|
| `ul > li:nth-child(2)` | `//ul/li[2]` |
|
||||||
|
| `ul > li:last-child` | `//ul/li[last()]` |
|
||||||
|
| --- | --- |
|
||||||
|
| `li#id:first-child` | `//li[@id="id"][1]` |
|
||||||
|
| --- | --- |
|
||||||
|
| `a:first-child` | `//a[1]` |
|
||||||
|
| `a:last-child` | `//a[last()]` |
|
||||||
|
| `li:first-of-type` | `//li[not(preceding-sibling::li)]` |
|
||||||
|
{:.greycode.no-head}
|
||||||
|
|
||||||
|
### Class check
|
||||||
|
Xpath doesn't have the "check if part of space-separated list" operator, so this is the workaround:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//div[contains(concat(' ',normalize-space(@class),' '),' foobar ')]
|
||||||
|
```
|
||||||
|
|
||||||
|
### jQuery equivalents
|
||||||
|
For things that CSS alone can't do.
|
||||||
|
|
||||||
|
| jQuery | Xpath |
|
||||||
|
| ------ | --- |
|
||||||
|
| `$('ul > li').parent()` | `//ul/li/..` |
|
||||||
|
| `$('li').closest('section')` | `//li/ancestor-or-self::section` |
|
||||||
|
| `$('a').attr('href')` | `//a/@href` |
|
||||||
|
| `$('span').text()` | `//span/text()` |
|
||||||
|
{:.greycode.no-head}
|
||||||
|
|
||||||
|
|
||||||
|
Expressions
|
||||||
|
-----------
|
||||||
|
|
||||||
### Prefixes
|
### Prefixes
|
||||||
|
Begin your expression with any of these.
|
||||||
|
|
||||||
// anywhere # //hr[@class='edge']
|
| Prefix | Example |
|
||||||
./ relative # ./a
|
| --- | --- |
|
||||||
/ root # /html/body/div
|
| `//` *anywhere* | `//hr[@class='edge']` |
|
||||||
|
| `./` *relative* | `./a` |
|
||||||
|
| `/` *root* | `/html/body/div` |
|
||||||
|
{:.greycode.no-head}
|
||||||
|
|
||||||
### Conditions (`[]`)
|
### Axes
|
||||||
|
Separate your steps with `/`. Use two (`//`) if you don't want direct descendants.
|
||||||
|
|
||||||
# div[@class="head"]
|
| Axis | Example |
|
||||||
# div[@class="head" and @id="top"]
|
| --- | --- |
|
||||||
|
| `/` *child* | `//ul/li/a` |
|
||||||
|
| `//` *descendant* | `//[@id="list"]//a` |
|
||||||
|
{:.greycode.no-head}
|
||||||
|
|
||||||
|
### Selecting node data
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//a #=> <a>
|
||||||
|
//a/text() #=> "Go home"
|
||||||
|
//a/@href #=> "index.html"
|
||||||
|
//a/* #=> All a's child elements
|
||||||
|
```
|
||||||
|
|
||||||
|
Predicates
|
||||||
|
----------
|
||||||
|
|
||||||
|
### Predicates (`[]`)
|
||||||
|
Restricts a nodeset only if some condition is true. They can be chained.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//div[true()]
|
||||||
|
//div[@class="head"]
|
||||||
|
//div[@class="head"][@id="top"]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Operators
|
||||||
|
Use operators to make conditionals.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Comparison
|
||||||
|
//a[@id = "xyz"]
|
||||||
|
//a[@id != "xyz"]
|
||||||
|
//a[@price > 25]
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Logic (and/or)
|
||||||
|
//div[@id="head" and position()=2]
|
||||||
|
//div[(x and y) or not(z)]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Using nodes
|
||||||
|
You can use nodes inside predicates.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Use them inside functions
|
||||||
|
//ul[count(li) > 2]
|
||||||
|
//ul[count(li[@class='hide']) > 0]
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# This returns `<ul>` that has a `<li>` child
|
||||||
|
//ul[li]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Nesting predicates
|
||||||
|
This returns `<section>` if it has an `<h1>` descendant with `id='hi'`.
|
||||||
|
|
||||||
|
```
|
||||||
|
//section[//h1[@id='hi']]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Predicate order
|
||||||
|
Order is significant, these two are different.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
a[1][@href='/']
|
||||||
|
a[@href='/'][1]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Indexing
|
||||||
|
Use `[]` with a number, or `last()` or `position()`.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//a[1] # first <a>
|
||||||
|
//a[last()] # last <a>
|
||||||
|
//ol/li[2] # second <li>
|
||||||
|
//ol/li[position()=2] # ...same as above
|
||||||
|
```
|
||||||
|
|
||||||
|
Functions
|
||||||
|
---------
|
||||||
|
|
||||||
|
### Node functions
|
||||||
|
|
||||||
|
text() # button[text()="Submit"]
|
||||||
|
name() # *[name()='div']
|
||||||
|
lang(str)
|
||||||
|
namespace-uri()
|
||||||
|
|
||||||
|
count() # table[count(tr)=1]
|
||||||
|
position() # ol/li[position()=2]
|
||||||
|
|
||||||
|
### Boolean functions
|
||||||
|
|
||||||
|
not(expr) # button[not(text()="Submit")]
|
||||||
|
|
||||||
|
### String functions
|
||||||
|
|
||||||
contains() # font[contains(@class,"head")]
|
contains() # font[contains(@class,"head")]
|
||||||
starts-with() # font[starts-with(@class,"head")]
|
starts-with() # font[starts-with(@class,"head")]
|
||||||
ends-with() # font[ends-with(@class,"head")]
|
ends-with() # font[ends-with(@class,"head")]
|
||||||
|
|
||||||
text() # button[text()="Submit"]
|
concat(x,y)
|
||||||
name() # div[child[name()='div']]
|
substring(str, start, len)
|
||||||
lang(str)
|
substring-before("01/02", "/") #=> 01
|
||||||
namespace-uri()
|
substring-after("01/02", "/") #=> 02
|
||||||
|
translate()
|
||||||
|
normalize-space()
|
||||||
|
string-length()
|
||||||
|
|
||||||
count() # table[count(tr)=1]
|
### Type conversion
|
||||||
last() # tr[last()]
|
|
||||||
position() # ol/li[position()=2]
|
|
||||||
|
|
||||||
not(expr)
|
string()
|
||||||
|
number()
|
||||||
|
boolean()
|
||||||
|
|
||||||
### Axes
|
Axes
|
||||||
|
----
|
||||||
|
|
||||||
/ child # div/a div[child::a]
|
```sh
|
||||||
// descendant # div//a
|
//ul/li
|
||||||
@ attribute # input[@type="text"]
|
//div/h1/span
|
||||||
.. parent # span[parent::[name()='div']]
|
```
|
||||||
|
{:.light}
|
||||||
|
|
||||||
ancestor
|
### Descendant-or-self axis
|
||||||
ancestor-or-self
|
When you use `//` for descendants, this is short or `/descendant-or-self::`.
|
||||||
following
|
|
||||||
following-sibling
|
|
||||||
preceding
|
|
||||||
preceding-sibling
|
|
||||||
|
|
||||||
### Nesting
|
```sh
|
||||||
|
//div//h4
|
||||||
|
//div/descendant-or-self::h4
|
||||||
|
|
||||||
a[/span[@class="heading"]]
|
//ul//[last()]
|
||||||
|
//ul/descendant-or-self::[last()]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Child axis
|
||||||
|
When no axis is specifid, a step with a `name` is short for `child::name`. This is what makes `//a/b/c` work.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//ul/li/a
|
||||||
|
//ul/child::li/child::a
|
||||||
|
```
|
||||||
|
|
||||||
|
### Attribute axis
|
||||||
|
When you use `@` for attributes, that's short for the `attribute::` axis.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//a/@href
|
||||||
|
//a/attribute::href
|
||||||
|
|
||||||
|
//div[@id="box"]
|
||||||
|
//div[attribute::id="box"]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Other axes
|
||||||
|
There are other axes you can use.
|
||||||
|
|
||||||
|
| Axis | Abbrev | Description |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `ancestor` | | |
|
||||||
|
| `ancestor-or-self` | | |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `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` | | |
|
||||||
|
{:.greycode}
|
||||||
|
|
||||||
|
More examples
|
||||||
|
-------------
|
||||||
|
|
||||||
|
```sh
|
||||||
|
//* # all elements
|
||||||
|
count(//*) # count all elements
|
||||||
|
//h1[1]/text() # hext 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
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Find a <section> that directly contains h1#section-name
|
||||||
|
//section[child::h1[@id='section-name']]
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# like jQuery's $().closest('.box')
|
||||||
|
./ancestor-or-self::[@class="box"]
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Find a <section> that contains h1#section-name
|
||||||
|
# (Same as above, but use descendant-or-self instead of child)
|
||||||
|
//section[//*[@id='section-name']]
|
||||||
|
```
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# Find <item> and check its attributes
|
||||||
|
//item[@price > 2*@discount]
|
||||||
|
```
|
||||||
|
|
||||||
|
References
|
||||||
|
----------
|
||||||
|
|
||||||
|
* [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) (whitebeam.org)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue