Html 如何查找 xPath

Path 是我們在 HMTL 中定位元素的最常用辦法。

在瀏覽器中打開 F12 調試窗口，然后右鍵找到你需要定位的 td 標簽。

在代碼中，找到 Copy，在 Copy 下面有一個 xPath。

粘貼到記事本中。

例如，我們上面拷貝的 xPath 為： //*[@id="ember160"]/td[1]

這個就是你需要的的 xPath 路徑了。

Path（XML Path Language）是一種用于定位 XML 文檔中節點的語言，同時也廣泛應用于 HTML 頁面元素的定位。在 UI 自動化測試中，XPath 是非常強大且靈活的元素定位方式，可以根據元素的層級結構、屬性值、文本內容等特征來準確定位元素。以下是一些常用的 XPath 定位方式及示例：

絕對路徑定位：
使用元素的絕對路徑（從根節點開始）來定位元素。
例：/html/body/div[1]/form/input[2]
相對路徑定位：
使用元素的相對路徑（相對于當前節點）來定位元素。
例：//div[@class='container']//input[@id='username']
使用元素屬性定位：
根據元素的屬性值來定位元素。
例：//input[@name='password']
使用文本內容定位：
根據元素的文本內容來定位元素。
例：//button[text()='Submit']
使用邏輯運算符：
可以使用邏輯運算符（and、or、not）結合多個條件來定位元素。
例：//input[@id='username' and @name='username']
使用通配符定位：
使用通配符（*）來匹配任意節點或任意屬性值。
例：//*[@id='loginForm']
使用索引定位：
使用索引來定位元素，索引從 1 開始。
例：//ul/li[2]
使用軸定位：
使用軸（ancestor、descendant、preceding-sibling 等）來定位元素。
例：//div[@class='container']/preceding-sibling::label

XPath 定位方式非常靈活，可以根據需要選擇合適的定位方式。在編寫復雜的 XPath 表達式時，建議先在瀏覽器的開發者工具中驗證 XPath 表達式是否能夠準確地定位到目標元素。同時，避免使用過于復雜或易變的 XPath 表達式，以確保定位的穩定性和可維護性。希望以上內容能夠幫助你更好地理解和應用 XPath 定位方法。如果有任何問題或需要進一步的幫助，請隨時告訴我。祝你在 UI 自動化測試中取得成功！

信很多小伙伴已經聽說過Xpath，之前小編也寫過一篇關于Xpath的文章，感興趣的小伙伴可以戳這篇文章如何利用Xpath抓取京東網商品信息以及Python網絡爬蟲四大選擇器（正則表達式、BS4、Xpath、CSS）總結。今天小編繼續給大家介紹一些Xpath知識點，希望對大家的學習有幫助。

1、Xpath讓我們可以使用一種類似于Windows下的文件路徑的方式，讓我們可以定位到HTML或者XML結構中的具體元素。Xpath本身包含標一些準函數庫，可以讓我們的Xpath語法更加強大。

2、在HTML結構中，有一定的層級關系，主要的關系包括：父節點、子節點、同胞節點（兄弟節點）、先輩節點、后代節點。

一般的，像類似于<head>這種結構，稱之為一個節點。如上圖，根據層次關系，我們可以知道<body>節點是<nav>的父節點，相應的，<nav>節點是<body>節點的子節點。同胞節點又叫兄弟節點，一般的處于同級層次的節點叫同胞節點，如上圖中的<nav>節點和第一個<div>節點、177~181行的<li>標簽都是屬于同胞節點。先輩節點又叫祖先節點，一般的，一個節點的上層以上的節點均稱為先輩節點，所以父節點也是屬于先輩節點的一種。基于此，我們又可以稱<body>節點是<nav>的先輩節點。相對應的，一個節點的下層以下的節點均稱為后代節點，所以子節點也是屬于后代節點的一種。基于此，我們又可以稱<nav>節點是<body>節點的后代節點。

3、理解這些節點之間的關系之后，可以方便我們更好的理解Xpath語法，下表是部分常用的Xpath語法。

表達式	詳解
//@class	選取所有名為class的屬性
/article	選取根元素article
//div	選取所有div子元素
article	選取所有article元素的所有子節點
article/a	選取所有屬于article的子元素的a元素
article//div	選取所有屬于article元素的后代的div元素

這里特別強調“/”和“//”的區別，“/”一般代表的某個元素的子節點，而不是全部的后代節點；而“//”一般代表的某個元素的后代節點，范圍比“/”代表的要更加廣泛一些。@符號后邊時常跟著class，代表選取名為class屬性的節點，比較常見。

4、下面針對具體的網頁源碼，讓大家了解一下網頁結構。

如上圖中的紅色框框中，class為屬性，而等于號后邊的“grid-5”即為屬性值，有的時候節點內不只是一個屬性，如上圖中的196行中，就有兩個屬性。

5、為了更加方便的定位到div或者其他節點下的標簽，我們需要繼續進一步的進行定位鎖定，下表是部分常用的Xpath語法。

表達式	詳解
//div[@lang]	選取所有擁有lang屬性的div元素
//div[@lang='eng']	選取所有擁有lang屬性為eng的div元素
/article/div[1]	選取屬于article子元素的第一個div元素
/article/div[last()]	選取屬于article子元素的最后一個div元素
/div/*	選取屬于div元素的所有子節點
//*	選取所有元素
//div/a \| //div/p	選取所有div元素的a和p元素

掌握了Xpath語法知識之后，我們就可以通過Xpath語法來進行編寫Xpath表達式，以提取網頁上的目標數據。

千里之行，始于足下。如果想學好Xpath，更是需要勤加使用。

在線咨詢

上一篇：從零開始維護一個編程類電子書項目
下一篇：網頁編輯器Pinegrow Web Editor，開

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html 如何查找 xPath

您的項目需求