在前一篇文章，利用一個免費的爬蟲練習網站來用n8n抓取網頁資料，其中學到如何設置HTTP Request節點與split out節點，今天要嘗試另一種做法，以HTML擷取，因此需要找到CSS selector。以這個方式比較可以適用於其他網站。這次一樣是從YT影片做學習。

什麼是CSS Selector?

在寫爬蟲時，CSS Selector 是一個非常實用的工具。它原本是前端用來指定網頁元素並加上樣式的語法，但在爬蟲裡，我們用它來精準找到要抓的資料。

實作練習

主要流程是建立HTTP Request→整理HTML取得CSS Selector→存進檔案

1. 建立HTTP Request節點

   1. Method選擇GET
   2. 貼上測試的網址到url欄位

2. 建立HTML節點，選用Extract HTML Content功能

   1. 打開網址的檢查，點選element查找需要的物件資訊標籤。
   2. 填入key、CSS Selector等欄位，這裡我們將將這個key取名為item，CSS Selector則填入div#house-list a，來取得每一間房子的資訊。
      

3. 建立split out節點

   1. 前一步取得的item包含每間房的所有資訊，所以要來一一分割取出。
   2. 因為有許多資訊，要一個一個找HTML很花時間，我們可以用LLM來取得每個欄位的CSS Selector。

4. 建立第二個HTML節點，選用Extract HTML Content功能

   1. 因為有許多資訊，要一個一個找HTML很花時間，我們可以用LLM來取得每個欄位的CSS Selector。
      

5. 建立Edit Fields節點

   1. 選擇我們想要的資料欄位
      

6. 建立google sheet節點 https://docs.google.com/spreadsheets/d/1XzmNiw4FGyeRyehxBkGdkFOtnREs3delcX4MWbZC4ro/edit?usp=sharing

資料來源

https://n8n-house-practice.darrelltw.com/
https://youtu.be/pfd9YSh5eJ8?si=_5D5HbBeLeXY035T