元素定位之XPath定位-学习

最新推荐文章于 2024-04-28 18:07:58 发布

zyg_2015

最新推荐文章于 2024-04-28 18:07:58 发布

阅读量1.5k

点赞数 3

文章标签： selenium

本文链接：https://blog.csdn.net/qq_28807911/article/details/132056287

版权

一、XPath语法简介

XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在 XML 和 HTML 文档中选择节点的语言。

目前主流浏览器 (chrome、firefox，edge，safari) 都支持XPath语法，XPath有 1 和 2 两个版本，目前浏览器支持的是 XPath 1的语法。

为什么要学习 Xpath呢？因为

有些场景用css、id... 选择web元素很麻烦，而XPath 却比较方便。

另外 XPath 还有其他领域会使用到，比如爬虫框架 Scrapy，手机App框架 Appium。

真正在实际工作中，只有xpath和css的定位方式是可以用来做项目的。那我们应该选择哪个来运用到我们的项目呢？那我来告诉大家：习惯哪个就用哪个，或者把两者结合起来也行。CSS的语法比较简洁，运行速度稍快，但总体来讲，因为xpath的功能更多，更强大，而且xpath可以根据文字来定位，这个是比较强大的。

分享XPath的原因：由于XPath在UI自动化中使用的频率较高，有必要学习。

练习代码：


<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Xpath选择</title>
    </head>
    <style>
        /**{margin: 0; padding: 0;}*/
        body{width: 600px; height: 1000px; margin: 0 auto;}
        body{line-height: 30px;}
        h3{color: brown;}
        h4{color: rgb(22, 118, 173)}
        .select_city{color: brown; font-weight: bold;}
        select option{line-height: 30px;}
    </style>
    <body>
        <h3>select框</h3>
        <div>
        <h4>单选</h4>
        <p>姓名:</p>
        <select class="choose_1" >
            <option value="小江老师">小江老师</option>
            <option value="小雷老师">小雷老师</option>
            <option value="小凯老师" selected="selected">小凯老师</option>
        </select>            
        <h4>多选</h4>
        <p>课程:</p>
        
        <select  class="choose_2" multiple>
          <option value="小江老师">小江老师</option>
          <option value="小雷老师">小雷老师</option>
          <option value="小王老师">小王老师</option>
          <option value="小凯老师" selected="selected">小凯老师</option>
        </select> 
        
           <p class="select_city">城市选择</p>
           <div id="china">
               <p id="beijing" class='capital huge-city'>北京</p>
               <div><p>深圳</p></div>
               <p id="shanghai" class='huge-city'>上海</p>       
           </div>
           <div id="us">
               <span id="west" style="color:darkgreen">
                   <a id="newyork">纽约</a>
                   <a id="huston">休斯顿</a>
               </span>
               <span id="east" style="color:darkred">
                   <a id="chigaco">芝加哥</a>
               </span>
           </div>
        </div>
        <form action="" method="post">
              <h4>登录模块</h4>
              <p><span name='user'>账号</span><input type="text" name="user" id="user" value="1" placeholder="请输入账号" /></p>
              <p><span>密码</span><input type="password" name="pwd" id="" placeholder="请输入密码" /></p>
              <button><span>登录</span></button>
        </form>
      </body>
    </html>

在浏览器中按F12打开调试窗口，点击 Elements（元素）标签。

要验证 XPath 语法是否能成功选择元素，按组合键 Ctrl + F ，就会出现搜索框

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

/html

如果输入下面的表达式

/html/body/div

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

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

1、绝对路径选择

从根节点开始的，到某个节点，每层都依次写下来，每层之间用 / 分隔的表达式，就是某元素的 绝对路径

上面的XPath表达式 /html/body/div ，就是一个绝对路径的XPath表达式，等价于 css表达式 html>body>div

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

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

2、相对路径选择

有的时候，我们需要选择网页中某个元素， 不管它在什么位置 。

比如，选择示例页面的所有标签名为 div 的元素，如果使用css表达式，直接写一个 div 就行了。

那XPath怎么实现同样的功能呢？ XPath需要前面加 // , 表示从当前节点往下寻找所有的后代元素，不管它在什么位置。

所以XPath表达式，应该这样写： //div

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

对应的自动化中元素定位如下

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

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

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

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

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

