自動化測試開發(fā)輔助工具——F12開發(fā)者工具介紹！

猿友 2021-07-26 17:30:23 瀏覽數(shù) (6646)

反饋

在學習selenium自動化測試框架的時候，我們會了解到selenium定位的幾種方式，其中最出色的定位器當屬Xpath了(當然其他幾種定位器也很好用）。然而很多小伙伴都沒有學過xpath，這時候我們可以采用一些工具來幫我們進行Xpath的生成（或其他元素的定位），接下來我們來介紹一些比較有名的工具，最后我們介紹一下本篇文章的關(guān)鍵——F12開發(fā)者工具。

注：selenium中可以應(yīng)用的定位器有很多，但他們或多或少都有一定的缺陷，其他比如利用標簽或者利用id定位可能會遇到?jīng)]有id或者多個標簽的情況。但是xpath和css選擇器兩種選擇器可以盡可能的忽視這些情況，其中xpath在選擇上會比css選擇器更加精準（因為xpath設(shè)計的目的就是為了在xml文件中定位）。

Firebugs

firebugs的大名想必很多自動化測試的開發(fā)者都有所耳聞。這是一款開源的web開發(fā)工具，使用它可以檢查和編輯html與css，調(diào)試和動態(tài)執(zhí)行JavaScript，還能監(jiān)控網(wǎng)絡(luò)的請求。它獨特的元素查看方式給很多前端開發(fā)工作者和web頁面測試人員帶來了很多幫助，只需要選中你需要的元素，你就可以查看這個元素的各種信息（元素名稱，父級結(jié)構(gòu)，應(yīng)用在其上的css和JavaScript監(jiān)聽事件等）。不過這個工具（實際上應(yīng)該算火狐瀏覽器的插件）已經(jīng)停止開發(fā)更新和維護了。雖然如此，但最新的火狐內(nèi)置開發(fā)者工具devtools也基本就是firebugs的加強版，吸收了它的所有優(yōu)點，我們可以在devtools中體驗firebugs曾經(jīng)帶給我們的便捷。

firepath

firepath也是一款火狐瀏覽器的插件，這款插件可以在你選中元素的時候查看這個元素的Xpath語法。我們之前說過Xpath定位器是selenium中最出色的定位器，但是學習xpath語句也需要一定時間和精力，我們使用firepath直接生成對應(yīng)的Xpath語法，就可以直接應(yīng)用在Xpath定位器了。

F12開發(fā)者工具

這里的F12開發(fā)者工具指的是谷歌、火狐、ie和edge瀏覽器的f12開發(fā)者工具。在相互借鑒學習中，它們的f12開發(fā)者工具最終都走向了功能相似的局面，所以小編在這里把它們合在一起介紹。但是，ie瀏覽器即將停止支持，而且ie瀏覽器的F12開發(fā)者工具不支持xpath語句查看，小編這里不推薦它。另外edge和谷歌瀏覽器的內(nèi)核是同源的，他們的F12開發(fā)者工具也是相似的，但這里谷歌瀏覽器的F12開發(fā)者工具不支持中文（edge和火狐都支持中文）所以小編建議可以使用edge或者火狐進行調(diào)試，效果都是不錯的。

之所以先介紹之前兩款插件，是因為在當前，f12開發(fā)者工具都集成了這些功能，很多以前需要用這些插件才能實現(xiàn)的功能，現(xiàn)在只用f12開發(fā)者工具就能實現(xiàn)了，接下來就讓我們來看看f12開發(fā)者工具具體怎么用吧（操作大致相同，不同的點小編會分開講述）：

第一步：前往目標頁面，點擊F12（或者右鍵->檢查）打開F12開發(fā)者工具：

F12開發(fā)者工具

（這是edge的f12開發(fā)者工具，有中文支持）

這里的開發(fā)者工具幾家瀏覽器基本都是這樣的頁面。左上角的元素選擇工具點擊后可以進入選擇狀態(tài)，這種狀態(tài)可以在html頁面中選擇一個元素進行選取，移動到想要選中的區(qū)域后點擊即可選中該元素，同時在HTML代碼中選中對應(yīng)代碼，在css樣式欄中更新選中的元素的樣式。

選擇元素