Web UI 自動化其實就是在頁面元素，所以在真正進入頁面元素操作之前，我們先認識下我們後面會用到的一些HTML相關知識。

HTML的簡單介紹

什麼是HTML

HTML(Hyper Text Markup Language):指的是超文本標記語言，他不是一種編程語言，而是一種標記語言，HTML包括一套標記標籤，使用標籤來描述網頁。

HTML 基本結構

常見術語

標籤：

HTML 元素：指從開始標籤到結束標籤的所有代碼

元素屬性： 標籤可以擁有屬性，如下input標籤擁有value、class、type屬性

屬性值：每個屬性對應的值，就是屬性值。 如上面的 value屬性的值為 「百度一下」 ，type的屬性值「submit」

快速獲取xpath 和CSS路徑

什麼是XPath

XPath 是在XML文檔中查找信息的一種語言，XPath 可用來在 XML 文檔中對元素和屬性進行遍歷。雖然XPath 是用來查找XML節點，但同樣可以用來查找HTML文檔中的節點，因為HTML和XML結構類似。簡單說XPath就是選擇XML或者HTML文件中節點的方法。

XPath基本語法

firefox快速獲取XPath 和 CSS 路徑

firebug 插件和 firepath 插件安裝

打開火狐，進入：about:addons ,點擊「擴展」，搜索firebug，並點擊安裝便可。（注意firefox55+ 可能存在版本兼容問題）安裝完成會在瀏覽器右上角多出標籤。

同樣方式搜索 firepath ，並點擊安裝並重啟火狐。

啟動firebug

可以打開網頁後，使用快捷鍵F12打開firebug ，也可以點擊瀏覽器右上角的標籤打開也可以頁面右鍵「使用firebug查看元素」，打開後如下， 其中firepath 是firebug的插件，使用需要依賴firebug。

快速獲取XPath 和CSS路徑

獲取XPath 路徑

如下圖標註順序點擊，便可以在4位置看到「百度一下」按鈕的xpath路徑

獲取CSS路徑

如下，切換到CSS選項，然後其它操作同獲取xpath路徑，便可以獲取到你要元素的CSS路徑。

絕對路勁和相對路徑

相對路徑：相對Web 某一位置作為參考基礎而建立的目錄路徑就叫相對路徑。

絕對路徑：以Web 根目錄為參考的基礎目錄路徑，就叫絕對路徑。

例如百度首頁中的「新聞」鏈接的xpath值中相對路徑是：.//*[@id="u1"]/a[1] 相對id屬性為『u1』下的第一個a標籤。絕對路徑是：html/body/div[2]/div[1]/div/div[3]/a[1] ， 以html為根節點，一層一層下來。

XPath 相對路徑和絕對路徑的切換

如下勾選"Generate absolute XPath 則表示firepath獲取絕對路徑，默認不勾選獲取相對路徑，後續使用推薦用相對路徑。

Chrome 瀏覽器快速獲取XPath 和 CSS路徑

打開頁面，打開Chrome開發者工具（F12快捷鍵），選取一個標籤元素，右鍵-->copy-->Copy selector/ Copy XPath

Q

&

A

現在版本的 Firefox 都已經無法安裝 firebug 和 firepath了，那還有沒有類似的插件推薦的？

答：有的，我們下回介紹 。有興趣可以先自己google看看。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！