自动化测试-Xpath

用路径方式来选择我们的元素

xpath 语法中，整个HTML文档根节点用’/‘表示，如果我们想选择的是根节点下面的html节点，则可以在搜索框输入

/html
1

如果输入下面的表达式

/html/body/div
1

这个表达式表示选择html下面的body下面的div元素。

注意 / 有点像 CSS中的 > , 表示直接子节点关系。

绝对路径选择

自动化程序要使用Xpath来选择web元素，应该调用 WebDriver对象的方法 find_element_by_xpath 或者 find_elements_by_xpath，像这样：

elements = driver.find_elements(By.XPATH, "/html/body/div")
1

相对路径选择

‘//’ 符号也可以继续加在后面,比如，要选择 所有的 div 元素里面的 所有的 p 元素 ，不管div 在什么位置，也不管p元素在div下面的什么位置，则可以这样写 //div//p

对应的自动化程序如下

elements = driver.find_elements(By.XPATH, "//div//p")
1

如果使用CSS选择器，对应代码如下

elements = driver.find_elements(By.CSS_SELECTOR,"div p")
1

要选择 所有的 div 元素里面的 直接子节点 p ，

xpath就应该这样写了 //div/p

如果使用CSS选择器，则为 div > p

---

通配符

如果要选择所有div节点的所有直接子节点，可以使用表达式 //div/*

• 是一个通配符，对应任意节点名的元素，等价于CSS选择器 div > *

代码如下：

elements = driver.find_elements(By.XPATH, "//div/*")
for element in elements:
    print(element.get_attribute('outerHTML'))
1
2
3

---

根据id属性选择

选择 id 为 west 的元素，可以这样 *[@id='west']

根据class属性选择

选择所有 select 元素中 class为 single_choice 的元素，可以这样

//select[@class='single_choice']
1

如果一个元素class 有多个，比如

<p id="beijing" class='capital huge-city'>
    北京    
</p>
1
2
3

如果要选 它， 对应的 xpath 就应该是 p[@class="capital huge-city"]

不能只写一个属性，像这样 p[@class="capital"] 则不行

选择所有

比如选择 具有multiple属性的所有页面元素 ，可以这样 *[@multiple]

---

属性值包含字符串

要选择 style属性值 包含 color 字符串的 页面元素 ，可以这样 [contains(@style,'color')]

要选择 style属性值 以 color 字符串 开头 的 页面元素 ，可以这样 [starts-with(@style,'color')]

要选择 style属性值 以 某个 字符串 结尾 的 页面元素 ，大家可以推测是 /ends-with(@style,‘color’)]， 但是，很遗憾，这是xpath 2.0 的语法 ，目前浏览器都不支持

---

按次序选择

1.某类型 第几个 子元素

p[2]
1

选择的是 p类型第2个的子元素 ， 不是 第2个子元素，并且是p类型 。

2.第几个子元素

//div/*[2]
1

3.某类型 倒数第几个 子元素

选取p类型倒数第1个子元素

//p[last()]
1

选取p类型倒数第2个子元素

//p[last()-1]
1

选择父元素为div中p类型倒数第3个子元素

//div/p[last()-2]
1

---

范围选择

选取option类型第1到2个子元素

//option[position()<=2]
1

选择class属性为multi_choice的前3个子元素

//*[@class='multi_choice']/*[position()<=3]
1

选择class属性为multi_choice的后3个子元素

//*[@class='multi_choice']/*[position()>=last()-2]
1

---

组选择、父节点、兄弟节点

1.组选择

比如，要选所有的option元素 和所有的 h4 元素，可以使用

//option | //h4
1

再比如，要选所有的 class 为 single_choice 和 class 为 multi_choice 的元素，可以使用

//*[@class='single_choice'] | //*[@class='multi_choice']
1

2.选择父节点

比如，要选择 id 为 china 的节点的父节点，可以这样写 //*[@id='china']/.. 。

3.兄弟节点选择

比如，要选择 class 为 single_choice 的元素的所有后续兄弟节点

//*[@class='single_choice']/following-sibling::*
1

等同于CSS选择器

.single_choice ~ *
1

xpath还可以选择 前面的 兄弟节点，要选择 class 为 single_choice 的元素的 所有 前面的兄弟节点，这样写

//*[@class='single_choice']/preceding-sibling::*
1

要选择 class 为 single_choice 的元素的

前面最靠近的兄弟节点 , 这样写

//*[@class='single_choice']/preceding-sibling::*[1]
1

前面第2靠近的兄弟节点 , 这样写

//*[@class='single_choice']/preceding-sibling::*[2]
1

selenium 注意点

先选择示例网页中，id是china的元素然后通过这个元素的WebElement对象，使用find_elements_by_xpath，选择里面的p元素，

# 先寻找id是china的元素
china = wd.find_element(By.ID, 'china')

# 再选择该元素内部的p元素
elements = china.find_elements(By.XPATH, '//p')

# 打印结果
for element in elements:
    print('----------------')
    print(element.get_attribute('outerHTML'))
1
2
3
4
5
6
7
8
9
10

运行发现，打印的 不仅仅是 china内部的p元素， 而是所有的p元素。

要在某个元素内部使用xpath选择元素， 需要 在xpath表达式最前面加个点 .

像这样

elements = china.find_elements(By.XPATH, './/p')
1