如何高效地認識不帶 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 頁面中定位元素。