![25f8173e2847520d5febfff534a417fc.png](https://i-blog.csdnimg.cn/blog_migrate/6fe065ac09ca705f3395be4de239f42b.jpeg)
在Selenium开发脚本利用辅助开发工具,可以节省许多时间,提高开发效率和软件质量,降低开发成本。在selenium开发脚本或进行测试前是必须对页面元素进行定位的,而Firefox提供了两个非常使用且方便的小工具(Firebug和FirePath)用于定位元素。
一.Firebug
Firebug是Firefox下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一,它已经和Firefox浏览器无缝地结合在一起,具备在各种浏览器下面调试功能。用FireBugy有可以帮助测试开发人员快速开发脚本, 通常情况下,可以用FireBug插件在脚本开发种做四种类型的操作:
- 显示源代码 - 它可以让你重新查看JavaScript引擎渲染之后的HTML网页。
- 高亮显示变化 - 它可以检测并高亮(黄色)显示任何HTML页面的改变。这个特性可以立即获取你的注意,以确保你没有错过什么。
- 快速检查 - FireBug有 Inspect 功能,能够让你快速查看你想要的web元素的定位器。
- 复制HTML - 你可以轻松地复制HTML网页的代码,或用 innerHTML 获取部分网页,或者某个元素的XPath表达式。
下面我们来看看安装和它的基本功能:
1. 安装firebug2.0.19:
- A. 打开火狐浏览器
- B. 使用快捷键commond+shift+A(mac系统)或者ctr+shift+A(window系统):
![9200b6b5a895c2cb460da52e655ee1a7.png](https://i-blog.csdnimg.cn/blog_migrate/9531e43144470b00daa1e1c0930c4c33.jpeg)
- C. 拉动上界面中的滚动条,点击下面”看看更多组件”按钮,出现界面:
![ecbaba8673b4011c0fc6d72e10c737ee.png](https://i-blog.csdnimg.cn/blog_migrate/6548b206dd789ebc020475d3b0bd3195.jpeg)
- D. 搜索firebug
![18283215a66bf2ae2c921b0b1953283f.png](https://i-blog.csdnimg.cn/blog_migrate/a12994ed96721b2eac9325f7d0c920cd.jpeg)
- E. 点击’添加到firefox’
2. Firebug基本功能
A. 控制台:
控制台得主要作用是用来显示网页各类错误信息,并可对日志进行打印处理。同时可以在进行javascript调试的时候当作命令行窗口使用,并通过概况子选项说明JavaScript代码执行的相关信息。如下图所示:
![c0431cec1cf28ac74a18c4ce840cd11d.png](https://i-blog.csdnimg.cn/blog_migrate/268d1dca13b1b716adcf8e28bf52f635.jpeg)
B. HTML:
此菜单标签功能主要用于查看当前页面的源代码功能,并可进行编辑,时时显示,从而实现页面最佳效果。启用此标签后界面如下:
![dcb9ca6cf4bce6e8b976e7d06ae8b341.png](https://i-blog.csdnimg.cn/blog_migrate/d7104fb7e2ce62a25f3c2066c77207a0.jpeg)
整个页面被分为左右两部分,在HTML控制台的左侧可以看到整个页面当前的文档结构,可以通过单击“+”来展开。当单击相应的元素时,右侧面板中就会显示出当前元素的样式、布局以及DOM信息。而当光标移动到HTML树中相应元素上时,上面页面中相应的元素将会被高亮显示。较普通的源代码显示更为的直观和具体。双击左边源码中任一元素的属性值,出现可编辑悬浮,可对属性进行编辑,并可即可查看修改效果。
Firebug面板上导航栏的第二个箭头按钮,就是"Inspect"按钮,这个功能是用鼠标在网页上选中一个元素时,元素会被一个蓝色的框框住,同时下面的HTML面板中相应的HTML树也会展开并且高亮显示。再次单击后即可退出该模式,并且底部的HTML树也保持在这个状态。通过这个功能,可以快速寻找页面内的元素,调试和查找相应代码非常方便。刷新网页后,页面显示的仍然是用Inspect选中的区域。
HTML面板下方的“编辑”按钮可以用于直接编辑选中的HTML代码,而后面显示的是当前元素在整个DOM中的结构路径。
C. CSS:
点击CSS菜单标签,可查看所有的CSS定义信息,同时也可以通过双击来达到修改页面样式的效果,如下图所示:
![ce02c9128503aae6af4e1973620b1156.png](https://i-blog.csdnimg.cn/blog_migrate/f52a9e2686e3d5e3cf5cf506e7253016.jpeg)
D. JavasSript:
脚本功能主要是一个脚本调试器,可以进行单步调试、断点设置、变量查看等功能,同时通过右边的监控功能来实现脚本运行时间的查看和统计,提高运行效率,如下图所示:
![0776787c59317770c3a7f75a474e97f8.png](https://i-blog.csdnimg.cn/blog_migrate/dce3af220367d8acde5a31119143c168.jpeg)
由于firebug已经停止更新了,所以firebug支持JavaScript调试功能只是支持到了50版本以下,因为本书用的是firefox安装了54.0.1版本,所以在图中你会看到“本页面不包含 JavaScript”信息。
E. DOM功能:
单击“DOM”面板后可以看到此元素的详细的DOM信息以及函数和事件,通过提供的搜索功能实现DOM的快速准确定位,并可双击来实现DOM节点属性或值的修改,如下图:
![43980bef75acf13c6744e16ec95d67c5.png](https://i-blog.csdnimg.cn/blog_migrate/8d54753d6ec79701abb2ab1fa1f051ef.jpeg)
F. 网络(Net):
该标签功能主要用来监控网页各组成元素的运行时间的信息,方便找出其中运行时间较慢的部分,进一步优化运行效率,如下图:
![8acdd3a4b52bca7fc772b65ce5450fa8.png](https://i-blog.csdnimg.cn/blog_migrate/810cc39cc18c12778fde9e7c2a39283d.jpeg)
如上图所示 可以点击网络标签查看 网页的详细的网络请求。在做前端性能测试中,可以根据分下面的请求信息来判断那条请求性能有问题。面板上有XHR(XHR类型即通过XMLHttpRequest方法发送的请求,也就是ajax功能实现所依赖的对象) 标签,这是对异步请求过滤,这个功能在做自动化测试的过程中很有帮助。它可以查看网站的异步请求情况。包括post数据。点击其中xhr的一个请求,双击,就可以在请求下面查看该请求的参数信息以及发送的cookie等。可以通过此得到请求是否完成,请求的运行情况。
二.Firepath
Firepath可对Firebug的功能进行扩展。自动生成xpath和css,同时测试开发人员可以提供自定义的XPath值,并直接在网页上测试他们的正确性。因为firepath也是firefox的插件,所以安装同firebug.下面学习用firepath获得XPath
1. 打开FireBug,然后点击 FirePath 标签。
![d61bb4180d66b97e8a2c7686391a4619.png](https://i-blog.csdnimg.cn/blog_migrate/ea10ad288c5d34190704c24199b41fe7.jpeg)
2. 在页面中点击右键,出现浮动菜单,点击inspect in firepath
![87f6e172d4fdd487efbc7d046a04c923.png](https://i-blog.csdnimg.cn/blog_migrate/5ba68045df6c08700684a44fefec4637.jpeg)
在firepath的输入框中就会出现xpath的路径,点击Hightlight,选择的元素就会高亮度显示出来。
通过上面操作,你就可以在自动化就脚本开发的过程中选择你要取得的元素xpath路径,可以大大提高了脚本开发效率,如果你想获得的是页面元素的css选择器,只要把firebug的XPath改成CSS即可。