在进行 web 自动化测试的时候进行 XPath 或者 CSS 定位, 需要检测页面元素定位是否正确, 如果用脚本去检测, 那么效率是极低的.
一般网上推选装额外的插件来实现页面元素定位检测 如: firebug.
其实 F12 开发者工具就能直接在页面上检测元素定位不需要装额外的插件.
有 2 种方式:
F12 开发者自带的 elements 定位, 支持 xpath CSS 定位.
JS 方法定位, 通过 console 输入.
elements 定位
使用方法:
F12 开启开发者工具后按 Ctrl + F 组合键
Element 标签下, 会多出一个 body 输入框.
这个输入框可以使用 xpath CSS 定位和关键字查找.
右下角显示选中的和总共定位的元素.
JS 方法定位:
第二种通过 JS 自带的方法来定位. 显示效果比第一种要更好.
CSS 定位
- document.querySelector()
- document.querySelectorAll()
其他方式定位
- document.getElementById()
- document.getElementsByName()
- document.getElementsByClassName()
- document.getElementsByTagName()
看方法名就能知道用途.
我一般用 document.querySelectorAll() 定位所有元素. 既能定位一组元素还能 在定位一个元素的时候检测是否定位到多个元素.
使用方法:
打开 F12 开发者工具 切换到 Console 控制台标签.
输入 JS 元素定位方法
来源: https://www.cnblogs.com/jiang-cheng/p/9975221.html