html中css路径和xpath路径,xpath路径表达式与css选择器

1、xpath路径表达式

1.1、什么是Xpath路径表达式：

Xpath即为XML路径语言，它是一种用来(标准通用标记语言的子集)在 HTMLXML 文档中查找信息的语言

xpath路径表达式用来在一个web页面中定位、查找元素

在自动化测试里，我们只需要知道Xpath是一种元素定位方式即可：xpath使用路径表达式来选取XML/HTML文档中的节点或节点集，这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似

1.2、下面是xpath路径表达式各种符号的用法：

/　　　　代表根节点，在xpath表达式中，代表从跟节点选择

//　　　　从匹配的选择的当前节点选择文档的节点，不考虑位置

.　　　　点与Linux系统里的路径 的点相似，表示的是当前 节点(Linux表示的是当前目录)

..　　　　两个点表示的是当前节点的父节点(而在Linux系统里表示的是上一级目录)

@　　　　选取属性

xpath表达式实例：

格式：//节点名[@属性名] 或 //节点名[@属性名="属性值"](属性值需要用单或双引号引起来)

例：/body/div[@id="wrapper"]

1.3、使用xpath路径表达式查找某个特定的节点或者包含某个指定的值的节点

路径表达式：

/bookstore/book[1]  : 　选取bookstore的子元素中的第一个book元素(可以当成是python中的列表或字符串什么的的下标索引查找，下标索引是0开始，而这里是1开始)

last的使用：

/bookstore/book[last()] 　：选取bookstore的子元素中的最后一个book元素

/bookstore/book[last()-1] 　 ：选择bookstore的子元素中的倒数第二个book元素

position的使用：

/bookstore/book[position()] 选择bookstore的所有子元素book

/bookstore/book[position()>3] 选择bookstore的所有子元素book的排序大于3的元素

/bookstore/book[position()=3] 选择bookstore的所有子元素book的排序为3的元素

@的简单使用：

//titile[@lang]　:　选择所有属性为lang的title元素

//title[@lang='eng'] 　： 选择所有title元素且属性为lang，属性值为eng

选择多个元素：

/bookstore/book[i>21] 　：选择bookstore下的book元素，且book元素里的子元素i大于21

/bookstore/book[i>21]/title 　： 选择bookstore下的book元素的所有title元素，且book元素里的元素i大于21

通配符：

*　　　　匹配任何元素

@*　　　匹配任何属性的节点

node()　　匹配任何类型的节点

通配符结合表达式：

/bookstore/* 　　　　　  选取bookstore 元素的所有子元素

//*　　　　　　　　　　选取文档中的所有元素

html/node()/meta/@*　  选取html下面任意节点下的meta节点的所有属性

//title[@*]　　　　　　   选取所有带有属性的title元素

选取多个路径表达式使用  |( | 相当or，或的意思)：

//book/title | //book/price 选取book元素的所有title或者price元素/符合两之一就行

//*[test()='XXX']选取文本内容定位，文本内容是XXX的元素(会有定位不到的情况)

//*[starts-with(@attribute,'XXX')] 选取属性以XXX开头的元素

//*[starts-with(@class,'auth')]

//*[contains(@class,'XXX')]选取class属性中包含XXX字符的元素

实例：//*[contains(@content,'ormat=xht')]

//*[@attribute1=value1 and @attribute2=value2]选取属性中attribute1的值等于value1且attribute2的值等于value2的元素

实例：//*[@content='noarchive' and @name='robots']

2、css选择器

2.1、通过伪类名、id、标签名定位：

.index-head 通过类的属性值定位，定位属性的值为index-head的元素

#sidebarLeft通过id的值定位元素，定位id的值为sidebarLeft的元素

*与xpath定位一样，表示的是选择所有元素，通配符

element直接写标签名称即可，可以直接找到需要定位的元素

2.2、通过元素嵌套关系定位：

element,element 逗号隔开，类似于xpath中的 | ，或的意思 ，查找两或两以上元素

例：li,a,link(查找这三个元素)

element element空格隔开，不在意父子身份，后者是前者的后代即可

例：div a(匹配div标签的后代a标签)

element>element选择后者为前者的子标签元素(严格遵守父子关系)

例：div>div>a(第一个div是第二个div的父节点，而a是第二个div的子节点)

element1+element2选择同级标签的后面同胞标签(必须是2紧跟在1后面，有非同名元素会隔开)

例：h3+ul(查找与h3同级的排在h3后面的，所有名为ul的标签)

2.3、通过属性定位：

[id] 　　　　　　　　　　　　　   匹配所有含有id属性的标签

[id='wx']　　　　　　　　     　　  匹配所有含有id并且值为wx的标签

[class~="untagged"]　　　　　　 匹配所有属性包含单词untagged的标签(只能是单词，若中间出现空格下划线无效)

[name|=msapplication]　　　　    定位标签属性name的值以msapplicatio开头的节点(该节点需为一个完整的单词)

[src^="http://"]　　　　　　　　   匹配scr属性以http://开头的节点

[src$="js"]　　　　　　　　　　  匹配src属性以js结尾的节点

[src*="ifengimg"]　　　　　　　  匹配src属性中含有ifengimg的节点

2.4、通过父子关系进行定位：

img:only-child　　　　　　 匹配所有独生子女的img节点(img的子节点是唯一的子节点)

body>div:nth-child(1)　　  匹配body的第n个div子节点(body中的子节点div的第一个子节点)

body>*:nth-last-child(1)　　 匹配body的最后一个子节点(body中所有子节点中的最后一个子节点)

:not(link)　　　　　　　　查找不是link标签的节点

实际工作中通过Xpath和css定位都是直接通过浏览器复制过来的

注意：学习自动化测试的元素定位前需要简单了解HTML的知识(元素、属性、ID、父子节点等)