html元素定位

1. Xpath 语法

XPath 是 XML 路径语言（XML Path Language），它是一种用来确定 XML 文档中某部分位置的语言。

① 作用和痛点

• 前面的只能是单一属性，文本，标签名称
• 可以通过 e.find_element 一层层查找下去，但是麻烦
• 综合各个条件，xpath 表达式，一次查找

② 基本语法

expression	description
nodename	选取此节点的所有子节点
/	绝对路径，从根节点选取
//	相对路径，从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置
.	选取当前节点
..	选取当前节点的父节点
@	选取属性

③ 绝对定位和相对定位

• 绝对路径：每次从根节点 html 开始
• 相对路径：每次只需从第一个已经找到的节点开始
• 绝对定位的劣势：
  • 前端经常变化，加 div 之类的，下次就不能用了
  • 表达过于繁琐

④ 谓语条件

谓语被嵌套在方括号中，用来查找某个特定的节点或者包含某个指定的值的节点，也就是额外的条件。文本也可以定位。

a) 索引取值：[index]
索引的顺序是从 1 开始的，不是 0

索引的优先顺序比 // 高，建议使用索引的时候前面的部分使用括号包起来

(//a[@class, 'btn-special'])[0]
# 查找第一个元素 input 元素
e.find_element_by_xpath("(//input)[1]")
# (//input)[1] 和 //input[1] 是有区别的

b) 有某个属性：[@属性]

# 查找有 value 属性的 input 标签
e.find_element_by_xpath("//input[@value]")

c) 属性为某个特定值：[@属性=值]

# 查找 value 等于 百度一下 的 input 标签
e.find_element_by_xpath("//input[@value='百度一下']")

d) 子元素中属性为某个特定值：[//子元素/@属性=值]

# 查找 form, form 下有一个 option 元素的 value 属性为 musen
e.find_element_by_xpath("//span[input/@value='musen']")

e) 文本定位：//a[text()='']

# 查找文本内容为百度首页的 a 标签
e.find_element_by_xpath("//a[text()='百度首页']")

⑤ 通配符和逻辑运算 and or

# 查找 name 属性等于 user 或者 user 的 input 标签
//input[@name='user' or @id='username']

# 查找 name 属性等于 user 并且 id 属性等于 user 的 input 标签
//input[@name='rsv_enter' and @name='rsv_d']

注意点：
* find_element_by_class_name 进行定位 class 之间不能有空格
* xpath 通过 class 属性定位的时候，class 属性值可以有空格

⑥ 函数

function name	description
starts-with(str1, str2)	str1 是否以 str2 开头
contains(str1, str2)	str1 是否包含 str2

# 查找 value 属性为 百 开头的 input 标签
//input[starts-with(@value, '百')]

# 查找 value 属性，包含百度的 input 标签
// input[contains(@value, '百度')]

⑦ 轴定位

/轴名称(元素关系)::节点名称

# 案例1：查找 form 标签子节点中 id 等于 s_btn_wr 的 span 标签
//form/child::span[@id='s_btn_wr']

# 案例2：查找 form 标签父节点的 div 标签
//form/parent::div

# 案例3：查找 title 等于苏宁易购的 a 标签的父节点 div 的所有在它之前的兄弟节点
//a[@title='苏宁易购']/parent::div/preceding-sibling::div

# 案例3：查找 title 等于苏宁易购的 a 标签的父节点 div 的所有在它之后的兄弟节点
//a[@title='苏宁易购']/parent::div/following-sibling::div

• 轴定位包含了路径寻找，如果需要更多层往上，轴定位更加方便
• 兄弟姐妹都可以

轴名称	结果
child	选取当前节点的所有子元素
descendant	选取当前节点的所有后代元素（子、孙等）
parent	选取当前节点的父节点
ancestor	选取当前节点的所有先辈（父、祖父等）
following	选取文档中当前节点的结束标签之后的所有节点
following-sibling	选取当前节点之后的所有兄弟节点
preceding	选取文档中当前节点的开始标签之前的所有节点
preceding-sibling	选取当前节点之前的所有节点

2. CSS选择器

① 层级关系

.intro	选择 class="intro" 的所有元素
#firstname	选择 id="firstname" 的所有元素
*	选择所有元素
p	选择所有 p 元素
div,p	选择所有 div 元素和 p 元素
div p	选择 div 元素内部的所有 p 元素
div>p	选择父元素为 div 元素的所有 p 元素
div+p	选择紧接在 div 元素之后的所有 p 元素

② 谓语

[attribute]	[target]	选择带有 target 属性的所有元素
[attribute = value]	a[title = 苏宁易购]	title 属性等于苏宁易购的 a 标签
[attribute *= value]	a[title *= 宁易]	title 属性包含宁易的 a 标签
[attribute ^= value]	a[title ^= 苏宁]	title 属性以苏宁开头的 a 标签
[attribute $= value]	a[title $= 易购]	title 属性以易购结尾的 a 标签

③ 索引

nth-of-type：正向索引 
# 获取第五个类属性为nav-item的div标签 
div.nav-item:nth-of-type(5) 

nth-last-of-type：反向索引 
# 获取倒数第2个类属性为nav-item的div标签 
div.nav-item:nth-last-of-type(2)

3. CSS 和 Xpath 比较

• CSS的效率块
  • CSS 适是和 HTML 绑定在一起的，是直接操作 HTML 的，如果换成 XML 其他的标记语言，就不行了
  • Xpath 是和 DOM 绑定在一起的。所以还需要时间通过HTML去生成 DOM 对象。
  • 只要有 DOM 就可以用 Xpath来定位元素, 也就是说 xpath 得用途更广，手机也可以用，其 他客户端也可以用。
  • xpath 在 IE 中效率会高，其他谷歌和火狐浏览器，都会比css慢。
• xpath的功能更多
  • xpath 在找到一个元素是可以上下移动的。 css 只能进行向下或横向去找。
  • xpath可以根据文本内容查找元素。
• 对于简单的元素定位，CSS选择器表达更加简洁。但是定位复杂的元素与xpath相比不太友好。

• end -