XPath cheatsheet

XPath có thể được dùng để xác định các element hay attributes trong XML. XPath cheatsheet tổng hợp cách dùng của XPath để bạn tiện sử dụng.

Selectors

Descendant selectors

`h1`	`//h1`
`div p`	`//div//p`
`ul > li`	`//ul/li`
`ul > li > a`	`//ul/li/a`
`div > *`	`//div/*`
`:root`	`/`
`:root > body`	`/body`

Order selectors

`ul > li:first-of-type`	`//ul/li[1]`
`ul > li:nth-of-type(2)`	`//ul/li[2]`
`ul > li:last-of-type`	`//ul/li[last()]`
`li#id:first-of-type`	`//li[1][@id="id"]`
`a:first-child`	`//*[1][name()="a"]`
`a:last-child`	`//*[last()][name()="a"]`

Attribute selectors

`#id`	`//*[@id="id"]`
`.class`	`//*[@class="class"]`
`input[type="submit"]`	`//input[@type="submit"]`
`a#abc[for="xyz"]`	`//a[@id="abc"][@for="xyz"]`
`a[rel]`	`//a[@rel]`
`a[href^='/']`	`//a[starts-with(@href, '/')]`
`a[href$='pdf']`	`//a[ends-with(@href, '.pdf')]`
`a[href*='://']`	`//a[contains(@href, '://')]`
`a[rel~='help']`	`//a[contains(@rel, 'help')]`

Siblings

`h1 ~ ul`	`//h1/following-sibling::ul`
`h1 + ul`	`//h1/following-sibling::ul[1]`
`h1 ~ #id`	`//h1/following-sibling::[@id="id"]`

jQuery

`$('ul > li').parent()`	`//ul/li/..`
`$('li').closest('section')`	`//li/ancestor-or-self::section`
`$('a').attr('href')`	`//a/@href`
`$('span').text()`	`//span/text()`

Class check

//div[contains(concat(‘ ‘,normalize-space(@class),’ ‘),’ foobar ‘)]

Other things

`h1:not([id])`	`//h1[not(@id)]`
Text match	`//button[text()="Submit"]`
Text match (substring)	`//button[contains(text(),"Go")]`
Arithmetic	`//product[@price > 2.50]`
Has children	`//ul[*]`
Has children (specific)	`//ul[li]`
Or logic	`//a[@name or @href]`
Union (joins results)	`//a \| //div`

Expressions

Steps and axes

`//`	`ul`	`/`	`a[@id='link']`
Axis	Step	Axis	Step

Axes

Axis	Example	What
`/`	`//ul/li/a`	Child
`//`	`//[@id="list"]//a`	Descendant

