要點
DOM的簡單介紹
DOM在QTP中使用的時機
DOM對象與IE對象模型的結合應用
DOM在Web測試中的具體應用
DOM在Web測試中的顯著優勢
1.DOM(Document Object Model)
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規范,DOM是一種與瀏覽器，平臺，語言無關的接口，使得你可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscape的Javascript和 Microsoft的Jscript之間的沖突，給予web設計師和開發者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對像。
DOM是以層次結構組織的節點或信息片斷的集合。這個層次結構允許開發人員在樹中導航尋找特定信息。分析該結構通常需要加載整個文檔和構造層次結構，然后才能做任何工作。由于它是基于信息層次的，因而 DOM 被認為是基于樹或基于對象的。
HTML DOM是HTML Document Object Model(文檔對象模型)的縮寫，HTML DOM則是專門適用與HTML/XHTML的文檔對象模型。熟悉軟件開發的人員可以將HTML DOM理解為網頁的API。它將網頁中的各個元素都看作一個個對象，從而使網頁中的元素也可以被計算機語言獲取或者編輯。 例如Javascript就可以利用HTML DOM動態的修改網頁。
2.DOM在QTP中使用的時機
在使用QTP測試Web頁面時，首先需要加載Web插件，隨后QTP就可以順利地識別一些標準的控件，但有些時候網頁中存在一些特殊控件或者存在大量的相同控件時，可以嘗試使用DOM的方式來進行控制，因為QTP只對一些標準的控件支持比較好，而有些特殊的控件QTP無法識別，導致無法對其進行操作。DOM是一種最底層的對象操作模型，使用它來控制對象不但速度快，而且可以訪問很多QTP本身無法訪問的東西。
(1)修改控件自身接口
此方法其實已經在第一章里詳細講解過它的應用，原理就是調用了DOM對象接口來修改控件的自身接口屬性，這也是QTP本身所無法做到的。在實際測試過程也是一個非常有用的技術，關鍵時刻可以使問題迎刃而解。
(2)DOM對象下CurrentStyle對象應用
CurrentStyle 是一個可以與HTML 對象元素的style sheets進行交互的接口，它可以獲取對象元素的字體名、字體大小、顏色、是否可見等。在Web測試中真對一些特殊的界面驗證點時能夠發揮出很大的作用。
(3)性能提升
對于性能來說，DOM的執行速度會比QTP的對象庫執行速度快上好幾倍，這是因為DOM相當于底層的對象接口，而QTP首先需要把對象屬性進行封裝，然后在腳本運行時調用對象庫中的對象，最后與頁面上的對象進行比對，如果屬性匹配才可控制測試對象。而DOM卻是直接找對象進行控制。所以，性能上相對于QTP的對象庫有很大的提升，不過此優勢一般只有在大量的相同對象或者一些特殊情況的時候才能有明顯的區別。
注意：使用DOM時也需要注意一點，雖然DOM有很多優勢，但是也不要過分依賴DOM，對象庫才是QTP的核心，過分使用DOM會導致腳本維護方面相對比較繁瑣，畢竟對象庫維護起來是最方便的。
(1)修改控件自身接口
此方法其實已經在第一章里詳細講解過它的應用，原理就是調用了DOM對象接口來修改控件的自身接口屬性，這也是QTP本身所無法做到的。在實際測試過程也是一個非常有用的技術，關鍵時刻可以使問題迎刃而解。
(2)DOM對象下CurrentStyle對象應用
CurrentStyle 是一個可以與HTML 對象元素的style sheets進行交互的接口，它可以獲取對象元素的字體名、字體大小、顏色、是否可見等。在Web測試中真對一些特殊的界面驗證點時能夠發揮出很大的作用。在后續的章節中會詳細對其進行分析講解。
(3)性能提升
對于性能來說，DOM的執行速度會比QTP的對象庫執行速度快上好幾倍，這是因為DOM相當于底層的對象接口，而QTP首先需要把對象屬性進行封裝，然后在腳本運行時調用對象庫中的對象，最后與頁面上的對象進行比對，如果屬性匹配才可控制測試對象。而DOM卻是直接找對象進行控制。所以，性能上相對于QTP的對象庫有很大的提升，不過此優勢一般只有在大量的相同對象或者一些特殊情況的時候才能有明顯的區別，這個也會在后續章節詳細進行講解。
3.DOM對象與IE對象模型的結合應用
(1)利用DOM操作測試對象
'使用IE COM啟動IE
Set oIE=CreateObject("InternetExplorer.Application")
oIE.Visible=True '設置可見
oIE.Navigate "http://www.baidu.com" '跳轉URL
'等待IE頁面加載完畢
While oIE.Busy
Wend
'獲取Document對象
Set oDoc=oIE.Document
'使用DOM對測試對象進行操作
With oDoc
'輸入框輸入
.getElementByID("kw").value="谷歌"
'點擊搜索按鈕
.getElementByID("su").Click
End With
Set oDoc=Nothing
Set oIE=Nothing |
上面這個例子是通過getElementByID方法獲取定位對象，除此之外還能通過getElementByName和getElementByTagName方法來獲取定位對象。
(2)利用FORM名來獲取對象元素
'使用IE COM啟動IE
Set oIE=CreateObject("InternetExplorer.Application")
oIE.Visible=True '設置可見
oIE.Navigate http://www.baidu.com '跳轉URL
'等待IE頁面加載完畢
While oIE.Busy
Wend
'獲取Document對象
Set oDoc=oIE.Document
'獲取FORM名為f下名為wd的元素并輸入
oDoc.f.wd.value="谷歌"
oDoc.f.su.Click
Set oDoc=Nothing
Set oIE=Nothing
(3)訪問Web頁面的Script腳本變量
'使用IE COM啟動IE
Set oIE=CreateObject("InternetExplorer.Application")
oIE.Visible=True '設置可見
oIE.Navigate http://www.baidu.com '跳轉URL
'等待IE頁面加載完畢
While oIE.Busy
Wend
'獲取Document對象
Set oDoc=oIE.Document
'獲取搜索框
Set oEdit=oDoc.parentWindow.k
'并對其進行輸入
oEdit.value="谷歌"
'獲取FORM名為f下名為su的元素并點擊
oDoc.f.su.Click
Set oDoc=Nothing
Set oIE=Nothing |
這一部分主要介紹了利用IE的COM以及HTML DOM來自動化IE瀏覽器，以及對瀏覽器的一些控件對象進行自動化的操作，包括啟動IE、等待頁面加載、遍歷所有IE窗口、利用DOM操作測試對象、利用FORM名來獲取對象元素、訪問Web頁面的Script腳本變量、Browser對象轉化Window窗口對象、自定義瀏覽器應用程序，這些方法對于我們在自動化測試中也是起到比較重要的作用，并且能夠輔助我們更好地完成Web自動化測試，當QTP不能達到我們想要達到的目的時，就可以使用這些方法來代替或者說來實現需要實現的方法，最終使Web自動化測試變得更加的輕松和容易。
4.DOM在WEB測試中的應用
當編寫QTP腳本時，首先該做的就是將需要控制的測試對象添加到對象庫，添加完畢后即可使用QTP的封裝方法來控制測試對象。
如果需要在QTP中訪問DOM，就只需要使用Page對象，并調用Page對象的Object封裝屬性，QTP就能訪問到頂層DOM對象。
QTP中訪問DOM對象的方法：
Browser("micClass:=Browser").Page("micClass:=Page").Object
此處的Object屬性目前只支持IE，通過DOM，可以在QTP中修改HTML元素對象的屬性，調用其方法，當在使用Web測試對象的Object屬性時，事實上就已經自動獲取到DOM對象的一個引用，這就意味著可以調用測試對象的DOM引用下的所有的屬性、方法。
實例1：以百度首頁為例
Set oDocument=Browser("micClass:=Browser").Page("micClass:=Page").Object
oDocument.getElementByID("kw").value="谷歌"
oDocument.getElementByID("su").Click
實例2：以百度高級搜索為例，www.baidu.com/gaoji/advanced.html
'QTP中使用DOM控制各類HTML元素
'獲取DOM對象
Set oDocument=Browser("micClass:=Browser").Page("micClass:=Page").Object
Set allWebEdits=oDocument.getElementsByTagName("INPUT")
For each oWebEdit in allWebEdits
oWebEdit.value="谷歌"
Next |
5.DOM在WEB測試中的顯著優勢
利用DOM完成QTP無法完成的任務
使用CurrentStyle驗證對象
HTML源碼：
<style>
.class_visible{visibility:"visible"}
.class_hidden{visibility:"hidden"}
</style>
<div class=class_hidden id="ID_001">
<p>DHTML using DISPLAY</p>
</div>
QTP中代碼：
Set oElementDocument=Browser("micClass:=Browser").Page("micClass:=Page").WebElement("html id:=ID_001").Object
isVisible=oElementDocument.currentstyle.visibility
If isVisible="hidden" Then
msgbox "object is hidden"
Else
msgbox "object is visible"
End If |
此處如果用QTP的Exist方法，結果永遠返回True。因為此對象的確是存在于網頁中，但是被設置了不可見，而Exist方法只能驗證對象是否存在，卻不能驗證是否隱藏。
而Document對象下的currentstyle可以直接訪問style sheets。
利用DOM提升性能
當對象較多時，使用DOM較為占優勢，數量越多越明顯，比如有1000個文本框的HTML頁面，每個文本框的name屬性都由text_開頭，之后由1到1000遞增，腳本如下：
<html>
<head>
<script language="vbscript">
function msg
for i=1 to 1000
tt=tt+"<input type='text' name='text_"+cstr(i)+"'>"
next
Document.getElementByID("aaa").innerHTML=tt
end function
</script>
</head>
<body>
<input type="button" value="click it" onclick="msg">
<div id="aaa"></div>
</body>
</html> |
把以上腳本保存成HTML，打開此HTML，點擊按鈕生成1000個文本輸入框。比較QTP描述性編程和DOM操作腳本的性能。
QTP描述性編程腳本：
Services.StartTransaction "inputvalue"
For i=1 to 1000
Browser("micClass:=Browser").Page("micClass:=Page").WebEdit("name:=text_"+cstr(i)).Set "value"+cstr(i)
Next
Services.EndTransaction "inputvalue" |
結果：
DOM操作腳本：
Services.StartTransaction "inputvalue"
For i=1 to 1000
Browser("micClass:=Browser").Page("micClass:=Page").Object.getElementsByName("text_"+cstr(i))(0).value="value"+cstr(i)
Next
Services.EndTransaction "inputvalue" |
結果：
