Selenium定位—XPath
XPath定位
浏览器检查元素定位方法
示例:https://www.12306.cn/index/index.html
定位,出发地输入框元素
- 在Console输入 $x() ,括号中填写XPath定位语句
-
查询结果显示为1条
-
如图:输入 $x('//*[@id="fromStationText"]') ,点击回车,即可显示查询结果
鼠标放在查询结果 0: 上面,则会在web界面上高亮显示该位置
鼠标点击查询结果 0: ,则会跳到 Elements 界面,并高亮显示定位的元素
-
- 查询结果显示为多条
如图:输入 $x('//*[@class="form-bd"]/div[@class="input-box input-city"]/input') ,点击回车,即可查看查询结果
当结果不唯一时,就需要重新找到唯一定位
-
在 Elements 界面,键盘点击 Ctrl + F ,在查询框内输入 XPath 语句
- 查询结果显示为1条
如图:输入 //*[@id="fromStationText"] ,若存在该元素,则定位到该元素位置,并高亮显示
查询结果如果只有一条,则会显示 1 of 1
-
- 查询结果显示为多条
如图:输入 //*[@class="form-bd"]/div[@class="input-box input-city"]/input 即可查看查询结果
当结果不唯一时,会高亮显示第一个结果,查询结果处 1 of 12 是指,该查询结果共 12 个,当前高亮显示为第 1 个
我们清楚了,在浏览器检查元素的定位方法,那么就开始我们的XPath的定位之旅吧
XPath是什么?
- XPath 使用路径表达式在 XML 文档中进行导航
- XPath 包含一个标准函数库
- XPath 是 XSLT 中的主要元素
- XPath 是一个 W3C 标准
简单理解,就是通过元素的路径来查找(定位)该元素
说到路径,我们直接就能想到 相对路径 和 绝对路径
- 绝对路径:从根目录(根节点)出发,来定位(通往)某一元素的路径
- 相对路径:从当前目录(当前节点),来定位(通往)某一元素的路径
我们应当如何表示根节点和当前节点?
以百度首页为例,定位输入框元素:
- 根节点( / ):/html/body/div/div/div/div/div/form/span/input
/ 表示 某一节点的直接子节点,如果以 / 开头,表示根节点的直接子节点有且只有一个 html
一般不建议使用
- 当前节点( // )://span/input
// 表示非直接子节点
- 通配符( * )://form/span/*
* 表示通配符,可理解为全部=====>即form的直接子节点span下面所有的元素
定位方法:
-
根据属性及属性值定位
-
语法://标签名[@属性名=“属性值”]
-
注意:@必不可少
-
以百度首页输入框示例:
-
//input[@id="kw"]
-
//input[@class="s_ipt"]
-
//input[@name="wd"]
-
//input[@type="text"]
-
//input[@maxlength="100"]
-
......
-
-
-
根据属性定位结果如果存在多条,可使用序号来准确定位
-
以百度首页 消息 为例:
-
//div[@id="s_icons"]/a[@onclick="return false;"] 结果显示为2条,消息在第2条中
-
//div[@id="s_icons"]/a[@onclick="return false;"][2] 准确定位到该元素信息
-
-
-
根据文本信息定位
-
以百度首页 消息 为例:
-
准确定位
-
//div//span[text()="消息"]
-
-
-
-
-
-
模糊定位
-
//div//span[contains(.,'消')] 当前节点包含 “消”
-
-
-
-
-
-
- //div//span[contains(text(),'消')] 当前节点的text(0属性包含“消”
- //div//span[contains(@class,'title')] 当前节点的class属性包含了属性值“title”
-
-
- 通过子元素选择
-
-
选择属于其父元素的第N个某个 类型 的子元素
-
限定元素://*[@id="form"]/span[2]
-
选择 id="form" 的子元素为span的第2个元素
-
-
-
-
-
-
不限定元素://*[@id="form"]/*[2]
-
选择 id="form" 的第2子元素
-
-
-
-
-
选择属于其父元素的倒数第n个 类型 的子元素
-
//*[@id="form"]/span[last()]
-
选择 id="form" 的子元素为span的倒数第1个元素
-
-
-
-
-
-
//*[@id="form"]/span[last()-1]
- 选择 id="form" 的子元素为span的倒数第2个元素
-
-
-
-
通过子元素,定位其兄弟元素
-
有时候,我们可以定位到某一子元素,但我们想要操作该子元素附近的元素,而此时父元素无法准确定位,我们可以通过子元素查找父元素
-
例:无法定位父元素时,需要操作第3个input
-
//*[@type="hidden"]/../input[3] 可以通过 /.. 返回到父元素
-
-
-
-
结合逻辑运算符定位(and or)
-
以百度输入框为例:
-
//input[@class="s_ipt" and @id="kw"]
-
-
相关注意点:
-
优先使用 id
-
操作 id 时,注意 id 是否为动态,如果为动态,则避免使用
-
定位元素一定要做到精准定位(唯一定位结果)
-
通过下标定位,尽量少的使用