• 编写UI自动化测试用例时如何使用Chrome自带的调试工具提取Xpath和CSS
  • 发布于 2个月前
  • 170 热度
    0 评论
使用场景
有的同学属于频繁使用到网页中元素定位技能的角色,例如编写UI自动化测试用例,或者定位网页问题的人,此时选择使用第三方插件会提供更加强大、完善的功能。但是对于偶然使用,例如到其他人机器上定位问题的时候,大张旗鼓安装新插件,显然不划算,也不适合装B。这种时候,使用Chrome自带的调试工具更加方便

复制XPath
1.进入方式:网页上目标元素右键-检查,或者直接F12,选中第1个tab“元素”,英文是Elements,通过左上角的定位器选中元素。

2.下一步在F12工具框中,对应高亮的代码行右键,弹出窗口中选择-复制-复制XPath,英文是Copy-Copy element。例如这个图片示例中复制出来的XPath长这样//*[@id="1"]/div/div[1]/div[1]/div[2]/div[2]/div[1]/div/div/div[3]

3.我承认XPath样式比较丑,可读性比较差

验证XPath和CSS
由于直接复制出来的XPath非常丑,实际使用时都会进行修饰美化提高其可读性和可维护性。那么对于改完后的Xpath,也可以继续在这个工具中验证,

1.使用Ctrl+f调出查询框

2.将XPath字符串复制回车后,即可搜索
3.分析搜索结果。如果搜索结果是0,说明页面上并没有搜索到这个XPath对应的元素,也就是XPath写错了,回去再改。如果搜索结果是非0的数字,代表有1个或者多个命中。如果有多个命中时,对于元素定位而言,一般都还需要再修改一下XPath使其命中数量为1
用户评论