获取页面元素的xpath,验证自己写的xpath,不用工具不用插件,看完这篇保证你学会!


鉴于很多新手测试(UI自动化小白)对如何获取和验证XPath一无所知一头雾水,
特地写此篇文章分享下最简单的获取xpath和验证xpath正确不正确的方法。

.
.

一、如何获取XPath

1、准备工作

电脑一台(包括左右键正常的鼠标)
电脑上有谷歌浏览器(火狐浏览器也可以哦)
测试员(视力正常,十指健全)

2、操作步骤

2.1打开浏览器,进入你要获取元素的网页,找到你要获取的元素,右键点击之后选择检查

这里用腾讯网为例,例如你想获取【习大大出席欢迎仪式】这个文本的XPath,
那么需要做的就是右键点击它,然后选择检查;
可以看到,页面下方出现了一个工具栏,它就是chrome浏览器的开发者工具,默认显示的是Elements这个标签页
还可以看到,有一行已经被置灰的,没错,那个就是你想获取的元素的html代码

在这里插入图片描述

2.2接下来,你需要做的就是在这行html代码上继续点击右键,选择Copy,选择Copy XPath

在这里插入图片描述

2.3 找个地方粘贴就完事啦

复制到的xpath为://*[@id=“tab-news-01”]/ul[1]/li[2]/a[1]
.
.
.

二、如何验证XPath

有时候直接复制的xpath太长了,或者不合适(怎么个不合适,又是另一个话题,等我找时间另开一篇),想用自己写的。
那么,问题又来了,怎么验证自己写的xpath能定位到元素么?
请听我慢慢道来……

1、准备工作

电脑一台(包括左右键正常的鼠标,还有正常使用的键盘)
电脑上有谷歌浏览器
测试员(视力正常,十指健全)

2、操作步骤

2.1打开浏览器,进入你要获取元素的网页,按下F12

(或者ctrl+shift+I(i的大写),如果不嫌麻烦,我还是喜欢F12),当然,随便找个元素点右键检查也是可以的。

可以看到,页面下方出现了一个工具栏,没错,又是它,chrome浏览器的开发者工具,这次它默认显示的是Network这个标签页
在这里插入图片描述

2.2 切换到Elements标签,然后按下ctrl+F

这时候,细心并且视力正常的你就会观察到,Elements标签的最下面出现了一条输入框,通过提示你也可以知道输入框可以通过字符串、CSS选择器和Xpath进行搜索
在这里插入图片描述

2.3 接下来就是把你自己写的xpath粘贴进去,然后回车就可以啦

这里还是用腾讯网,用上面的教程复制的xpath进行验证
在这里插入图片描述
可以看到,页面和Elements标签中的代码都高亮显示出了找到的相应的元素
并且输入框的最后面的【1 of 1】,后面的1表示找到了多少个,前面的1表示当前高亮的是第几个。
咱们修改下xpath看看下图,现在找到了4个a标签的元素,高亮的是第二个。
在这里插入图片描述

怎么样,你学会了么?

不会的话可以在评论区说哪里看不明白,我继续修改下教程。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM