在學(xué)習(xí)selenium自動化測試框架的時候，我們會了解到selenium定位的幾種方式，其中最出色的定位器當(dāng)屬Xpath了(當(dāng)然其他幾種定位器也很好用）。然而很多小伙伴都沒有學(xué)過xpath，這時候我們可以采用一些工具來幫我們進(jìn)行Xpath的生成（或其他元素的定位），接下來我們來介紹一些比較有名的工具，最后我們介紹一下本篇文章的關(guān)鍵——F12開發(fā)者工具。
注：selenium中可以應(yīng)用的定位器有很多，但他們或多或少都有一定的缺陷，其他比如利用標(biāo)簽或者利用id定位可能會遇到?jīng)]有id或者多個標(biāo)簽的情況。但是xpath和css選擇器兩種選擇器可以盡可能的忽視這些情況，其中xpath在選擇上會比css選擇器更加精準(zhǔn)（因為xpath設(shè)計的目的就是為了在xml文件中定位）。
Firebugs
firebugs的大名想必很多自動化測試的開發(fā)者都有所耳聞。這是一款開源的web開發(fā)工具，使用它可以檢查和編輯html與css，調(diào)試和動態(tài)執(zhí)行JavaScript，還能監(jiān)控網(wǎng)絡(luò)的請求。它獨(dú)特的元素查看方式給很多前端開發(fā)工作者和web頁面測試人員帶來了很多幫助，只需要選中你需要的元素，你就可以查看這個元素的各種信息（元素名稱，父級結(jié)構(gòu)，應(yīng)用在其上的css和JavaScript監(jiān)聽事件等）。不過這個工具（實際上應(yīng)該算火狐瀏覽器的插件）已經(jīng)停止開發(fā)更新和維護(hù)了。雖然如此，但最新的火狐內(nèi)置開發(fā)者工具devtools也基本就是firebugs的加強(qiáng)版，吸收了它的所有優(yōu)點(diǎn)，我們可以在devtools中體驗firebugs曾經(jīng)帶給我們的便捷。
firepath
firepath也是一款火狐瀏覽器的插件，這款插件可以在你選中元素的時候查看這個元素的Xpath語法。我們之前說過Xpath定位器是selenium中最出色的定位器，但是學(xué)習(xí)xpath語句也需要一定時間和精力，我們使用firepath直接生成對應(yīng)的Xpath語法，就可以直接應(yīng)用在Xpath定位器了。
F12開發(fā)者工具
這里的F12開發(fā)者工具指的是谷歌、火狐、ie和edge瀏覽器的f12開發(fā)者工具。在相互借鑒學(xué)習(xí)中，它們的f12開發(fā)者工具最終都走向了功能相似的局面，所以小編在這里把它們合在一起介紹。但是，ie瀏覽器即將停止支持，而且ie瀏覽器的F12開發(fā)者工具不支持xpath語句查看，小編這里不推薦它。另外edge和谷歌瀏覽器的內(nèi)核是同源的，他們的F12開發(fā)者工具也是相似的，但這里谷歌瀏覽器的F12開發(fā)者工具不支持中文（edge和火狐都支持中文）所以小編建議可以使用edge或者火狐進(jìn)行調(diào)試，效果都是不錯的。
之所以先介紹之前兩款插件，是因為在當(dāng)前，f12開發(fā)者工具都集成了這些功能，很多以前需要用這些插件才能實現(xiàn)的功能，現(xiàn)在只用f12開發(fā)者工具就能實現(xiàn)了，接下來就讓我們來看看f12開發(fā)者工具具體怎么用吧（操作大致相同，不同的點(diǎn)小編會分開講述）：
第一步：前往目標(biāo)頁面，點(diǎn)擊F12（或者右鍵->檢查）打開F12開發(fā)者工具：
（這是edge的f12開發(fā)者工具，有中文支持）
這里的開發(fā)者工具幾家瀏覽器基本都是這樣的頁面。左上角的元素選擇工具點(diǎn)擊后可以進(jìn)入選擇狀態(tài)，這種狀態(tài)可以在html頁面中選擇一個元素進(jìn)行選取，移動到想要選中的區(qū)域后點(diǎn)擊即可選中該元素，同時在HTML代碼中選中對應(yīng)代碼，在css樣式欄中更新選中的元素的樣式。
（這是Firefox的f12開發(fā)者工具，也有中文支持）
在html代碼中右鍵就可以查看對應(yīng)的Xpath了（右鍵->復(fù)制，選擇xpath或者完整的xpath）。
（這是Chrome的F12開發(fā)者工具，沒有中文支持）
作為測試，我們所需要做的，就是獲取頁面的元素然后對其操作，而使用f12開發(fā)者工具，可以定位到想要定位的元素，然后生成對應(yīng)的xpath，我們只需要在自動化測試的代碼中使用Xpath定位即可定位到我們想要的元素。
另外這些瀏覽器還提供了選擇器定位的方法進(jìn)行定位（也就是css選擇器），也是一種很不錯的定位方式。
小結(jié)
有了F12開發(fā)者工具，現(xiàn)在小伙伴們還會擔(dān)心firebugs停止維護(hù)了后selenium定位不好定位嗎？更多F12開發(fā)者工具的學(xué)習(xí)內(nèi)容可以關(guān)注W3Cschool的后續(xù)文章！
