大佬答疑解惑丨進行Web自動化測試，為什麼總是定位不到元素？

     一、寫在前面

      本文討論的基礎，是基於Robotframework（簡稱RF）+Selenium測試框架的Web前端自動化測試。針對Robotframework和Selenium的安裝、使用等基礎知識不做介紹，只討論在進行自動化指令碼編寫過程中遇到的元素定位失敗問題。

　二、但是你不得不瞭解的事

　　RF框架在做前端自動化時，支援的元素定位方式有：css定位、id定位、name定位、xpath定位和js定位。在介紹如何使用這幾種方法之前，你不得不認識並熟悉我們Web測試的基礎工具（客戶端）——瀏覽器。

　　以Chrome瀏覽器為例，Chrome的開發者工具欄的Elements皮膚，提供了使用者捕捉前端元素及獲取元素定位的方法。如下圖1所示，開啟Chrome開發工具的Elements皮膚，點選最左側的箭頭（圖中1），在介面點選關鍵字搜尋框（圖中2），即可獲取搜尋框的元素（圖中3）html文字：

　“<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">”

　　在該html文字處右鍵點選，並點選Copy按鈕（圖中4），即可見Chrome關於該搜尋框元素定位的幾種方式：selector、Xpath、JS path。

　　如圖1例中，selector的值為“#kw”；Xpath的值為“//*[@id="kw"]“；JS path的值為“document.querySelector("#kw")”。

　　selector提供了css或id或name的元素定位方式，Xpath提供了xpath相對路徑的元素定位方式。使用selector和Xpath，結合RF Selenium2Library的Click Element、Click Button、Checkbox Should Be Selected等關鍵字使用，即可定位元素進行點選、判斷等操作。除此外，RF還提供js定位方式，結合Chrome的JS Path和RF的Execute JavaScript關鍵字，即可完成對元素的操作。

圖1 chrome開發工具獲取元素定位

　　三、你可能不知道的事

　　儘管使用過“02”中的幾種定位方式，能夠捕捉到大部分元素，但是現實往往不是那麼盡善盡美，你可能還是遇到了下面幾個問題：

　　1、自動化指令碼編寫好，測試透過了，但是過幾天迴歸測試就失敗，元素找不到？

　　在這裡，只能建議你：請確認你所使用的定位方式是唯一不變的。例如，避免使用“//*[@id="9134245532398"]“這類包含動態id的xpath定位方式。有的前端設計某些元素的id為隨機數，每次重新整理都會更改，切記勿用這類隨機變換的標識做元素識別。元素定位只有一個標準：唯一性，推薦id和name優先。

　　2、元素處於frame框架巢狀中，即使獲取到了正確的定位路徑，測試指令碼執行仍然失敗？

　　請記住，處於frame框架中的元素，你需要先切換進frame（RF的 select frame關鍵字試一試，會有驚喜），再進行元素定位。好比你遠遠地看到一扇玻璃窗裡有個熟人，你大聲跟他說話，他卻無動於衷。這個時候，你需要走進這扇玻璃窗的門裡，因為，玻璃窗是隔音的，你的呼喊門裡的人聽不見。

　　3、如何操作被遮擋的元素？

　　針對這類情況，也許你嘗試了id、name、css和xpath等定位方法，結果都失敗了。也不存在2中所說的frame切換，不要灰心，試試js定位操作吧。使用RF的execute javascript配合JS path直接操作被遮擋元素，百試不爽。

　　4、如何處理新開tab頁或新開視窗後的元素操作？

　　同02方法類似，將當前操作的視窗切換到新開的視窗或tab頁，再結合chrom的元素定位路徑對元素進行操作，RF的select window值得嘗試。

　　5、定位沒問題，點選按鈕有顯示被點中的樣式，但是就是沒效果？

　　元素定位正確，使用click button和click element點選元素都，也無報錯，就是沒反應，那就試試press key按鈕吧。

　　6、自動化測試指令碼執行太快，頁面還沒載入出來，元素找不到？

　　這個時候，沒有其他辦法，只能設定等待時間或者使用RF的Element Should Be Visible這類關鍵字判斷元素已經再頁面可見或可用後，在進行操作。

　　四、告訴你一個大事情

　　如果你遇到的問題，“03“中的方法都不能解決，那麼……列印原始碼吧。

　　RF的get source關鍵字，將會告訴你，你當前操作的頁面，所有html文字，按圖索驥，根據你的定位方式是否真的能在當前頁面中找到你定位的元素。get source將是你除錯路上的好幫手！