【selenium学习笔记】webdriver进行页面元素定位

【selenium学习笔记】webdriver进行页面元素定位

进行Web页面自动化测试，对页面上的元素进行定位和操作是核心。而操作又是以定位为前提的，因此，对页面元素的定位是进行自动化测试的基础。

页面上的元素就像人一样，有各种属性，比如元素名字，元素id，元素属性（class属性，name属性）等等。webdriver就是利用元素的这些属性来进行定位的。

可以用于定位的常用的元素属性：

• id
• name
• class name
• tag name
• link text
• partial link text
• xpath
• css selector

对应于webdriver中的定位方法分别是：

• driver.find_element_by_name()——最常用，简单
• driver.find_element_by_id()——最常用，简单
• driver.find_element_by_class_name()
• driver.find_element_by_tag_name()——最不靠谱
• driver.find_element_by_link_text()——定位文字连接好用
• driver.find_element_by_partial_link_text()——定位文字连接好用
• driver.find_element_by_xpath()——最灵活，万能
• driver.find_element_by_css_selector()

上面是定位一个元素的方法，相应的webdriver也有定位一组元素的方法：

• driver.find_elements_by_name()
• driver.find_elements_by_id()
• driver.find_elements_by_class_name()
• driver.find_elements_by_tag_name()
• driver.find_elements_by_link_text()
• driver.find_elements_by_partial_link_text()
• driver.find_elements_by_xpath()
• driver.find_elements_by_css_selector()

那么问题来了？怎么查看元素的name，id，class，tag，text，xpath，css选择器呢？可以借助firefox浏览器的firebug插件（需要手动安装）中firepath工具或者chrome的开发者工具（chrome自带）。

• Friebug

打开firefox 浏览器的firebug 插件，点击插件左上角的鼠标箭头，再点击页面上的元素，firebug插件的HTML 标签页将看到页面代码，鼠标移动到元素的标签上点击一下。例如我们点击百度首页的“百度一下”按钮：

从FirePath中可以看到该元素的id，tag，class等属性。

 

• Chrome开发者工具（F12）

打开Chrome浏览器，按下键盘的F12，即可以打开开发者工具。从开发者工具中可以得到和FirePath相同的结果：

 

那么问题又来了，这么多属性都可以用来定位，那么我们选择哪种呢？其实，定位元素的方法没有好坏之分，不同的场景有不同的适用方法，只要定位的唯一的一个元素的方法都是可以使用的。

• id 和name 定位

这是简单的高效的方法。

比如定位百度首页文本框的方法，我们可以使用id来定位（该元素提供的id属性，可以唯一定位到它）：

driver.find_element_by_id('kw')

定位百度首页右上角的“设置”链接，我们可以使用name来定位（该元素提供的name属性，可以唯一定位到它）：

driver.find_element_by_name('tj_trnews')

• class name和tag name定位

不是所有的前端开发人员都喜欢为每一个元素添加id 和name 两个属性，但除此之外你一定发现了一个元素不单单只有id 和name，它还有class 属性；而且每个元素都会有tag标签。

还是定位百度首页的文本框，除了用id方法定位之外，我们还可以用class name来定位（该元素提供的class属性，也可以唯一定位到它）。

driver.find_element_by_class_name("s_ipt")

tag name 定位应该是所有定位方式中最不靠谱的一种了，因为在一个页面中具有相同tag name 的元素极其容易出现，很少具有唯一性。不用学习它了。

• link text 与partial link text 定位

有时候需要操作的元素是一个文字链接，那么我们可以通过link text 或partial link text 进行元素定位。

比如，定位百度首页右上角的“新闻”，“hao123”，。。。。等等这些文字连接。就可以使用link text和partail link text定位方式。可以先使用FireBug看下网页源码：

 

通过linx text定位：

find_element_by_link_text("新闻")
find_element_by_link_text("贴吧")

通过partail link text定位：

find_element_by_link_text("新")
find_element_by_link_text("贴")

• XPath 定位

XPath是一种文档定位语言。因为HTML可以看做是XML的一种实现，所以selenium用户可使用这种强大的语言在web应用中定位。

绝对路径方法：

从根元素写起，当元素层级很深的时候，路径写的会很长，阅读性不好，也很难维护。不建议使绝对路径这样的方法。

相对路径方法：

通过Firebug很容易得到相对路径的xpath，打开Firebug插件，在页面上的搜索文本框，就可以显示出xpath了：

<pre name="code" class="python">driver.find_element_by_xpath("//*[@id='kw']").click()

上面的写法可以理解为，通过xpath寻找，任意（*代表）id属性为’kw‘的元素。当然我们也可以把*替换成input，即：

driver.find_element_by_xpath("//input[@id='kw']").click()

这种写法可以理解为，通过xpath寻找，任意id属性为’kw‘的input元素。
有的时候，需要根据上级目录的属性来定位当前元素：

find_element_by_xpath("//span[@id=’input-container’]/input") #通过上一级目录的id 属性定位
find_element_by_xpath("//div[@id=’hd’]/form/span/input") #通过上三级目录的id 属性定位
find_element_by_xpath("//div[@name=’q’]/form/span/input")#通过上三级目录的name 属性定位

• CSS定位

这种定位方法是比较难理解的。TBD，当前工作中也没有遇到，必须使用这种方式才能定位到元素的情况。

 

• 关于自动化的定位问题

自动化测试的元素定位一直是困扰自动化测试新手的一个障碍，因为我们在自动化实施过程中会碰到各式各样的对象元素。虽然XPath 和CSS 可以定位到复杂且比较难定位的元素，但相比较用id 和name 来说增加了维护成本和学习成本，相比较来说id/name 的定位方式更直观和可维护，有新的成员加入的自动化时也增加了人员的学习成本。所以，测试人员在实施自动化测试时一定要做好沟通，规范前端开发人员对元素添加id/name 属性，或者自己有修改HTML 代码的权限。