Web自动化测试：xpath & CSS Selector定位

Xpath 和 CSS Selector简介 CSS Selector

CSS Selector和Xpath都可以用来表示XML文档中的位置。CSS (Cascading Style Sheets)是一种样式表语言，是所有浏览器内置的，用于描述以HTML或XML编写的文档的外观和样式。CSS Selector用于选择样式化的元素，所以理论上前端人员可以定位 DOM 节点并设置样式，那么对于测试人员这些元素也可以定位到。

XPath

XPath是XML路径语言，是一种查询语言，使用路径表达式浏览XML文档中的元素和属性。XPath标准语法如下：

Xpath=http://www.likecs.com//tagname[@attribute='value']

// : 选择当前节点

Tagname: 节点标签名

@: 选择属性

Attribute: 节点属性名

Value: 属性值

XPath有绝对定位和相对定位两种，绝对定位使用绝对路径，缺点是路径太长，只要一个节点变动就无法定位。以单斜杠（/）开始，表示从根节点开始选择元素。下面是页面https://www.baidu.com/上“百度一下”按钮的绝对路径：

/html/body/div[1]/div[1]/div[5]/div[1]/div/form/span[2]/input

相对路径以双斜杠（//）开始，可以从HTML文档的任何位置开始，“百度一下”按钮的相对路径可以表示如下

//input[@id="su"] Xpath VS. CSS Selector

CSS Selector和Xpath几乎可以定位到所有Web元素（HTML和XML文档元素，Android应用的层级结构使用xml编写），它们的主要差异包括：

XPath通过遍历的方式从XML文档中选择节点，CSS Selector是一种匹配模式定位，因此CSS Selector比 XPath 执行效率更高。

Xpath可以通过文本来定位，而CSS Selector不能；

Xpath可以通过子节点来定位父节点，CSS Selector是前向的，不能利用子节点定位父节点。

CSS Selector语法相比Xpath更加简洁

Xpath 和 CSS Selector元素定位

接下来对比一下这两种方法的语法差异，节点的定义我们规定如下：

儿子元素定位

xpath使用‘/’，CSS Selector使用‘>’

Xpath CSS Selector
语法   //element/element   element>element  
示例   //div/a   div > a  
描述   选择父元素为 <div> 元素的所有 <a> 元素。    

还可以使用XPath Axes（轴）child 来定位子元素

XPATH:

//div/child::*   # 选择父元素为 <div> 元素的所有儿子元素 //div/child::a  # 选择父元素为 <div> 元素的所有<a>元素

CSS Selector:

div > a:nth-child(2) # 选择父元素为 <div> 元素的第二个<a>元素 div > a:nth-last-child(2) # 选择父元素为 <div> 元素的倒数第二个<a>元素 div > a:last-child # 选择父元素为 <div> 元素的最后一个<a>元素 div > a:first-child # 选择父元素为 <div> 元素的第一个<a>元素 子孙元素定位

xpath使用‘//’，CSS Selector使用空格

Xpath CSS Selector
语法   //element//element   element element  
示例   //div//a   div a  
描述   选择 <div> 元素内部的所有 <a> 元素。    

还可以使用XPath Axes（轴）descendant 来定位子孙元素

XPATH:

//div/descendant::*   # 选择祖先元素为 <div> 元素的所有子孙元素 //div/descendant::a  # 选择祖先元素为 <div> 元素的所有<a>元素   

CSS Selector使用空格定位子孙元素后进行选择:

div a:nth-child(2) # 选择祖先元素为 <div> 元素的第二个<a>元素 div a:nth-last-child(2) # 选择祖先元素为 <div> 元素的倒数第二个<a>元素 div a:last-child # 选择祖先元素为 <div> 元素的最后一个<a>元素 div a:first-child # 选择祖先元素为 <div> 元素的第一个<a>元素 邻居节点定位

在同一个父节点下，定位下一个相邻节点

Xpath CSS Selector
语法   //element/following-sibling::element   element + element  
示例   //div/following-sibling::a   div + a  
描述   选择紧接在 <div> 元素之后的所有 <p> 元素。    

Xpath可以定位当前节点前面的邻居节点，CSS Selector不能

//*element/preceding-sibling::element 父元素、祖先元素定位