WEB自动化_xpath高级语法与应用

WEB自动化_xpath高级语法
WEB自动化_xpath应用
WEB自动化_元素定位方法-selenium
WEB自动化_css高级语法与应用
WEB自动化_xpath中选择第几个子元素的方式

一、Xpath介绍：

1、xpath全称： xml path language  （xml路径语言）。
2、xpath 使用路径表达式来选取 xml 文档的节点或节点集，这些路径表达式和我们在常规电脑的文件系统中看到的表达式很相似。
3、xpath缺点：
    xpath 这种定位方式，webdriver 会将整个界面所有的元素进行扫描以定位我们需要的元素，这个操作是极其消耗时间的，如果脚本中有大量的xpath定位，脚本的执行速度会大幅度降低。
4、用途：不仅可以用来在HTML文档中选择节点，还可以在XML文档中选择节点（手机自动化中会用到）。
5、特点：语法非常像Linux系统中的路径，所以又叫做路径表达式。

6、通配符 *
	与css中一致，* 表示匹配所有元素。
	用法：//div/*  表示匹配div下面所有元素
	等价于css中的 div>*
1
2
3
4
5
6
7
8
9
10
11

二、掌握以下知识点，就可以匹配任意标签。

from selenium import webdriver

# 创建浏览器驱动对象
driver = webdriver.Chrome(r"D:\chromedriver\chromedriver_win32-V103.0.5060.53\chromedriver.exe")
driver.implicitly_wait(3)  # 智能等待_隐性等待
# 访问网址
driver.get("XXX")
1
2
3
4
5
6
7

1、xpath的绝对路径

1、以/开始，逐个增加节点名称用/分割（从根节点（html）开始一层层往下写的完整路径）。
案例：表示html文档中的P节点元素，xpath路径就表示了元素的位置。
/html/body/div/p

特点：不能跨级，类似CSS中的直接子元素选择器 >
1
2
3
4
5

driver.find_element_by_xpath("/html/body/div/ul/li/ul/li/ul/li[1]")
1

.
.
.
2、xpath 相对路径

1、以 // 开始，可以匹配文档的任一层级。
2、用法类似于css中的后代选择器，可以把//对应css中空格。
3、特点：类似css的后代元素选择器，不要求每层元素都写。
案例：表示foot元素中所有的后代P类型元素。
//foot//p

案例：表示html文档下所有的span元素
//span

案例：表示方法类似于CSS中的 div span
//div//spa
1
2
3
4
5
6
7
8
9
10
11

driver.find_element_by_xpath("//li")
1

.
.
.
3、xpath 以 . 表示当前路径。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[1]/.")
1

.
.
.
4、xpath 以 … 表示上层路径。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[1]/..")
1

.
.
.
5、xpath 以 …/… 表示上层的上层路径。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[1]/../..")
1

.
.
.
6、可以使用下标进行辅助定位，但要记住：下标是从 1 开始的。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[2]")
1

.
.
.
7、last() 表示倒数第一个。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[last()]")
1

.
.
.
8、last()-1 表示倒数第二个。

driver.find_element_by_xpath("/html/body/div/ul/li[1]/ul/li[1]/ul/li[last()-1]")
1

.
.
.
9、xpath 用 * 表示任意节点。

driver.find_element_by_xpath("/html/body/div//*")
1

.
.
.
10、用属性进行定位，为属性指定值

特点：属性用[]包裹，属性名加@符号，属性值需要用引号包裹。
使用场景：选择具有某个属性（值）的元素

表示方法：
//*[@属性] 表示选择具有某个属性的元素。
//*[@属性=”属性值“] 表示选择具有某个属性值的元素，属性值必须加引号。

示例：
//*[@style]  选择所有具有style属性的元素
//p[@spec='len2'] 选择所有具有spec 值为 len2 的元素

Tips:在xpath中没有表示id和class的特殊方法，id 、class 也是属性。
如：
//div[@id="food"]
//div[@class="cheese"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

driver.find_element_by_xpath("//li[@id='abc']")
1

.
.
.
11、用属性进行定位，不为属性指定值

以下表达式匹配所有具备id属性的li标签。
driver.find_element_by_xpath("//li[@id]")
1
2

.
.
.
12、用属性进行定位，可以匹配固定值的任意属性

匹配所有包含属性值等于abc的li元素，而不管属性是什么。
driver.find_element_by_xpath("//li[@*='abc']")
1
2

13、混合使用

1、特点：相对和绝对结合起来使用。
2、示例：表示html文档中footer元素下的div元素下的p元素。
//footer/div/p
1
2
3

14、组选择器