如果，要选择所有的 div 元素里面的直接子节点 p ， XPath就应该这样写了 //div/p

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

3、通配符

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

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

代码如下：

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

二、根据属性选择

XPath 可以根据属性来选择元素。

根据属性来选择元素是通过这种格式来的 [@属性名='属性值']

注意：

属性名注意前面有个@
属性值一定要用引号，可以是单引号，也可以是双引号

1、根据id属性选择

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

2、根据class属性选择

选择所有 select 元素中 class为 choose_1 的元素，可以这样 //select[@class='choose_1']

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

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

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

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

//p[@class="capital huge-city"]

3、根据其他属性

同样的道理，我们也可以利用其它的属性选择

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

//*[@multiple]

4、属性值包含字符串

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

要选择 style属性值以 color 字符串开头的页面元素，可以这样 //*[starts-with(@style,'color')] 、 //*[starts-with(@style,'c')] 写开头的一部分就可以

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

//*[contains(@style,'color')]
//*[starts-with(@style,'color')]
//*[starts-with(@style,'c')]

实际项目地址（内网环境项目互联网无法访问）：http://192.168.1.171/

//input[@placeholder="请输入用户名"]

# 匹配input标签包含type属性的值
//input[contains(@type, 'password')]  
//input[contains(@type, 'pa')] # 写一部分也是可以的

# 匹配 当文字中存在广州市 就满足
//div[@role='combobox']/div/div[contains(text(), '广州市')]
//div[contains(text(), '广州市')]

# 匹配a标签包含href属性的值
//a[contains(@href, 'news')]

# 匹配开始字段，ends-with方法不可用
//a[starts-with(@href,'https')]

# 匹配 当class中含有input 就满足条件
//input[contains(@class, 'input')]

在 XPath 中，可以使用 * 选择未知的节点，例如 //div/*/span，表示选择 div 节点下所有节点的 span 节点。

三、按次序选择

css表达式可以根据元素在父节点中的次序选择，非常实用。使用 nth-child， span:nth-child(2) 选择的是第2个子元素，并且是span类型

xpath也可以根据次序选择元素。语法比css更简洁，直接在方括号中使用数字表示次序

span:nth-child(2)

1、某类型第几个子元素

比如

要选择 span类型第2个的子元素，就是

//span[2]

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

再比如，要选取父元素为div 中的 p类型第2个子元素

//div/p[2]

2、第几个子元素

也可以选择第2个子元素，不管是什么类型，采用通配符

比如选择父元素为div的第2个子元素，不管是什么类型

//div/*[2]

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

当然也可以选取倒数第几个子元素

比如：

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

//p[last()]

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

//p[last()-1]

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

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

xpath还可以选择 当前节点的 所有后代元素（子、孙等），用这样的语法 descendant::

比如，要选择 id 为 china 的元素的子、孙等节点 p，这样写

//*[@id='china']/descendant::p

4、范围选择

xpath还可以选择子元素的次序范围。

比如，

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

//option[position()<=2]

或者

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

//option[position()<3]

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

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

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

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

为什么不是 last()-3 呢？因为

last() 本身代表最后一个元素

last()-1 本身代表倒数第2个元素

last()-2 本身代表倒数第3个元素

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

1、组选择

css有组选择，可以同时使用多个表达式，多个表达式选择的结果都是要选择的元素

css 组选择，表达式之间用逗号隔开

XPath也有组选择，是用竖线隔开多个表达式

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

//option | //h4

等同于CSS选择器

option , h4

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

//*[@class='choose_1'] | //*[@class='choose_2']

等同于CSS选择器

.choose_1 , .choose_2

2、选择父节点

XPath可以选择父节点，这是css做不到的。

某个元素的父节点用 /.. 表示

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

当某个元素没有特征可以直接选择，但是它有子节点有特征，就可以采用这种方法，先选择子节点，再指定父节点。

还可以继续找上层父节点，比如 //*[@id='china']/../../..

//*[@id='china']/.. 
//*[@id='china']/../../..

XPath还可以选择 当前节点的 父级节点，用这样的语法 parent::

比如，要选择 id 为 china 的元素的父级节点div，这样写

//*[@id='china']/parent::div

3、兄弟节点选择

css选择器，要选择某个节点的后续兄弟节点，用 波浪线

