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