2.3　开发者工具简介

因为在编写Web UI自动化测试脚本的过程中，我们需要查看、使用页面元素，所以本节我们以Chrome和Firefox为例，介绍一下浏览器开发者工具的元素识别功能。

2.3.1　Chrome DevTools

（1）如何打开浏览器开发者工具

我们可以通过以下几种方式打开浏览器开发者工具。

●按快捷键“F12”（笔记本电脑的话需要按组合键“Fn+F12”）。

●按组合键“Ctrl+Shift+I”。

●在浏览器页面中右击，在弹出的快捷菜单中选择“检查”命令。

（2）使用页面元素查看器

单击图2-26所示的开发者工具左侧框中的按钮，当其变为蓝色时，再单击页面中的元素。例如百度的搜索框，下方“Elements”标签中将以蓝底显示该元素对应的HTML代码。此时，我们能定位到该元素，图片长框中显示元素的相关属性，例如：标签名称为“input”（前端相关的知识会在第4章介绍）。

图2-26　Chrome DevTools

（3）复制元素XPath和CSS selector

在元素代码上右击，在弹出的快捷菜单中选择“Copy”命令，选择“Copy XPath”或“Copy selector”命令即可复制XPath或CSS selector，如图2-27所示。

图2-27　复制XPath或CSS selector

Chrome DevTools还有很多重要的功能，是帮助开发调试、测试确认结果的重要工具。大家可以根据实际需要，自行深入学习。

2.3.2　Firefox DevTools

Firefox DevTools和Chrome DevTools的使用方法大同小异，这里不再过多讲解。需要提醒读者的是，2017年Firebug插件的功能全部集成到了DevTools，Firebug已经退出了历史舞台。在网络上搜索Selenium相关知识的时候，你可能会看到较多关于Firebug和Firepath插件的介绍，但是你已经无法再搜索和安装这些插件了，当然你也没有必要安装它们。