xpath也可以选择后续兄弟节点，用这样的语法 following-sibling:: /ˈfɑːloʊɪŋ-ˈsɪblɪŋ/

比如，要选择 class 为 choose_1 的元素的所有后续兄弟节点 //*[@class='choose_1']/following-sibling::*

等同于CSS选择器 .choose_1 ~ *

如果，要选择后续节点中的div节点，就应该这样写 //*[@class='choose_1']/following-sibling::div

XPath还可以选择 前面的 兄弟节点，用这样的语法 preceding-sibling:: /prɪˈsiːdɪŋ-ˈsɪblɪŋ/

比如，要选择 class 为 choose_1 的元素的所有前面的兄弟节点，这样写

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

XPath也可以选择文档中当前节点的结束标签之后的所有节点，用这样的语法 following::

比如，要选择 p 元素的结束标签之后的所有 option 节点 //p/following::option

//p/following::option

XPath也可以选择文档中当前节点的开始标签之前的所有节点，用这样的语法 preceding::

比如，要选择 p 元素的结束标签之前的所有 option 节点 //h4/preceding::option

//h4/preceding::option

而 CSS选择器目前还没有方法选择 前面的 兄弟节点

要了解更多Xpath选择语法，可以点击这里，打开Xpath选择器参考手册

五、XPath 汇总

1、依靠自己的属性，文本定位

//span[text()='登录'] 
//div[contains(@class,'select_city')]
//input[@type='radio' and @value='1']     多条件
//span[@name='user'][text()='账号'][1]   多条件
//span[@id='user' or text()='账号']  找出多个
//span[text()='账号' or text()='密码']  找出多个

2、依靠父节点定位

//div[@class='x-grid-col-name x-grid-cell-inner']/div
//div[@id='dynamicGridTestInstanceformclearuxformdiv']/div
//div[@id='test']/input

3、依靠子节点定位

//div[div[@id='navigation']]
//div[div[@name='listType']]
//div[p[@name='testname']]

4、混合型

//div[div[@name='listType']]//img
//td[a//font[contains(text(),'Xpath 视频')]]//input[@type='checkbox']

5、进阶部分

//input[@id='test']/following-sibling::input   找下一个兄弟节点
//input[@id='test']/preceding-sibling::span    上一个兄弟节点
//input[starts-with(@id,'test')]               以什么开头
//span[not(contains(text(),'xpath')）]        不包含xpath字段的span

6、索引

//div/input[2]
//div[@id='position']/span[3]
//div[@id='position']/span[position()=3]
//div[@id='position']/span[position()>3]
//div[@id='position']/span[position()<3]
//div[@id='position']/span[last()]
//div[@id='position']/span[last()-1]

7、substring 截取判断

//*[substring(@id,4,5)='Every']/@id  截取该属性 定位3,取长度5的字符
//*[substring(@id,4)='EveryCookieWrap']  截取该属性从定位3 到最后的字符
//*[substring-before(@id,'C')='swfEvery']/@id   属性 'C'之前的字符匹配
//[substring-after(@id,'C')='ookieWrap']/@id   属性'C之后的字符匹配8.通配符
//span[@*='bruce']
//*[@name='bruce']

8、轴

//div[span[text()='测试']]/parent::div    找父节点
//div[span[text()='测试']]/ancestor::div    找祖先节点

9、孙子节点

//div[span[text()='测试']]/descendant::div/span[text()='测试']
//div[span[text()='测试']]//div/span[text()='测试']          两个表达的意思一样

Xpath定位方式的缺点

由于xpath需要遍历页面，所以定位元素的性能要比其它的方式差

不够健壮，xpath会随着页面元素的改变而改变

兼容性不好，在不同的浏览器下对xpath的实现不一样

zyg_2015

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
元素定位之XPath定位-学习

XPath (XML Path Language) 是由国际标准化组织W3C指定的，用来在 XML 和 HTML 文档中选择节点的语言。目前主流浏览器 (chrome、firefox，edge，safari) 都支持XPath语法，XPath有 1 和 2 两个版本，目前浏览器支持的是 XPath 1的语法。为什么要学习 Xpath呢？因为真正在实际工作中，只有xpath和css的定位方式是可以用来做项目的。那我们应该选择哪个来运用到我们的项目呢？
复制链接

扫一扫