如何高效地认识不带 ID 属性的 web 元素

使用一个有含义的 ID 或名称是一种高效且方便的定位元素的方式。它也可以改善测试用例的可读性。但是为了每个元素具有一个有含义的、惟一的 ID（尤其是动态元素），Selenium 提供多种策略来认识元素，比如说 Xpath、DOM 和 CSS。

下面是一个样例，使用三种策略来定位动态表格中的一个元素。HTML 代码在清单 1 中。

清单 1. 第一个表格列的 HTML 代码

<table id="test_table" border="1"> <tbody> <tr> <td align="left"> <div class="test_class">Test 1</div> </td> <td align="center" style="vertical-align: top;"> <table id="AUTOGENBOOKMARK_4"> <tbody> <tr> <td align="center" style="vertical-align: top;"> <div> <img alt="supported" src="supported.png"/> </div> </td> <td align="center" style="vertical-align: top;"> <div> <a href="test?name=test1">edit</a> </div> </td> …….

Xpath 是一种找到不带特定 ID 或名称的元素的简单方式。

• 如果知道 ID 或名称之外的一个属性，那么直接使用 @attribute=value 定位元素。
• 如果只知道属性值的一些特定部分，那么使用 contains(attribute, value) 定位元素。
• 如果元素没有指定的属性，那么利用 Firebug 搜索最近的具有指定属性的父元素，然后使用 Xpath 从这个元素开始定位想要找到的那个元素。

表 1. 定位元素的 Xpath 表达式

定位元素	Xpath 表达式
n 行的第一列	//table[@id='test_table']//tr[n]/td
n 行的图像	//table[@id='test_table']//tr[n]//img
‘Test 1’ 的编辑链接	//a[contains(@href,test1)]

表 1 展示了定位元素的 Xpath 表达式。在 Firebug 的帮助下，Xpath 可以定位元素和复制的元素。在元素没有 ID 和名称时，Selenium IDE 将会采用 Xpath。尽管 Xpath 利用已经录的脚本，有助于保持一致性，但是它高度依赖于 web 页面的结构。这使得测试用例可读性差，增加了维护难度。此外，在 Internet Explorer 7 和 Internet Explorer 8 中运行具有多个复杂 Xpath 表达式的测试用例可能会太慢了。在这种情况下，将 Xpath 更换为 DOM，后者是另一种高效的定位策略。

DOM 是 Document Object Model（文档对象模型）的缩写。Selenium 允许您利用 JavaScript 遍历 HTML DOM。Java 的灵活性允许在 DOM 表达式中有多个语句，用分号隔开，以及在语句中定义函数。

表 2. 定位元素的 DOM 表达式

定位元素	DOM 表达式
n 行的第一列	dom=document.getElementById('test_table').rows[n-1].cells[0]
n 行的图像	dom=element=document.getElementById('test_table').rows[n-1].cells[1]; element.getElementsByTagName('IMG')[0]
‘Test 1’ 的编辑链接	dom=function test(){ var array=document.getElementsByTagName('a'); var element;for(var i=0; i<array.length; i++) {if(array[i].attributes.getNamedItem("href")./ value.indexOf('test2')!=-1){element=array[i];break;}}return element}; test()

表 2 展示了定位元素的 DOM 表达式。DOM 定位器在 Firefox 和 Internet Explorer 中也有很好的性能。组织 DOM 表达式需要一些 JavaScript 知识。有时，DOM 表达式对于复杂的元素来说太长了，难以看懂（参见表 2 中提到的 Test 1 的编辑链接的表达式）。

CSS 定位器用于利用 CSS 选择器选择元素。当 HTML 代码具有良好的样式时，可以高效地利用 CSS 定位器。样例表达式展示在表 3 中。

表 3. 定位元素的 CSS 表达式

定位元素	CSS 表达式
n 行的第一列	css=#test_table .test_class:nth-child(n)
n 行的图像	css=#test_table  tr:nth-child(n) > td:nth-child(2) > table td:nth-child(1) > div >  img
‘Test 1’ 的编辑链接	css=a[href*='test2']

一般来说，选用熟悉的定位器表达式，并在脚本结构中保持一致。如果有多种表达式可执行，那么使用最高效的方式在 web 页面中定位元素。