XPath和CSS定位

思考？

1. 在实际项目中标签没有id、name、class属性改如何定位？
2. id、name、class属性值为动态获取，随着刷新或加载而变化，改如何定位？
   

1. 什么是Xpath？

• XPath即为XML Path 的简称，它是一种用来确定XML文档中某部分位置的语言。 HTML可以看做是XML的一种实现，所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。
• XML：一种标记语言，用于数据的存储和传递。 后缀.xml结尾
  提示：Xpath为强大的语言，那是因为它有非常灵活定位策略；
  
• 查找某个特定的节点
  
• 选择未知节点
  
• 选取若干路径
  

2. Xpath定位策略(方式)

1. 路径-定位 1). 绝对路径 2). 相对路径
2. 利用元素属性-定位
3. 层级与属性结合-定位
4. 属性与逻辑结合-定位

Xpath定位 方法driver.find_element_by_xpath()

2.1 路径

• 绝对路径：从最外层元素到指定元素之间所有经过元素层级路径 ；如:/html/body/div/p[2]
  提示：
  1). 绝对路径以单斜杆/开始 ,中间不能跳跃元素
  2). 使用Firebug可以快速生成元素XPath绝对路径
• 相对路径：从第一个符合条件元素开始(一般配合属性来区分)；如：//input[@id='userA']
  提示：
  1). 相对路径以//开始 , 后面必须跟标签名称或*
  2). 使用Firebug扩展插件FirePath可快速生成，元素相对路径

2.2利用元素属性

说明：快速定位元素，利用元素唯一属性； 需用@修饰属性
示例：//input[@id='userA']

2.3 层级与属性结合

说明：要找的元素没有属性，但是它的父级有；
示例：//*[@id=‘p1’]/input

2.4 属性与逻辑结合

说明：解决元素之间相同属性重名问题
示例：//*[@id=‘telA’ and @class=‘telA’]

2.5 Xpath-延伸

//*[text()="xxx"]                          #  文本内容是xxx的元素
//*[starts-with(@attribute,'xxx')]           # 属性以xxx开头的元素
//*[contains(@attribute,'xxx')]               # 属性中含有xxx的元素

2.6 Xpath-总结

1. 如何通过Friebug快速生成绝对路径
   在HTML选项,使用快速定位工具定位要生成路径的元素;
   选中代码(蓝色),右击鼠标选择"复制xpath"选项
2. 如何通过Friebug快速生成相对路径
3. Xpath策略有那些

---

3. CSS定位

在CSS语言中有CSS选择器(不同的策略选择元素)，在Selenium中也可以使用这种选择器；
提示：

1. 在selenium中极力推荐CSS定位，因为它比XPath定位速度要快
2. .css选择器语法非常强大

3.1 CSS定位 方法
driver.find_element_by_css_selector()

3.2CSS定位常用策略 (方式)

1. id选择器
   说明：根据元素id属性来选择
   格式：#id 如：#userA --选择id属性值为userA的元素

2. class选择器
   说明：根据元素class属性来选择
   格式：.class 如：.telA --选择class属性值为telA的元素

3. 元素选择器
   说明：根据元素的标签名选择
   格式：element 如：input --选择所有input元素

4. 属性选择器
说明：选取标签带有某些特殊属性的选择器
格式：[attribute=“value”] 如：input[type="password"] --选择type属性值为password的input标签

5. 层级选择器

• 子元素选择器
  如：p>input
• 后代选择器 .class h3
  
  3.3 CSS延伸
  input[type^=‘p’] 说明：type属性以p字母开头的元素
  input[type$=‘d’] 说明：type属性以d字母结束的元素
  input[type*=‘w’] 说明：type属性包含w字母的元素
  
  
  

XPath与CSS比较

定位方式	XPath	CSS
元素名	//input	input
id	//input[@id=‘userA’]	#userA
class	//*[@class=‘telA’]	.telA
属性	//*[text()="xxx"] ; //*[starts-with(@attribute,'xxx')] ; //*[contains(@attribute,'xxx')]	input[type^=‘p’] ; input[type$=‘d’] ; input[type*=‘w’]

定位(另一种写法)-延伸【了解】

WebDriver推荐 find_element_by_xxx()这种方法

说明：第二种方法使用By类的封装的方法,所以需要导入By类包

• 导入By类
  from selenium.webdriver.common.by import By
• By类的方法
  方法：find_element(By.ID,"userA")
  备注：需要两个参数，第一个参数为定位的类型由By提供，第二个参数为定位的具体方式

示例：

#1
 driver.find_element(By.CSS_SELECTOR,'#emailA').send_keys("123@126.com")    
#2
driver.find_element(By.XPATH,'//*[@id="emailA"]').send_keys('234@qq.com')    
#3
driver.find_element(By.ID,"userA").send_keys("admin") 
#4 
 driver.find_element(By.NAME,"passwordA").send_keys("123456")    
#5
 driver.find_element(By.CLASS_NAME,"telA").send_keys("18611111111")  
#6 
  driver.find_element(By.TAG_NAME,'input').send_keys("123") 
#7   
   driver.find_element(By.LINK_TEXT,'访问 新浪 网站').click()  
#8  
   driver.find_element(By.PARTIAL_LINK_TEXT,'访问').click()