n8n 爬蟲進階：當 CSS class 混淆失效，用 Xpath 與屬性定位終結跑版惡夢

你是否在 n8n 爬蟲的旅程中，遇到過這樣一個令人抓狂的場景？你花了好幾個小時，用 Chrome 開發者工具，精準地找到了目標資料的 CSS Selector，它可能是 div.css-1dbjc4n.r-13awgt0 或是 #\__next > div > main > div:nth-child(2)。你的爬蟲在當下完美地運行，成功抓取到數據。

但一覺醒來，當你再次執行同一個工作流時，它卻突然失效了！HTML Extract 節點回傳了一個空值。你回去檢查網頁，發現那個 class 名稱，竟然從 r-13awgt0 變成了一串全新的、同樣看不懂的亂碼。你的爬蟲，因為網站前端工程師的一次小小更新，就徹底「跑版」了。

這，就是所有現代網站爬蟲開發者都會面臨的「動態與混淆 class 名稱」挑戰。

這篇文章將是你的爬蟲定位策略進階指南。我們將帶你深入理解為什麼 class 名稱會「善變」，並提供兩大核心解決方案——尋找穩定屬性與學習使用 Xpath——讓你能夠擺脫對 class 名稱的依賴，打造出更強固、更能抵抗網站改版、永不跑版的專業級爬蟲。

零基礎帶你完成屬於自己的n8n自動化流程

內容目錄

為什麼我的 CSS Selector 一覺醒來就失效了？認識「動態 class 名稱」的元兇

要解決問題，必先理解問題的成因。你遇到的那些看起來像亂碼的 class 名稱（例如 css-1dbjc4n），並不是網站工程師故意刁難爬蟲，而是現代前端開發框架下的必然產物。

前端框架 (React, Vue, Svelte): 現代網站大多使用這些框架來建構。它們會將網頁拆解成一個個獨立的「元件」。
CSS 模組化 (CSS Modules, Styled-Components): 為了避免不同元件之間的 CSS 樣式互相污染（例如，A 元件的 .title 樣式，影響到 B 元件的 .title），開發者會採用各種模組化技術。這些技術在最終「建置 (Build)」網站時，會自動地為每個元件的 class 名稱，生成一串獨一無二的、通常是亂碼的 hash 字串。

這就導致了：這些 class 名稱，從來就不是設計給人或爬蟲看的，它們純粹是給機器看的，並且隨時可能因為程式碼的任何一點小變動而重新生成。

結論： 如果一個網站的 class 名稱看起來像 product-card__title 這樣有語義，那它通常是穩定的。如果它看起來像 r-13awgt0 或 Card_card__1J2s3，那麼，絕對不要依賴它作為你爬蟲的定位依據！

策略一 (首選)：尋找穩定不變的「測試/語義屬性」

在與善變的 class 名稱搏鬥之前，我們應該先尋找那些由開發者為了「測試」或「無障礙 (Accessibility)」而特意加上去的、通常穩定不變的屬性。

請睜大眼睛，在 HTML 程式碼中尋找以下這些屬性：

data-testid
data-cy
data-qa
aria-label
role

這些 data-* 屬性，通常是前端工程師為了方便進行「自動化測試」而加入的鉤子 (hook)，它們的值通常具有業務語義（例如 data-testid="product-price"），並且極少會變動。

如何使用屬性定位？ CSS Selector 提供了強大的屬性選擇器語法 [屬性名稱="屬性值"]。

HTML 範例	穩定的 CSS Selector
`<div data-testid="product-title">商品名稱</div>`	`[data-testid="product-title"]`
`<button aria-label="關閉視窗">X</button>`	`[aria-label="關閉視窗"]`
`<div role="alert">錯誤訊息</div>`	`[role="alert"]`

匯出到試算表

實踐建議： 在你決定使用複雜的 Xpath 之前，請務必先花幾分鐘，仔細檢查目標元素及其周圍，是否存在這些 data-* 或 aria-* 屬性。在大多數專業的網站上，你都會有所斬獲。這永遠是你最簡單、最穩定的首選策略。

策略二 (王牌)：XPath 入門 – 不只看樣式，更看「內容」與「結構關係」

如果一個網站連穩定的屬性都沒有提供，我們就需要請出終極王牌——XPath。

XPath vs. CSS Selectors

CSS Selector: 它的本職工作是為了「套用樣式」。因此，它最擅長的是根據 id, class 等與外觀相關的屬性來進行選擇。
XPath (XML Path Language): 它的本職工作是在一個樹狀結構的文件（如 HTML/XML）中進行「路徑導航」。因此，它不僅能看屬性，更擅長根據「文字內容」和「結構關係（例如：父、子、兄弟姊妹）**」來進行定位。

當 class 名稱不可靠時，網頁上的「文字內容」（例如「價格」、「作者」）和「結構關係」（例如「『價格』這兩個字右邊的那個區塊」）往往是最穩定不變的。

XPath 實用招式懶人包：三個你會立刻用上的查詢語法

XPath 的語法博大精深，但你只需要掌握以下幾個最實用的「招式」，就能解決 90% 的難題。

第一式：根據「文字內容」定位

這是 XPath 最強大的功能之一。

目標： 找到那個文字內容完全等於「接受全部」的按鈕。
XPath: //button[text()='接受全部']
目標： 找到那個文字內容包含「商品評論」的 h2 標題。
XPath: //h2[contains(text(), '商品評論')]

第二式：根據「任意屬性」定位

XPath 可以根據任何屬性，而不僅僅是 id 和 class。

目標： 找到那個 data-testid 屬性為 product-title 的 div。
XPath: //div[@data-testid='product-title']
解說： // 代表從文件任意位置開始尋找，div 是標籤名，[@屬性='值'] 是條件。

第三式：根據「結構關係」定位

這是最高級的技巧，讓你能夠實現「指物認物」。

目標： 找到 h2 標題文字為「售價」的下一個 div 元素（通常就是價格本身）。
XPath: //h2[text()='售價']/following-sibling::div[1]
解說：
- //h2[text()='售價']: 先找到那個基準點。
- /following-sibling::div: 尋找它所有的「弟弟」元素中，是 div 的那些。
- [1]: 指定我們要的是第一個弟弟。

實戰演練：在 n8n 的 `HTML Extract` 節點中應用 XPath

n8n 的 HTML Extract 節點原生支援 XPath！你只需要在設定時，做一個小小的切換。

目標： 在一個 class 名稱混淆的頁面上，抓取 h2 標題「產品規格」下方 div 中的內容。

HTTP Request / Browserless 節點:
- 正常抓取網頁的 HTML 內容。
HTML Extract 節點:
- 將上一步的輸出連接到此節點。
- Extraction Values > Add Value:
  - Key: product_spec
  - Return Value: Text
  - Extract From: 點擊下拉選單，從預設的 CSS Selector，切換到 XPath。
  - Selector / XPath: 填入我們剛剛學會的 XPath：//h2[text()='產品規格']/following-sibling::div[1]

執行後，即使這個 div 的 class 名稱每天都在變，只要頁面結構和「產品規格」這幾個字不變，你的爬蟲就能永遠精準地抓到你想要的資料。

打造「永不跑版」爬蟲的選擇器策略

現在你已經擁有了完整的武器庫。面對一個新的爬取目標時，請遵循以下決策流程，來選擇最穩定的定位策略：

最高優先級： 尋找 id 屬性。如果存在，直接使用 (#the-id)。
第二優先級： 尋找 data-testid, data-cy 等測試/語義屬性。如果存在，優先使用 ([data-testid="..."])。
第三優先級： 使用 XPath，根據可見的文字內容或穩定的結構關係來定位。
最低優先級 (盡量避免)： 使用語義化的 class 名稱 (.product-title)。
絕對禁止： 永遠不要使用自動生成的、混淆的 class 名稱 (.css-1dbjc4n) 或過於冗長的 DOM 路徑 (div > div > div > span)。