1、与css组选择器类似的是，xpath也是用组选择器来选择多组元素。
2、css中要表示多个选择器，用逗号来分割；xpath中 用竖线来隔开。
3、使用场景：用于多组xpath表达式组合来选择元素的情况。
表示方法：
<s1>|<s2>
<s1>和<s2> 是两组xpath选择器

示例：
//p | //button  选择所有的p元素，button元素，等价于 p，button
//p | //span | //div 选择所有的p元素，span元素和div元素，等价于p，span，div

Tips:  css和xpath的表达式不能混用。
1
2
3
4
5
6
7
8
9
10
11
12

15、相邻兄弟选择器

1、使用场景：根据同级元素选择其他的同级元素。
2、表示方法
//*/following-sibling::*  选择*后面的兄弟元素  等价于  *~*
//*/preceding-sibling::*  选择*前面的兄弟元素

示例：
//*[@id='food']/span/following-sibling::p   选择span元素后面的兄弟元素p

//*[@id='food']/p/preceding-sibling::span   选择p元素前面的兄弟元素span

示例：span元素后面的第一个兄弟元素p
//*[@id='food']/span/following-sibling::p[1]   

示例：span元素后面的最远一个兄弟元素P
//*[@id='food']/span/following-sibling::p[last()]  

示例：span元素后面的第2到最后一个兄弟元素p
//*[@id='food']/span/following-sibling::p[position()>1]  

示例：p元素前面的第一个兄弟元素span
//*[@id='food']/p/preceding-sibling::span[1]

示例：p元素前面的最远的一个兄弟元素span
//*[@id='food']/p/preceding-sibling::span[last()]

示例：p元素前面的第2个到最前面的一个兄弟元素span
//*[@id='food']/p/preceding-sibling::span[position()>1]

示例：xpath表示相邻兄弟的方法
//*[@id=’food’]/following-sibling::div   
解释：
//*[@id=’food’]/ div   表示id为food的直接子元素的div，加上following-sibling::  就变成了id=food节点的相邻兄弟元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

16、前向兄弟选择器

1、指定某个元素前面的兄弟节点，CSS不支持此种方法；在xpath里可以用 preceding-sibling:: 来表示。

示例：xpath表示相邻兄弟的方法
//*[@id=’food’]/preceding-sibling::div  
1
2
3
4

17、父元素选择器

1、指定元素的父元素，CSS不支持此种方法。
2、使用场景：根据子元素定位父元素,当定位的元素没有特征，只有他的子节点有id这种特征。
3、表示方法：
//*/..  选择*的父元素，类似于linux中表示上层路径的方法。
示例：选择//p[@class="special"]的父元素
//p[@class="special"]/..

示例：选择//p[@class="special"]的父元素的父元素
//p[@class="special"]/../..

示例：
//*[@class='special']  （先找到这个元素）
//*[@class='special']/..  （获取父元素）依次类推，还可以获取父元素的父元素。
1
2
3
4
5
6
7
8
9
10
11
12
13

18、webelement相对定位法

以下两个方式效果是一样的：
food = driver.find_element_by_id("food")

1、加. 表示获取当前元素范围内的p元素
eles = food.find_elements_by_xpath('./p')

2、不加.表示获取整个html页面的p元素
eles = food.find_elements_by_xpath('/p')
eles = driver.find_elements_by_xpath('/p')
1
2
3
4
5
6
7
8
9

19、子元素选择-单选
WEB自动化_xpath中选择第几个子元素的方式

1、使用场景：选择属于其父元素的第n个某个类型的子元素。
2、表示方法：
//*[n] 表示选择*的父元素下面第n个*类型元素  
等价于 *:nth-of-type(n) 或 //*[position()=n]    

示例：
//p[2]， 选择p的父元素下的第二个p元素，等价于 p:nth-of-type(2)


倒数下标表示方法
1、使用场景：选择属于其父元素的倒数第n个某个类型的子元素。
2、表示方法：
//*[last()-n] 表示选择*的父元素下面倒数第n+1个*类型元素  等价于 *:nth-last-of-type(n)
或//*[position()=last()-n] 
示例：
//span[last()-1]    属于其父元素的倒数第二个span  等价于 span:nth-last-of-type(1)
//*[@id="food"]/span[last()]  #food元素下倒数第1个span
//*[last()-1]   父元素下的倒数第二个元素（不限定类型）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

20、子元素选择-多选

1、使用场景：选择属于其父元素的第m到n之间 某个类型的子元素。
2、表示方法：
//*[position()>1] 选择属于其父元素的第一个以后的*元素
//*[position()<last()-1] 选择属于其父元素的倒数第二之前的*元素

示例：
//*[@id="food"]/*[position() > last()-3]   选择#food下倒数第四个到最后一个元素
1
2
3
4
5
6
7