Phân biệt các steps dùng /. Dùng (//) nếu bạn không muốn chọn mức con (children)

Prefixes

Bạn có thể sử dụng bất cứ cái nào để bắt đầu biểu thức (expression)

Sử dụng VS Code và Playwright MCP tự động test demo website Demoblaze thông qua GitHub Copilot Agent

16 Tháng 6, 2025

Selenium Tutorial – Java

1 Tháng 5, 2025

Detox – gray box end-to-end testing automation framework cho ứng dụng React Native

1 Tháng 5, 2025

Cách xử lý các sự kiện bàn phím và chuột trong Selenium sử dụng class Actions

1 Tháng 5, 2025

Prefix	Example	What
`//`	`//hr[@class='edge']`	Anywhere
`./`	`./a`	Relative
`/`	`/html/body/div`	Root

Steps

//div
//div[@name=’box’]
//[@id=’link’]

Một step có thể có một element name (div) và predicate […]. Cả hai đều là tùy chọn. Chúng cũng có thể là những thứ khác như:

//a/text()	# “Go home”
//a/@href	# “index.html”
//a/*	# Tất cả các element con của thẻ <a>

Predicates

//div[true()]

//div[@class=”head”]

//div[@class=”head”][@id=”top”]

//a[@id = “xyz”]

//a[@id != “xyz”]

//a[@price > 25]

Operators

# Logic (and/or)

//div[@id=”head” and position()=2]

//div[(x and y) or not(z)]

Using nodes

Dùng chúng trong các function, kết quả trả về là mà có tag con là (//ul[li])

//ul[count(li) > 2]

//ul[count(li[@class=’hide’]) > 0]

Chaining order

a[1][@href=’/’]

a[@href=’/’][1]

Indexing

//a[1]	# Vị trí đầu tiên của thẻ <a>
//a[last()]	# Vị trí cuối cùng của thẻ <a>
//ol/li[2]	# Vị trí thứ hai
//ol/li[position()=2]	# Vị trí thứ hai
//ol/li[position()>1	# :not(:first-of-type)

Nesting predicates

Kết quả trả về là <section> nếu có một thẻ descendant với id=’hi’

//section[.//h1[@id=’hi’]]

Functions

Node functions

name()	# //[starts-with(name(), ‘h’)]
text()	#//button[text()=”Submit”]
	/#/button/text()
lang(str)
namespace-uri()
count()	#//table[count(tr)=1]
position()	#//ol/li[position()=2]

Boolean functions

not(expr) # button[not(starts-with(text(),”Submit”))]

String functions

contains()	# font[contains(@class,”head”)]
starts-with()	# font[starts-with(@class,”head”)]
ends-with()	# font[ends-with(@class,”head”)]

concat(x,y)
substring(str, start, len)
substring-before(“01/02”, “/”)	# 01
substring-after(“01/02”, “/”)	# 02
translate()
normalize-space()
string-length()

Type conversion

string()

number()

boolean()

Axes

Sử dụng axes

//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’)

Steps của một expression được phân cách bởi ký tự /, thường được sử dụng để chọn ra các node child . Điều đó không phải lúc nào cũng đúng, nên chúng ta có thể dùng “axis” khác bằng cách dùng ký tự ::.

`//`	`ul`	`/child::`	`li`
Axis	Step	Axis	Step

Child axis

child:: mặc định là axis. Dưới đây là các ví dụ mà cả hai cách đều giống nhau

VD 1:

//ul/li/a

//child::ul/child::li/child::a

VD 2:

//ul[li]

//ul[child::li]

VD 3:

//ul[count(li) > 2]

//ul[count(child::li) > 2]

Descendant-or-self axis

// là cách viết rút gọn củadescendant-or-self:: axis. Dưới đây là các ví dụ cả hai cách hoạt động giống nhau

VD 1:

//div//h4

//div/descendant-or-self::h4

VD 2:

//ul//[last()]

//ul/descendant-or-self::[last()]

Axes khác

Axis	Abbrev	Notes
`ancestor`
`ancestor-or-self`
`attribute`	`@`	`@href` viết tắt cho `attribute::href`
`child`		`div` viết tắt cho `child::div`
`descendant`
`descendant-or-self`	`//`	`//`viết tắt cho `/descendant-or-self::node()/`
`namespace`
`self`	`.`	`.`viết tắt cho `self::node()`
`parent`	`..`	`..` viết tắt cho `parent::node()`
`following`
`following-sibling`
`preceding`
`preceding-sibling`

Unions

Ký tự ‘|’ được sử dụng để nối hai biểu thức lại với nhau

//a | //span

Ví dụ

//*	# Tất cả elements
count(//*)	# Đếm tất cả elements
(//h1)[1]/text()	# text của thẻ heading <h1> đầu tiên
//li[span]	# Tìm thẻ <li> với thẻ <span> bên trong nó
	# .Có thể viết //li[child::span]
//ul/li/..	# Sử dùng .. để chọn parent

Tìm Parent

`//section[h1[@id='section-name']]`	Tìm vị trí có thẻ <section> có thẻ con <h1> mà có id là “section-name”
`//section[//h1[@id='section-name']]`	Tìm vị trí có thẻ <section> có thẻ con <h1> mà có id là “section-name”. Ở đây sử dụng //h1 nghĩa là dùng decendant-or-seft thay cho dùng child