xpath定位元素详解

                                          通过xpath定义元素

一 、appache的安装

学习网站推荐W3school

步骤一：安装appache:httpd.exe -k install

 

步骤二：把xpath.html文件放到htdocs目录下面，然后运行：127.0.0.1/xpath.html

 

xpath.html源码如下：

 

<html>

<head><title>光荣之路测试网页</title></head>

<body>

<div id=div1>

<p>今天天气不错</p>

<p>挺风和日丽的</p>

<p>我们下午没有课</p>

</div>

<div id=div2 name="wulaoshidiv">

<p>今天天气不错<span>但是我在上课</span></p>

<p>挺风和日丽的</p>

<p>我们下午没有课<input type = text>文本内容</input></p>

</div>

 

</body>

</html>

 

备注：卸载：httpd -k uninstall -n apache2.4   

1.1 安装常见错误

httpd -n Apache2.4 –t

httpd -k start

 

 

 

 

 

二、如何定位元素

2.1 绝对路径定位

绝对路径：【页面路径不变】

/html/body/div[2]

 

2.2 相对路径定位

相对路径：

//div[2]

 

2.3 绝对和相对路径混合

两者混用

/html//div[2]

 

三、常用定位方式

//*     找所有的

//input    查询输入框的

//*[@*]   有属性的所有元素

//*[@id]    有id属性的所有元素

//*[@id="div1"]      #定位唯一一个div

 

3.1 文本定位

//*[.='挺风和日丽的']    #文本定位

//div[@id='div1']/*[.='挺风和日丽的']    

 

3.2 必杀技能一：两个属性组合定位

//*[@id="div2" and @name="wulaoshidiv"]    #两个属性组合定位    【必杀技能1】

 

//*[@id="div1" or @name="wulaoshidiv"]     #或者

//*[@id!="div1"]     #不等于

 

3.3 必杀技能二：包含

//*[contains(@name,"wulao")]    #包含一部分值【必杀技能二】

 

//div[@id='div1']/*[contains(.,"风")]

 

//div[@id='div1']/p[3]

 

//div[@id='div1']/p[last()]

 

3.4 必杀技能三：匹配数字

xpath.html源码：

<html>

<head><title>光荣之路测试网页</title></head>

<body>

<div id=div1>

<p>今天天气不错</p>

<p>挺风和日丽的</p>

<p>我们下午没有课</p>

</div>

<div id=div2 name="wulaoshidiv">

<p>今天天气不错<span>但是我在上课</span></p>

<p>挺风和日丽的</p>

<p name="name10">10</p>

<p name="name20">20</p>

<p name="name30">30</p>

<p name="name40">40</p>

<p name="name50">50</p>

<p name="name60">60</p>

<p>我们下午没有课<input type = text>文本内容</input></p>

</div>

</body>

</html>

 

如何匹配：

//p[.>=20]    #匹配数字【必杀技能3】

 

//p[.=20]

 

//p[.!=20]    或者//p[text()!=20]

 

 

3.5 定位上一级

//div[@id='div1']/*

//div[@id='div1']/p[1]/..     #上一级

 

3.6 找同级或者祖先节点

//p[.='50']/preceding-sibling::p[1]    #同级向前走

 

//p[.='40']/following-sibling::p[1]    #同级向后走

 

 

//p[.='40']/parent::div     #上级div

 

//p[.='40']/ancestor::div    #找祖先节点

 

//p[.='40']/ancestor::div/preceding-sibling::div    #找祖先节点的上一节点

 

3.7 找下一级

//*[@id='div1']/child::p[1]    #向下找

 

四、实践

找到下列网站的输入框和按钮元素

www.baidu.com

//*[@id="kw"]  或者//input[@id='kw']

//*[@id="su"]

https://www.sogou.com/

//*[@id="query"]

//*[@id="stb"]

https://cn.bing.com

//*[@id="sb_form_q"]

//*[@id="sb_form_go"]