web自动化之元素定位手段工具

本文详细介绍了XPath和CSS选择器在网页元素定位中的各种表达式和用法,包括根节点、相对路径、属性选择、通配符等概念,并通过实例展示了如何利用这些表达式精准定位页面元素,如类名、ID、属性值等。此外,还对比了XPath和CSS选择器的优先使用策略。
摘要由CSDN通过智能技术生成

1、Xpath定位

表达式描述
/根节点
/ /相对路径
.当前路径
..返回上层
@选取属性

实例:

html/head/div
/html/div/
//div
//div/./.. 
//div[@name]  根据属性名定位
//div[@name='taoge']  根据属性名和属性值定位
//div[@name='taoge']/div[1]  定位第1个
//div[@name='taoge']/div[last()]  定位最后一个
//div[@name='taoge']/div[last()-1]  定位倒数第2个
//div[@name='taoge']/div[position()=5]  定位第5个
//div[@name='taoge']/div[position()>=5]  定位到大于等于第5个的
//span[i=1000]  根据标签内的值定位如:<i>1000</i>
//span[i>1000]  

通配符

通配符描述
*匹配任何元素节点
@*匹配任何属性节点
node()匹配任何类型的节点
//*  定位所有节点
/*   定位最外层节点
//tital[@*]  定位所有带有tital的节点元素
//*[@*]  定位所有标签中有属性的如: <link href="www.baidu.com"></link> 不是:<i></i>
//html/node()   只定位html的子标签一层,node()只代表任意一个节点
//html/node()/meta  与 //html/*/meta  定位的一样
//meta | //link  定位meta或者link节点放到一个集合中
(//textarea | //div)[@id='wrapper']
//*[text()='taoge']  定位标签之间的文本内容如:<i>taoge</i>

//*[starts-with(@name,"abc")]  定位属性name的值以abc开头的节点如:<div name="abcdefgh"></div>

//*[contains(@name,"cde")]  定位属性name的值包含abc的节点如:<div name="abcdefgh"></div>

//*[@name='taoge' and @class='xiaohong']  用户两个属性和值来定位节点

2、CSS选择器(优先使用)

.taoge  用类名来定位节点如:<div class="taoge"></div>
#taoge  用id名来定位节点如:<div id="taoge"></div>
*   定位所有节点
div   用标签节点p来定位如:<div></div>

div,link 定位div或者link节点放到一个集合中

div a   定位到div节点下所有的a节点,包括子节点、孙节点、重孙节点

div>a   只定位到div节点下子节点a

div+link  定位到div节点下面的link节点,div和link是同胞节点

[id]  定位到所有id属性的标签
[id='taoge']  用id名来定位节点如:<div id="taoge"></div>

[class]  定位到所有class属性的标签
[class='taoge']  用class名来定位节点如:<div class="taoge"></div>
[class~='taoge']  用class名中包含taoge来定位节点如:<div class="taoge xiaohong"></div>

[type]  定位到所有type属性的标签  <div type="taoge"></div>
[type='taoge']  用type属性值来定位节点如:<div type="taoge"></div>

[name|='taoge']  定位name属性值以taoge开头如:<div name="taoge-ceshi"></div>

div[src^="http:"]  定位src属性值前缀是http:的如:<div src="http://www.taoge.js"><div>
div[src$="js"]  定位src属性值后缀是js的如:<div src="http://www.taoge.js"><div>
div[src*="taoge"]  定位src属性值包含taoge的如:<div src="http://www.taoge.js"><div>

p:only-child  定位子节点只有p节点
div:only-child  定位子节点只有div节点

div>p:nth-child(2)  定位div的第二个子节点p
div>a:nth-child(2)  定位div的第二个子节点a

div>*:nth-last-child(3)  定位div的倒数第三个节点

:empty  定位所有没有子节点的节点
div:empty  定位所有没有子节点的div节点

#taoge:target  定位当前活动的#taoge节点

input:enabled  定位所有开启的input节点
input:disabled  定位所有禁用的input节点

input:checked  定位所有选中的input节点

:not(p)  定位所有不是p的节点

a.taoge:nth-child(2)  定位所有a节点包含类名taoge的第二个节点如:
<a class="xiaolv"></a>
<a class="taoge"></a>
<a class="xiaolan"></a>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值