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基本語法

image.png

firefox快速獲取XPath 和 CSS 路徑

firebug 插件和 firepath 插件安裝

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

image.png

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

image.png

啟動firebug

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

image.png

快速獲取XPath 和CSS路徑

獲取XPath 路徑

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

image.png

獲取CSS路徑

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

image.png

絕對路勁和相對路徑

相對路徑：相對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獲取絕對路徑，默認不勾選獲取相對路徑，后續使用推薦用相對路徑。

image.png

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

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

image.png

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的html中css路径和xpath路径,6.1 HTML的简单介绍和快速获取XPath和CSS路径的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。