Selenium3自動化測試【13】FireFox與Chrome瀏覽器元素定位

目前大部分瀏覽器都內置了相關插件或組件，可以幫助咱們快速、簡潔地展現各種元素的屬性定義、DOM結構、CSS樣式等屬性。本書中使用的瀏覽器主要是FireFox、Chrome（這2款瀏覽器也是做爲開發者經常使用的瀏覽器），所以本節介於這2款瀏覽器一塊兒看看這些工具（組件）的使用方法。

火狐（FireFox）瀏覽器

若是你們對火狐瀏覽器較爲熟知，在舊版本上的FireBug，你們必定影響深入，FireBug功能很是強大。
2016年12月FireBug宣佈中止更新，新版本的火狐瀏覽器已經看不到FireBug影子。而FireBug不是消失了，而是Firebug被合併到FireFox DevTools內置工具中。

1. 前端工具（FireFox）：FireFox Developer Tools
   寫本書時FireFox的最新版本是FireFox Quantum 60.0.1，新版的FireFox，須要學會使用自帶的FireFox Developer Tools工具。打開FireFox經過按F12能夠調用出來，如圖所示。
   
   以Bing首頁爲例，經過F12，調用FireFox Developer Tools，單擊下圖中的 圖標，從頁面中選擇一個元素，選擇的是Bing的輸入框，此時在【查看器】能夠看到凸顯了輸入框的Html代碼，如圖所示，能夠看到跟咱們以往所熟知的Firebug沒有任何區別。
   

   谷歌（Chrome）瀏覽器

   Chrome瀏覽器跟FireFox瀏覽器同樣，也有對應的開發者工具。

2. 前端工具（Chrome）：Chrome開發者工具
   Chrome 開發者工具是一套內置於Google Chrome中的Web開發和調試工具，可用來對網站進行迭代、調試和分析。在Chrome菜單中選擇 【更多工具】 >【 開發者工具】（經過F12能夠調用）。
   在頁面元素上右鍵單擊，選擇 「檢查」，在Elements中就能看到咱們定位元素的id、name、class等。例如Bing輸入框，如圖5-4所示，經過Bing輸入框元素上右鍵單擊「檢查」，便可在Elements中看到該元素的html代碼，右鍵單擊選擇copy咱們就能複製出css、xpath定位方式的代碼。
   

[【測試全系列視頻課程】請點擊我哦.....

](https://edu.51cto.com/lecturer/968349.html)

---

圖書京東、噹噹有售
京東：https://item.jd.com/12784287.html
噹噹：http://product.dangdang.com/29177828.html

---