Selenium3自动化测试【13】FireFox与Chrome浏览器元素定位

本文介绍了火狐浏览器的FireFox Developer Tools及Chrome浏览器的开发者工具的使用方法,包括如何查看网页元素的属性定义、DOM结构和CSS样式等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目前大部分浏览器都内置了相关插件或组件,能够帮助我们快速、简洁地展示各类元素的属性定义、DOM结构、CSS样式等属性。本书中使用的浏览器主要是FireFox、Chrome(这2款浏览器也是作为开发者常用的浏览器),因此本节介于这2款浏览器一起看看这些工具(组件)的使用方法。

火狐(FireFox)浏览器


如果大家对火狐浏览器较为熟知,在旧版本上的FireBug,大家一定影响深刻,FireBug功能非常强大。
2016年12月FireBug宣布停止更新,新版本的火狐浏览器已经看不到FireBug影子。而FireBug不是消失了,而是Firebug被合并到FireFox DevTools内置工具中。
1.    前端工具(FireFox):FireFox Developer Tools
写本书时FireFox的最新版本是FireFox Quantum 60.0.1,新版的FireFox,需要学会使用自带的FireFox Developer Tools工具。打开FireFox通过按F12可以调用出来,如图所示。


以Bing首页为例,通过F12,调用FireFox Developer Tools,单击下图中的 图标,从页面中选择一个元素,选择的是Bing的输入框,此时在【查看器】可以看到凸显了输入框的Html代码,如图所示,可以看到跟我们以往所熟知的Firebug没有任何区别。

 

谷歌(Chrome)浏览器


Chrome浏览器跟FireFox浏览器一样,也有对应的开发者工具。
1.    前端工具(Chrome):Chrome开发者工具
Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。在Chrome菜单中选择 【更多工具】 >【 开发者工具】(通过F12可以调用)。
在页面元素上右键单击,选择 “检查”,在Elements中就能看到我们定位元素的id、name、class等。例如Bing输入框,如图5-4所示,通过Bing输入框元素上右键单击“检查”,即可在Elements中看到该元素的html代码,右键单击选择copy我们就能复制出css、xpath定位方式的代码。
 


更多【全栈测试】视频课程,点击我哦.....


《从零开始学Selenium3自动化测试》


图书京东、当当有售
京东:https://item.jd.com/12784287.html
当当:http://product.dangdang.com/29177828.html


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Leo_Eagle

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值