CSS 和 XPATH 的功能对比
| 对比项 | 定位方式 | CSS | XPATH |
|---|---|---|---|
| 常规属性 | id | #id_keyword | //*[@id=‘id关键字‘] |
| 常规属性 | class | .class_name | //*[@class=‘class属性名‘] |
| 常规属性 | name | [name=‘name关键字‘] | //*[@name=‘name关键字‘] |
| 多个属性组合 | —— | [type=‘type关键字‘][name=‘name关键字‘] | //input[@type=‘type关键字‘ and @name=‘name关键字‘] |
| 文本属性 | —— | 不支持 | //*[text()=‘text字符串‘] |
| 层级关系 | 相对路径 | form#form>span>input | //form[@id=‘form]/span/input |
| 层级关系 | 索引 | select#nr>option:nth-child(3) | //select[@id=‘nr‘]/option[3] |
| 找父节点 | —— | 不支持 | //*[@id=‘id关键字‘]/../.. |
| 模糊匹配 | 模糊匹配text | 不支持 | //*[contains(text(),'text字符串')] |
| 模糊匹配 | 模糊匹配某个属性 | 不支持 | /*[contains(@class,'class属性名')] |
| 模糊匹配 | 模糊匹配以xx开头 | 不支持 | //*[starts-with(@id,'开头字符串')] |
xpath定位高级语法
xpath 使用路径表达式来选取 xml 文档或html文档上的节点或节点集，分别有绝对路径、相对路径两种表达方式。
缺点： webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素，若脚本中大量使用xpath做元素定位，脚本的执行速度会变慢
| 表达式 | 描述 |
|---|---|
| . | 选取当前节点 |
| .. | 选取当前节点的父节点 |
| / | 从根节点选取，默认情况下当前节点是 html |
| // | 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置 |
| nodename | 选取此节点的所有子节点，类似 css 中的标签选择器 |
| @ | 选取属性 |
-
绝对路径定位：
以“/”开头，从最顶层html开始往下找，像文件夹一样写的完整路径
缺点：一旦页面结构发生改变，路径也随之失效，必须重新定位 -
相对路径定位：
以“//”开头，可以用任意层级的元素作为起点 -
索引定位：
//input[2] 表示匹配任意节点下的第二个input标签 -
属性定位：
| 表达式 | 含义 |
|---|---|
| /*[@class] | 表示匹配下一级中，所有具备class属性的任意标签 |
| //div[@id=‘abc’ and @class=‘abc’] | 表示匹配任意节点下，id为abc且class为abc的div标签 |
| //div[starts-with(@id,‘kw’)] | 表示匹配任意节点下，id开头为kw的div标签 |
| //div[contains(@id,‘kw’)] | 表示匹配任意节点下，id包含kw的div标签 |
css定位高级语法
| 选择器 | 表达示例 | 解释 |
|---|---|---|
| id选择器（id用 #表示） | #abc | 匹配id为abc的标签 |
| class选择器（class用 .表示） | .abc | 匹配class为abc的标签 |
| 标签选择器 | p | 匹配p标签 |
| 分组选择器 | a,span | 匹配 a 标签和 span标签 |
| 属性选择器—指定值 | [class=“li”] | 匹配class为li的标签 |
| 属性选择器—不指定值 | [title] | 匹配属性有title的标签 |
| 属性选择器—指定标签 | a[title] | 匹配属性有title的a标签 |
| 属性选择器—匹配单词边界 | a[title~=“hello”] | 匹配title包含hello的a标签 |
| 后代选择器(空格表示)，可选取当前层级下的任意层级元素 | #ab p | 匹配id为ab的下一/多级p标签 |
| 子元素选择器(>表示)，只能选择下一级的元素 | #ab>p | 匹配id为ab的下一级中的p标签 |
| 相邻兄弟选择器(+表示)，只能选择同级的下一个元素 | #ab+.ab | 匹配id为ab的同级下一元素且该元素的class为ab才能匹配到 |
| 后续兄弟选择器(~表示)，选取指定元素后的所有同级指定元素 | .ab~li | 匹配class为ab的标签后的所有同级li标签 |
伪类
| 表达式 | 描述 |
|---|---|
| nth-child(n) | 匹配第 n 个子元素 |
| nth-last-child(n) | 匹配倒数第n个子元素 |
| nth-of-type(n) | 匹配第 n 个指定类型的标签 |
| first-child | 匹配第一个标签 |
| last-child | 匹配最后一个标签 |
定位元素注意事项：
- 找到待定位元素的唯一属性
- 如果该元素没有唯一属性，则先找到能被唯一定位到的父元素/子元素/相邻元素，再使用“>”," “,”+"等进行辅助定位
- 不要使用随机唯一属性定位
- 最重要的是多跟研发沟通，尽量把关键元素加上ID或者name，并减少不合理的页面元素，例如重复ID这样的事情最好不要发生。
xpath定位和css定位对比实例
实际项目中使用较多的是xpath定位和css定位。XPath是XML文档中查找结点的语法，换句话就是通过元素的路径来查找这个元素。xpath比较强大，而css选择器在性能上更优，运行速度更快，语法上更简洁。比较两种方法：
直接子元素
XPATH中的直接子元素是使用“/”定义的，而在CSS上，它是使用“>”定义的。
XPATH：//div/input
CSS: div>input
后代元素
如果一个元素在另一个元素的内部（子元素或者孙元素），则它在XPATH中使用“//”定义，而在CSS中仅使用空格定义。
XPATH：//div//input
CSS: div input
ID定位
XPATH中的元素id使用以下内容定义："[@id=‘kw’]"，而在CSS中使用："#kw"。
XPATH：//input[@id='kw']
CSS: input#kw
CLASS定位
对于class属性，XPATH类似id，而CSS中用一个点表示。
XPATH：//input[@class="s_ipt"]
CSS: input.s_ipt
弟弟元素：following-sibling 继兄弟
这对于表单元素非常有用，即页面中位于同一父节点内的下一个相邻元素。
XPATH：//input[@class="s_ipt"]/following-sibling::a
CSS：input[class="s_ipt"]+a
哥哥元素：preceding-sibling 前兄弟
页面中位于同一父节点内的上一个相邻元素。
XPATH：//a[@name='tj_baike']/preceding-sibling::a
CSS：无法实现
父节点元素
页面中位于一个节点的上级元素。
XPATH: //input/parent
CSS: 无法实现
属性值
我们可以根据任何属性值定位元素。
XPATH: //input[@name='username']
CSS: input[name='username']
多个属性值
我们甚至可以通过多个属性来定位元素。
XPATH: //input[@name='rsv_spt' and @value="1"]
CSS: input[name='login'][type='submit']
第一个子元素
XPATH: //div[@id='u1']/a[1]
CSS: div#u1 a:first-child
最后一个子元素
XPATH: //div[@id='u1']/a[last()]
CSS: div#u1 a:last-child
第二个子元素
XPATH: //div[@id='u1']/a[2]
CSS: div#u1 a:nth-child(2)
模糊匹配
selenium中允许使用^=，$=或*=进行部分字符串匹配。
^=匹配前缀
XPATH: input[starts-with(@id,'user')]
CSS: input[id^='user']
$=匹配后缀
XPATH: input[ends-with(@id,'name')]
CSS: input[id$='name']
*=匹配包含
XPATH: input[contains(@id,'sernam')]
CSS: input[id*=sernam]
总结css与xpath区别
相同点：
- xpath与css都有web页面定位元素的功能
- Xpath与css结构类似
区别：
- css定位语法比xpath简洁，定位方式更灵活多样
- css不支持根据子元素查找元素
- 使用xpath能够屏蔽掉其他页面元素改变
- css在chrom,火狐查找速度快一些，效率高一些，xpath在IE浏览器相对快一些(ie浏览器无论是css,xpath都比谷歌，火狐要慢）
- CSS不支持文本搜索，XPATH支持文本搜索text()
- xpath支持的函数特别多，CSS选择器支持的函数比较少，所以在复杂元素查找时候，xpath反而更加简洁，所以xpath功能更加强悍
举例：
-
xpath路径：
html/body/div[2]/div[1]/div/div[3]/a[1] -
对应的css路径：
html body div:nth-of-type(2) div div:nth-of-type(3) ul li:nth-of-type(4) a{}