18. 相对定位

什么是相对定位

相对定位就是：你已经找到了一个元素，然后以它为基准，去找它周围的元素。

比如找到了一个输入框，想找它旁边的按钮。或者找到了一个单元格，想找同一行的其他单元格。

DrissionPage 提供两种相对定位：基于 DOM 的和基于视觉的。

基于 DOM 的相对定位

DOM 相对定位按照 HTML 结构关系查找，获取父节点、子节点、同级节点。

获取父级元素 parent()

# 获取上一级父元素
parent = ele.parent()

# 获取第二层父元素
grandparent = ele.parent(2)

# 获取父元素中 id 为 container 的元素
container = ele.parent('#container')

parent() 可以传数字（第几级父元素）或定位符（在祖先中筛选）。

获取直接子节点 child() 和 children()

# 获取第一个直接子节点
child = ele.child()

# 获取第三个直接子节点
child = ele.child(3)

# 获取第一个 div 子节点
child = ele.child('t:div')

# 获取所有直接子节点
children = ele.children()

# 获取所有 div 子节点
divs = ele.children('t:div')

获取后面的兄弟元素 next() 和 nexts()

# 获取后面第一个兄弟元素
bro = ele.next()

# 获取后面第三个兄弟元素
bro = ele.next(3)

# 获取后面第三个 div 兄弟元素
bro = ele.next('t:div', 3)

# 获取后面所有兄弟元素
bros = ele.nexts()

# 获取后面所有 div 兄弟元素
div_bros = ele.nexts('t:div')

获取前面的兄弟元素 prev() 和 prevs()

# 获取前面第一个兄弟元素
prev = ele.prev()

# 获取前面第二个兄弟元素
prev = ele.prev(2)

# 获取前面所有兄弟元素
all_prev = ele.prevs()

文档范围查找 after() 和 before()

next() 和 prev() 只在同级节点中查找。after() 和 before() 的范围是整个文档。

# 获取当前元素后面第 3 个元素（不限同级）
ele2 = ele.after(index=3)

# 获取当前元素后面第 3 个 div
ele2 = ele.after('t:div', 3)

# 获取当前元素前面第 2 个元素
ele2 = ele.before(2)

# 获取后面所有元素
all_after = ele.afters()

# 获取前面所有 div
all_divs_before = ele.befores('t:div')

基于视觉的相对定位

DOM 相对定位按照 HTML 结构来，视觉相对定位按照页面上的位置来。

只有浏览器模式（d 模式）支持，s 模式不行。

四个方向

# 获取右边的元素
right = ele.east()

# 获取左边的元素
left = ele.west()

# 获取下边的元素
below = ele.south()

# 获取上边的元素
above = ele.north()

可以传入定位符筛选，也可以传入像素距离。

# 获取右边第一个 button
btn = ele.east('t:button')

# 获取右边 100 像素位置的元素
ele2 = ele.east(100)

偏移量定位

# 获取相对于元素左上角偏移 (50, 100) 位置的元素
ele2 = ele.offset(50, 100)

获取覆盖元素

# 获取覆盖在当前元素最上层的元素
cover = ele.over()

实际例子

假设页面上有个表格，每行有一个复选框和多个数据列。你想点击某行的复选框：

# 先找到包含"张三"的单元格
cell = ele.ele('text:张三')

# 找到同一行的复选框（前面第二个兄弟）
checkbox = cell.prev(2)

# 点击复选框
checkbox.click()

或者用 parent() 先找到行，再找行内的复选框：

# 找到包含"张三"的单元格
cell = ele.ele('text:张三')

# 找到所在的行
row = ele.parent('t:tr')

# 在行内找复选框
checkbox = row.ele('t:input')
checkbox.click()

方法速查

方法	作用	范围
parent()	获取父元素	DOM
child()	获取直接子节点	DOM
children()	获取所有直接子节点	DOM
next()	获取后面兄弟元素	DOM 同级
nexts()	获取后面所有兄弟元素	DOM 同级
prev()	获取前面兄弟元素	DOM 同级
prevs()	获取前面所有兄弟元素	DOM 同级
after()	获取后面元素	DOM 全文
before()	获取前面元素	DOM 全文
east()	获取右边元素	视觉
west()	获取左边元素	视觉
south()	获取下边元素	视觉
north()	获取上边元素	视觉
offset()	偏移量定位	视觉
over()	获取覆盖元素	视觉

小结

• DOM 相对定位按照 HTML 结构关系查找
• 视觉相对定位按照页面上的位置查找
• parent()、child()、next()、prev() 是最常用的四个
• after() 和 before() 范围是整个文档，不限于同级
• 视觉定位只有浏览器模式支持