3.5 WEB自动化 --- Xpath定位方式

一、 Xpath（XML Path Language）相关概念

 是W3c定义的用来在XML文档中选择节点的语言

 主流浏览器也支持Xpath

 对于浏览器原声支持XPATH，Selenium尽量使用原声的Xpath实现，有些浏览器也支持Xpath访问

 xpath的语法类似与电脑文件系统的路径

二、 绝对定位与相对定位

绝对定位: 从根目录开始，以“/”开头，严格按照层级，同级元素位置： 太死，容错性差
相对定位： 不依靠位置和层级，只需要一个参照物，根据这个参照物，来确定指定元素的位置
           根据自身特征
           绝对位置是： /html/body/div[2]/div/form/div[1]/input
           相对位置是： //input[@name='phone']
                        格式： //标签名[@属性名=“属性值”]  标签名如果是*，就代表找属性符合的，不管在那个标签下
           多条件相对位置写法： //标签名[@属性名1=“属性值1” and @属性值2=“属性值2”]

 

 三、依赖其他元素来定位&轴定位

1） 当依靠元素本身属性无法精确找到，那么需要借助父级元素
        //div[@id="kk"]//div[@name='kww']
2)  通过文本定位   //a[text()=="" and 其他条件]
3） 包含定位-contains(text()/@属性，‘被包含内容’)
       //a[contains(@href,'wwww') and @name='kkk']

轴定位： 当通过自身内容无法获取到元素时，需要追溯到父元素或者父父元素，进而找到指定元素
     ancestor : 祖先节点，包括父
     parent: 父节点
     processing : 当前元素节点标签之前的节点
     preceding-sibling: 当前元素的节点标签之前的所有兄弟节点
     following: 当前元素节点标签之后的节点
     following-sibling: 当前元素的节点标签之后的所有兄弟节点
     使用语法： 
            /轴名称：：节点名称[@属性=值]
            //div//table//preceding::td
     较多的应用场景：
            页面显示为一个表格样式的数据列，需要通过组合来定位元素

        # 轴定位
        # 当前元素
       ele_loc = "//td[@class='name' and contains(text(),'Lujier002')]"
        
        # 1. 获取表中学生名字是Lujier002的祖先节点
        ancestor_loc = ele_loc + "/ancestor::*"  # 所有祖先节点
        ancestor_part_loc = ele_loc + "/ancestor::tbody"  # 指定标签的祖先节点
        
        # 2. 获取表中学生名字是Lujier002的父节点
        parent_loc = ele_loc + "/parent::tr"  # 父节点
        
        # 3. 获取表中学生名字是Lujier002节点之前所有节点
        all_before_ele_loc = ele_loc + "/preceding::*"  # 当前节点之前所有节点
        # 4. 获取表中学生名字是Lujier002节点之前兄弟节点
        brother_before_locs = ele_loc + "/preceding-sibling::*"  # 当前节点之前兄弟节点
        
        # 5. 获取表中学生名字是Lujier002节点之后所有节点
        all_folling_ele_loc = ele_loc + "/following::*"  # 当前节点之后所有节点
              
        # 6. 获取表中学生名字是Lujier002节点之后兄弟节点
        brother_following_locs = ele_loc + "/following-sibling::*"  # 当前节点之后兄弟节点

 

四、常用用法

//div/*                                   选择div下面所有的元素
//*[@style]                              选择所有具有style属性的元素
//p[2]                                   选择标签是p的所有元素中的第2个子元素
//*[@id="food"]/*[position()<3]          food的前两个元素
//*[@id="food"]/*[position()<=3]         food的前三个元素
//*[@id="food"]/span[last()]     获取id=food元素下Span子元素的倒数第1个元素
//*[@id="food"]/*[position()>last()-3]   #表示food后三个元素 2，1，0
//*[@id="food"]/*[position()>=last()-3]   #表示food后四个元素  3，2，1，0
//*[@id="food"]/following-sibling::div    从food开始，属性为div的兄弟元素（不包含food栏）
//*[@id="food"]/preceding-sibling::div    找id=food属性前属性为div的兄弟元素（不包含food栏）
//*[@id="food"]/following-sibling::*[1]   找紧随id=food属性的兄弟元素中的第一个


选择属于其父元素的倒数第n个：
  //span[last()-1]                 属于其父元素的倒数第二个span元素

五、 Xpath验方法

1.     element tab中

2.  console中,$x("xpath表达式")

 

六、总结：

1. 相对定位

//        匹配指定节点，不考虑元素位置
*         通配符，匹配任意元素节点
@         选取属性  
[]        属性判断条件表达式
and       多属性定位//input[@class='kw' and @id="su"] 
text()    文本匹配（全文本）  （<tag> 文本内容 </tag>），如： //*[text()="更多"]
contains  部分匹配,（<tag> 文本内容 </tag>），如： //*[contains(text(),"局部文本")]
not(@属性名)  不包含某属性的元素

如:  

相对定位优点： 灵活，方便，耦合性低

2. 轴定位

1. 先找到与该元素有关系的周围元素 -- 唯一
2. 再通过该元素与找到的元素的关系来获取该元素
下方以12306为例：
https://kyfw.12306.cn/otn/leftTicket/init?linktypeid=dc&fs=%E8%A5%BF%E5%AE%89,XAY&ts=%E6%9D%AD%E5%B7%9E,HZH&date=2020-09-14&flag=N,N,Y

轴定位举例：

1） 获取G1884的出发站到达站信息

       a. 先定位到G1884行（即G1884）

          

 

b.  对比G1884元素跟出发站到达站列信息的显示关系

通过上图，可看到，目的元素是： 已定位的元素的祖父节点的下一个兄弟元素的子元素，则表达式如下：