四、下拉組件案例 · 自動化測試

## 涉及到JS組件的測試案例 > 在當前的軟件開發中，web頁面會經常使用一些JS組件，而這些組件由于是動態生成的，用一般的腳本測試會導致測試用例報錯，所以Selenium中會提供一些特殊的腳本來處理這些問題。 > 此文檔用于描述Selenium如何處理某些特殊場景。 ## 案例二：下拉組件操作下拉組件是一種模擬提示框的JS組件，常用的有數據表格和可定制下拉列表等。本案例以客戶歸屬區域為例，操作界面如下： 1. 表單頁面呈現 ![](https://box.kancloud.cn/2016-08-20_57b7ba4fe608d.png) 2. 單擊文本框 ![](https://box.kancloud.cn/2016-08-20_57b7ba500a99d.png) 3. 選擇相應內容 ![](https://box.kancloud.cn/2016-08-20_57b7ba5024d8e.png) 4. 組件回填字段信息 ![](https://box.kancloud.cn/2016-08-20_57b7ba503b4af.png) * * * * * ## 實現思路首先可以看到點擊文本框后，會彈出選擇框；選擇框的內容會自動初始化，所以我們需要等待框的內容初始化完成再進行選擇；選擇的事件是雙擊，所以這邊用雙擊處理；雙擊完之后，回填相關的字段信息 * * * * * ## 用例腳本demo | 命令（Command） | 目標(Target) | 值(Value) | 腳本說明 | | -- | -- | -- | -- | | ... | ... | ... | ... | | click | id=AreaName | | 點擊歸屬區域的文本框 | | waitForElementPresent | //tr[@id='row10']/td[3]/div | | 等待行數據加載完成 | | clickAt | //tr[@id='row10']/td[3]/div | | 單擊選中行內容 | | doubleClickAt | //tr[@id='row10']/td[3]/div | | 雙擊行觸發組件的選擇事件 | | ... | ... | ... | ... | **在編寫這個腳本的時候，有些內容還不是很確定：** 1. click和clickAt的區別； 2. 為什么組件選擇需要先用clickAt點擊一次再使用doubleClickAt雙擊才能生效； 3. 確認表格初始化完成使用的絕對元素。以上問題，只能后續深入理解后才能來解釋了。