xpath定位和css定位对比

xpath常见的定位方法

xpath定位和css定位对比

实际项目中使用较多的是xpath定位和css定位。XPath是XML文档中查找结点的语法，换句话就是通过元素的路径来查找这个元素。xpath比较强大，而css选择器在性能上更优，运行速度更快，语法上更简洁。比较两种方法：

直接子元素

XPATH中的直接子元素是使用“/”定义的，而在CSS上，它是使用“>”定义的。

XPATH：//div/input
CSS: div>input

后代元素

如果一个元素在另一个元素的内部（子元素或者孙元素），则它在XPATH中使用“//”定义，而在CSS中仅使用空格定义。

XPATH：//div//input
CSS: div input

ID定位

XPATH中的元素id使用以下内容定义："[@id=‘kw’]"，而在CSS中使用："#kw"。

XPATH：//input[@id='kw']
CSS: input#kw

CLASS定位

对于class属性，XPATH类似id，而CSS中用一个点表示。

XPATH：//input[@class="s_ipt"]
CSS: input.s_ipt

弟弟元素：following-sibling 继兄弟

这对于表单元素非常有用，即页面中位于同一父节点内的下一个相邻元素。

XPATH：//input[@class="s_ipt"]/following-sibling::a
CSS：input[class="s_ipt"]+a

哥哥元素：preceding-sibling 前兄弟

页面中位于同一父节点内的上一个相邻元素。

XPATH：//a[@name='tj_baike']/preceding-sibling::a
CSS：无法实现

父节点元素

页面中位于一个节点的上级元素。

XPATH: //input/parent
CSS: 无法实现

属性值

我们可以根据任何属性值定位元素。

XPATH: //input[@name='username']
CSS: input[name='username']

多个属性值

我们甚至可以通过多个属性来定位元素。

XPATH: //input[@name='rsv_spt' and @value="1"]
CSS: input[name='login'][type='submit']

第一个子元素

XPATH: //div[@id='u1']/a[1]
CSS: div#u1 a:first-child

最后一个子元素

XPATH: //div[@id='u1']/a[last()]
CSS: div#u1 a:last-child

第二个子元素

XPATH: //div[@id='u1']/a[2]
CSS: div#u1 a:nth-child(2)

模糊匹配

selenium中允许使用^=，$=或*=进行部分字符串匹配。

^=匹配前缀

XPATH: input[starts-with(@id,'user')]
CSS: input[id^='user']

$=匹配后缀

XPATH: input[ends-with(@id,'name')]
CSS: input[id$='name']

*=匹配包含

XPATH: input[contains(@id,'sernam')]
CSS: input[id*=sernam]

总之，以上两种方法至少需要熟练其中一种。

原创：https://mp.weixin.qq.com/s?src=11&timestamp=1561368664&ver=1688&signature=UnKlqCAnk0ZLSxgEKm7wqBpYK6b83hsYNeIpvWSEjCkki5COooor3Lpv5ddEoufc4Utcz8a-gYakP-NOHuc8E29YYzpSsNU4saiwz1nzOjX-zmjxJNziNKT7hFaQddWI&new=1
引用：
https://www.cnblogs.com/jingdenghuakai/p/11078401.html

xpath定位和css定位对比相关推荐

UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
UI自动化测试（二）浏览器操作及对元素的定位方法（xpath定位和css定位详解）...
Selenium下的Webdriver工具支持FireFox(geckodriver). IE(InternetExplorerDriver).Chrome(ChromeDriver). Opera( ...
wbe自动化测试----xpath定位与CSS定位
火狐插件安装插件 1. 2. 3. 4. 5.也可以直接搜索下载 2.3.1 xpath:属性定位 2.于是可以用以下xpath方法定位 2.3.2 xpath:其它属性 1.如果一个元素id.nam ...
css中img如何定位,使用CSS定位img
下面是我的HTML代码的简化.我想将div中的img C放在div A中而不考虑元素B. B有一个宽度为70px的背景图像,C的宽度为300px. div A的宽度是屏幕的50%.使用CSS定位img ...
元素定位之CSS定位
要点: 1.为什么要进行元素定位? 在进行自动化时,所运行的脚本动作,是对页面对象的一种操作行为,每一个页面都有一个document,所以需要使用元素定位,使用元素定位的写法如使用原生态:docume ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
selenium之css定位详解
css定位 css概述: 1.css(Cascading Style Sheets)是一种语言,它用来描述HTML和XML的元素显示样式. 2.css语言中有css选择器,在selenium中也可以使 ...
Selenium使用CSS定位总结
大部分人在使用selenium定位元素时,用的是xpath定位,css定位往往被忽略掉了,其实css定位也有它的价值,css定位更快,语法更简洁 css的定位方法和上一篇的xpath定位方法,两篇学习 ...
CSS 定位 (Positioning)
CSS 定位 (Positioning) 属性允许你对元素进行定位. CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多 ...

xpath定位和css定位对比

xpath定位和css定位对比

xpath定位和css定位对比相关推荐

最新文章

热门文章