當技術為你的生活帶來便利，他才有存在的意義

為什麼寫這篇文章

1. 如果你跟著這幾天的教學走還是遇到一些莫名其妙的問題，希望在今天的文章有得到你想要的解答
2. 這幾天所教的技巧足以讓你爬下絕大多數的網頁資訊了，學習爬蟲只是一個過程，我們的目標是希望能靠這些數據給我們帶來便利，所以今天也分享一些思路給大家

今日目標

1. 優化爬蟲

1.1 優化分成哪些面向?

1.2 優化執行效率及穩定度

1.3 背景執行並減少記憶體的消耗

2. 學會爬蟲，之後呢？

1. 優化爬蟲

昨天我們已經完成爬蟲所需要的功能了，下一步要思考的是如何優化

1.1 優化分成哪些面向?

前面【Day13】refactor-重構程式碼，讓合作夥伴對你比讚在討論如何讓你在開發上更有效率，原則上不影響輸出的結果；而今天討論的優化是一個多面向的問題，我把他區分成顯性及隱性兩種：

• 顯性：使用者肉眼可見
  • 改善使用者操作流程、介面
  • 程式執行過程的畫面優化
• 隱性：使用者覺得自己的電腦變順了(不過他們通常不會聯想到是程式優化了)
  • 更好地執行效率
  • 使用更少的記憶體
  • 執行的穩定性

優化是一條沒有盡頭的路，上面我只是提了幾個常見要注意的點而已，接下來我們就來實際優化現在的爬蟲吧～

1.2 優化執行效率及穩定度

• 遇到的問題

  1. 在 driver.wait 加上等待時間後偶爾還是會出現登入失敗或是抓不到追蹤人數的問題
  2. 在爬蟲的時候會影響到我看 youtube 的流暢程度

• 判斷造成的原因

  1. 本身的網路速度太慢，造成網頁過了 driver.wait 的等待時間後依舊還沒完成載入
  2. FB、IG 粉專都是充滿圖片的頁面，載入這些資源時消耗太多流量

• 優化的方式
  因為本專案爬蟲所分析的內容都跟圖片無關，所以只要不載入這些資源就有以下好處：

  1. 減少瀏覽器使用流量
  2. 減少瀏覽器載入時間

  想要知道如何不載入圖片，你可以在 Google 搜尋 selenium chrome參數 ，有很多熱心的大神已經幫你整理好常用的參數了

  • 打開 initDrive.js 在 chrome 的 option 加入不載入圖片的參數

    options.addArguments('blink-settings=imagesEnabled=false')//不加載圖片提高效率
    

    加上這段程式後，在專案資料夾的終端機(Terminal)執行指令 yarn start ，便可以很明顯的感受到網頁載入速度變快很多，並且所有圖片都沒有載入(下圖)

    

1.3 背景執行並減少記憶體的消耗

• 遇到的問題
  1. 有時爬蟲執行到一半手賤點一下爬蟲瀏覽器導致程式拋出例外
  2. 爬蟲執行時候的畫面一直閃好煩
  3. 在記憶體 8G 的電腦執行爬蟲時覺得電腦變得很頓
• 判斷造成的原因
  1. 人有時控制不住自己的手
  2. 執行爬蟲時干擾到使用者的日常工作
  3. chrome 吃太多記憶體
• 優化的方式
  在爬蟲每個步驟及功能都穩定後，其實不需跳出瀏覽器視窗來觀察他的動作，讓瀏覽器在背景執行不但不會干擾使用者工作更能減少記憶體的浪費

  • 打開 initDrive.js 並在 chrome 的 option 加入不打開瀏覽器視窗的參數如下

    options.addArguments('--headless')//瀏覽器不提供頁面觀看，linux下如果系統是純文字介面不加這條會啓動失敗
    options.addArguments('--log-level=3')//這個option可以讓你跟headless時網頁端的console.log說掰掰
    
    //下面參數能提升爬蟲穩定性    
    options.addArguments('--disable-dev-shm-usage')//使用共享內存RAM
    options.addArguments('--disable-gpu')//規避部分chrome gpu bug
    

    設定完這些後，在專案資料夾的終端機(Terminal)執行指令 yarn start ，就會發現爬蟲變成背景執行，並且電腦順暢許多

2. 學會爬蟲，之後呢？

原本我打算用兩天的文章來教取得當日貼文數量的方法，但文章寫完後就刪掉了，因為讀者完全有能力用這幾天所教的技術自行實踐這項功能；我希望用這30天分享更多不同的技術及有幫助的觀念

授人以魚不如授人以漁

使用模擬瀏覽器來爬蟲我認為是最符合初學者的，你不用去分析複雜的 api，去猜裡面的參數是甚麼意義

你需要做的只是把你平常操作的流程用程式的方式來替你做一遍，然後抓取你所需要的資訊

我寫的文章只是爬蟲的技巧的冰山一角，但只要有了開頭以及研究的方向我相信你是有能力獨立完成其他網頁的爬蟲

現在人工智慧流行，大數據當道，爬蟲是取得大數據的方法之一，你能透過這些數據分析的東西太多了，我在這裡簡單舉例：

• 追蹤人數爆減/爆增
  • 是因為某一篇貼文引起的嗎?
  • 當天是否有媒體新聞的報導?
  • 粉專經營者是否有特殊決策?
• 發文頻率與追蹤人數的關係
  • 發文頻率是否與追蹤人數成長正相關
  • 怎麼樣的發文頻率是最恰當的
  • 不同行業的發文頻率比較
• 貼文按讚與回應
  • 什麼樣的貼文會獲得最多迴響
  • 獲得最多讚的貼文有什麼共同特徵

隨便舉的例子都能獨立出來都能成為一篇論文或是商品，爬蟲是一個很強的武器，但這把武器的強度要看使用者如何發揮他，我想會看這系列教學文章的讀者心中都有想要爬蟲的目標，開始動手實作吧！

再次提醒，技術沒有善惡，人的使用方式才會有善惡，希望這份技術可以幫大家節省時間以及避免重工；如果你把它拿來盜取智慧財產、個人檔案及機敏資訊請自行負擔後續法律責任

筆者碎碎念

我希望看完文章的讀者能夠吸收到問題思考的方式，不要只是單純的 copy & paste ，這樣對技術長期來講是在累積負債

如果你是程式的新手，你可以透過修改一些參數來看看結果會有什麼樣的變化，少加哪些參數是不是真的會有錯誤

不要害怕犯錯，因為學習程式的路上幾乎不存在一條完美的道路

你現在滿意的程式往往在幾個月後你會覺得當時怎麼寫的這麼爛

當你誕生出這個想法的時候就是成長了

⏭️ 下個階段

關於使用網頁爬蟲的技術文章就分享到今天，接下來我們要來研究 爬蟲資料如何儲存 ，敬請期待

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天json改寫的部分喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)
    • 填上IG登入資訊
  • 調整fanspages資料夾內目標爬蟲的粉專網址

參考資源

1. selenium啓動Chrome的進階配置參數

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

即使客戶不懂程式，你也可以讓他學習一點工程師的知識

我們要請客戶將爬蟲的網址列表填寫到什麼檔案呢?

專案在需求規格中有一條是在自己的電腦執行，在分析完各種檔案格式的優缺點後我決定使用json格式：

• txt
  • 優點：在所有作業系統中都能夠打開做編輯
  • 缺點：格式難以律定，只要使用者多個空格、表點符號…都容易造成程式的誤判
• excel
  • 優點：這是對使用者而言最友善的一種編輯器了，視覺化良好、操作友善
  • 缺點：不是所有人電腦都有安裝 excel 編輯器(像我朋友就沒有)
• json
  • 優點：在所有作業系統中都能夠打開做編輯，key-value 的格式易於理解、程式可直接讀取
  • 缺點：使用者需要花幾分鐘時間理解 json 格式的規則

今日目標

1. 了解 json 格式與基本規則，並建立 json 格式的粉專清單

1.1 json 格式與基本規則

1.2 在專案中建立 json 格式的粉專清單

2. 讓程式讀取 json 裡面的資料進行爬蟲

2.1 在專案引入 json 檔案

2.2 批量爬蟲程式撰寫

1. 了解 json 格式與基本規則，並建立一份 json 格式的粉專清單

今天說的這個部分應該是大部分小編最關心的，要每天手動瀏覽那麼多的粉專想想都很崩潰

所以要來跟大家介紹的一個很棒的文本格式：json (JavaScript Object Notation) ，他能幫助我們批量爬蟲，同時也是網頁 api 最常見的一種回傳格式

1.1 json格式與基本規則

json 可以包含 object (物件) 與 array (陣列)

• 物件

  • 為 key-value 的格式，用{...}包起來

    { "key" : "value" }
    
    { "姓名" : "寶寶不說" } //通常用於描寫一項屬性的數值
    

  • 多個物件使用 , 做為分隔

    { "key" : "value" , "key" : "value" }
    
    { "姓名" : "寶寶不說" , "性別" : "不明" } //多個物件可表達一個東西的多種屬性
    

• 陣列

  • 多個 value 之間使用 , 分隔，用[...]包起來

    [ value, value ]
    
    // 陣列與物件裡面value可以使用多種資料型態如下
    [ 0 , { "傳奇寶寶" : null } , "string" , false , ['test'] ]
    

1.2 在專案中建立json格式的粉專清單

建構邏輯：

1. 我們有許多粉專需要去追蹤，所以最外層會用 陣列(array)

2. 而每個粉專都有自己的屬性(title為粉專名稱、url為粉專網址)，所以陣列裡面的 value 採用 物件(object)

   [
       {
           "title": "粉專A",
           "url": "粉專A連結"
       },
       {
           "title": "粉專B",
           "url": "粉專B連結"
       }  
   ]
   

在專案建立的步驟：

1. 在專案資料夾中建立 fanspages 的資料夾，專門存放粉專頁面爬蟲要使用的json檔案
2. 在 fanspages 資料夾中新增 ig.json、fb.json 這兩個檔案，並依照上述json結構填上你要爬蟲的資訊
3. 你可以先複製下方範例做測試(筆者是以下貼圖的狂熱愛好者，歡迎一起追蹤按愛心XD)

ig.json

[
    {
        "title": "寶寶不說",
        "url": "https://www.instagram.com/baobaonevertell/"
    },
    {
        "title": "松尼",
        "url": "https://www.instagram.com/sweethouse.sl/"
    },
    {
        "title": "麻糬爸",
        "url": "https://www.instagram.com/mochi_dad/"
    },
    {
        "title": "好想兔",
        "url": "https://www.instagram.com/chien_chien0608/"
    },
    {
        "title": "ㄇㄚˊ幾兔",
        "url": "https://www.instagram.com/machiko324/"
    }
]

2. 讓爬蟲程式讀取 json 裡面的資料

2.1 在專案引入 json 檔案

• 引入 json 檔案時請注意相對路徑，建議先用 console.log 確認是否有正確引入
• 因為這個檔案是人工撰寫，可能會不小心複製到重複粉專，所以使用 filter 來過濾

let fanpage_array = require('../fanspages/ig.json');
//過濾掉重複的粉專頁面，減少資源浪費
fanpage_array = fanpage_array.filter((fanpage, index, self) =>
    index === self.findIndex(f => f.url === fanpage.url)
)
console.log(fanpage_array)

2.2 批量爬蟲程式撰寫

• 將前往粉專頁面與爬蟲的部分用 for/of迴圈 包起來(因迴圈內用到 async/await)，讓他依序前往粉專頁面抓資料

  for (fanpage of fanpage_array) {
      // 撰寫你要對fanpage做的事       
  }
  

• 我們要當個好爬蟲，每個頁面設定爬蟲停留 3-6 秒，不要因為自己的爬蟲造成別人伺服器的負擔

  這裡我們使用Math.random()取得區間亂數

  await driver.sleep((Math.floor(Math.random()*4)+3)*1000)
  

• 統整後完整程式如下

  crawlerIG.js

  let fanpage_array = require('../fanspages/ig.json');
  //過濾掉重複的粉專頁面，減少資源浪費
  fanpage_array = fanpage_array.filter((fanpage, index, self) =>
      index === self.findIndex(f => f.url === fanpage.url)
  )
  const ig_username = process.env.IG_USERNAME
  const ig_userpass = process.env.IG_PASSWORD
  const { By, until } = require('selenium-webdriver')
  exports.crawlerIG = crawlerIG;
  
  async function crawlerIG (driver) {
      const isLogin = await loginInstagram(driver, By, until)
      if (isLogin) {
          console.log(`IG開始爬蟲`)
          for (fanpage of fanpage_array) { // 用迴圈爬蟲每個粉專
              let trace = null
              const isGoFansPage = await goFansPage(driver, fanpage.url)
              if (isGoFansPage) {
                  //每個頁面爬蟲停留3~6秒，不要造成別人的伺服器負擔
                  await driver.sleep((Math.floor(Math.random() * 4) + 3) * 1000)
                  trace = await getTrace(driver, By, until)
              }
              if (trace === null) {
                  console.log(`${fanpage.title}無法抓取追蹤人數`)
              } else {
                  console.log(`${fanpage.title}追蹤人數：${trace}`)
              }
  
          }
      }
  }
  .//後面程式一樣
  .
  .
  

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

2. 確認畫面執行順序如你預期：Instagram自動登入 → 依序跳轉到指定帳號 → Facebook自動登入 → 依序跳轉到粉絲頁 → 關閉

3. 大概裝完一壺水的時間後，你就能看到 FB & IG 的追蹤人數嚕～

   

搭配上json後有沒有覺得自己功力大增XD，上面的是IG的範例，大家可以自己嘗試看看FB部分的如何改寫喔～

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天json改寫的部分喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)
    • 填上IG登入資訊
  • 調整fanspages資料夾內目標爬蟲的粉專網址

參考資源

1. JSON 格式與 JavaScript 解析教學範例
2. 用Math.random()取得亂數的技巧

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

數據顯示，工程師完成最後 20% 的工作時間跟之前的 80% 一樣多

完成功能後，重構是另一個開始

昨天我們完成了一個跑得動的程式，但很明顯這不是一個好的程式

大家應該有感受到隨著程式越來越長，我們對他的掌握力逐步下降

根據 Clean Code 的原則而言就是說這程式寫得很爛XD

很多人為了盡快完成功能而埋頭狂寫，但這樣容易導致你日後維護以及交接的困難性，你所負責的專案越大這個感受會更明顯

所以在完成功能後重構是必要的任務，他能提升你日後解決 bug、需求變更的工作效率

接下來就以昨天程式為範例來重構吧！

今日目標

了解 & 修正目前專案所犯下的錯誤

1. 主程式做了太多事情
2. 一個函式做了太多事情
3. 物件宣告的方式太複雜且多次被使用

1. 主程式做了太多事情

主程式就像是專案的總經理，他只需要知道大方向的架構；而架構裡面的細節就交給各部門處理，他只是溝通資料的橋樑

根據上述的邏輯，我們應該把在主程式中的函式轉移到另外的資料夾(ex:tools)，依據功能去命名檔名，範例如下:

1. 主程式 - index.js
2. 初始化瀏覽器 - tools/initDrive.js
3. Facebook爬蟲 - tools/crawlerFB.js
4. Instagram爬蟲 - tools/crawlerIG.js

在這樣的分工後我們的主程式是不是變得很乾淨呢？

index.js

require('dotenv').config(); //載入.env環境檔
const { initDrive } = require("./tools/initDrive.js");
const { crawlerFB } = require("./tools/crawlerFB.js");
const { crawlerIG } = require("./tools/crawlerIG.js");

async function crawler () {

    const driver = await initDrive();
    if (!driver) {//driver不存在就結束程式
        return
    }
    //因為有些人是用FB帳號登入IG，為了避免增加FB登出的動作，所以採取先對IG進行爬蟲
    await crawlerIG(driver)
    await crawlerFB(driver)

    driver.quit();
}

crawler()

2. 一個函式做了太多事情

記住一個大原則：一個函式只需要做一件事情！

現在我們把 FB 登入並取得追蹤人數寫在同一隻函式，這樣會增加你日後維護的困難度，因為函式越長，你越難除錯(debug)；以 loginFacebookGetTrace 這隻函式舉例，它實際上可以解構成好幾個功能：

1. 取得 Facebook(經典版/新版) 的爬蟲路徑 - getCrawlerPath
2. Facebook爬蟲 - crawlerFB
3. 登入Facebook - loginFacebook
4. 前往粉絲頁 - goFansPage
5. 取得追蹤人數 - getTrace

把每個功能獨立成函式，你就能輕鬆除錯(debug)。下面程式以 FB 爬蟲作為解構範例，你可以自己練習改寫 IG 的部分喔

crawlerFB.js

const fb_username = process.env.FB_USERNAME
const fb_userpass = process.env.FB_PASSWORD
const { By, until } = require('selenium-webdriver') // 從套件中取出需要用到的功能
exports.crawlerFB = crawlerFB;//讓其他程式在引入時可以使用這個函式

// FB有經典版以及新版的區分，兩者的爬蟲路徑不同，我們藉由函式取得各自的路徑
const { fb_head_path, fb_trace_path } = getCrawlerPath();

function getCrawlerPath () {
    if (process.env.FB_VERSION === 'new') {//如果是新版FB
        return {
            "fb_head_path": `//*[contains(@class,"fzdkajry")]`,
            "fb_trace_path": `//*[contains(@class,"knvmm38d")]`
        }
    } else {//如果為設定皆默認為舊版
        return {
            "fb_head_path": `//*[contains(@class,"_1vp5")]`,
            "fb_trace_path": `//*[@id="PagesProfileHomeSecondaryColumnPagelet"]//*[contains(@class,"_4bl9")]`
        }
    }
}

async function crawlerFB(driver) {    
    await loginFacebook(driver)
    const fanpage = "https://www.facebook.com/baobaonevertell/"
    await goFansPage(driver, fanpage)
    await driver.sleep(3000)
    await getTrace(driver)
}

async function loginFacebook(driver) {
    const web = 'https://www.facebook.com/login';//我們要前往FB
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入fb登入資訊
    const fb_email_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));
    fb_email_ele.sendKeys(fb_username)
    const fb_pass_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="pass"]`)));
    fb_pass_ele.sendKeys(fb_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.xpath(`//*[@id="loginbutton"]`)))
    login_elem.click()

    //因為登入這件事情要等server回應，你直接跳轉粉絲專頁會導致登入失敗
    //用登入後才有的元件，來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(fb_head_path)))
}

async function goFansPage(driver, web_url) {
    //登入成功後要前往粉專頁面
    await driver.get(web_url)
}

async function getTrace(driver) {
    let fb_trace = 0;//這是紀錄FB追蹤人數
    
    //因為考慮到登入之後每個粉專顯示追蹤人數的位置都不一樣，所以就採用全抓在分析    
    const fb_trace_eles = await driver.
        wait(until.elementsLocated(By.xpath(fb_trace_path)))
    for (const fb_trace_ele of fb_trace_eles) {
        const fb_text = await fb_trace_ele.getText()
        if (fb_text.includes('人在追蹤')) {
            fb_trace = fb_text.replace(/\D/g, '')//只取數字
            break
        }
    }
    console.log(`FB追蹤人數：${fb_trace}`)
}

3. 物件宣告的方式太複雜且多次被使用

我們要將建立瀏覽器的部分獨立成一隻js，原因如下

• 建立瀏覽器前需要做事前確認及複雜的設定
• 這個瀏覽器作為物件會被多次使用
• 如果瀏覽器的參數需要變更可以在一個檔案集中管理

基於上述原因，我們應該把他獨立出來，這樣你只需要在一個檔案管理你宣告的物件(瀏覽器)設定，而主程式很單純的使用回傳的物件(瀏覽器)即可

initDrive.js

exports.initDrive = initDrive;//讓其他程式在引入時可以使用這個函式

const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
const chrome = require('selenium-webdriver/chrome');
const options = new chrome.Options();
options.setUserPreferences({ 'profile.default_content_setting_values.notifications': 1 });//因為FB會有notifications干擾到爬蟲，所以要先把它關閉

const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

async function initDrive () {
    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    
    // 建立這個broswer的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
    
    //考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
    await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });

    return driver
}

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();//設定driver路徑
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
            return true
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

這篇文章是以自己的程式作為範例講解，如果你想更深入了解重構請閱讀重構—改善既有的程式設計，他深入淺出說明重構的原則讓我受益良多

程式碼往往沒有所謂最好的寫法，只有當下最合理的選擇。而需求永遠在變動，就算當下重構到很滿意，可能下個月再回來看又覺得不夠了。 - YH Yu

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

2. 觀察執行順序：Instagram 自動登入 → 跳轉到指定帳號 → Facebook自動登入 → 跳轉到粉絲頁 → 關閉

3. 確定與程式重構後能順利取得FB & IG的追蹤人數

   

如果你還有什麼問題或是覺得有可以改善的地方歡迎在下方留言討論

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的重構喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)
    • 填上IG登入資訊

參考資源

1. [Nodejs] module.exports 與 exports 的差別
2. 重構—改善既有的程式設計

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

有些需求不是複製貼上就能解決的

今日目標

1. 分析實作過程中可能會遇到的問題

1.1 瀏覽器關閉導致無法讀取網頁元件

1.2 跨網域(CORS)錯誤

2. 一隻程式爬完 FB & IG 粉專

2.1 分析程式結構邏輯

2.2 思考程式上有什麼地方需要改進

1. 實作過程中可能會遇到的問題

1.1 瀏覽器關閉導致無法讀取網頁元件

如果你直接把兩天文章複製貼上爬的話一定會看到這個錯誤訊息

WebDriverError: element not interactable

• 這是因為一次跳出兩個瀏覽器在執行，只要其中一個瀏覽器完成爬蟲任務觸發 driver.quit() 就會導致另一個還沒爬蟲完畢的瀏覽器因無法讀取元件而掛掉
• 面對這個問題，我建議開一個瀏覽器來處理：
  1. 因為跑爬蟲會消耗電腦的記憶體以及網路流量，我希望電腦跑爬蟲的時候不要影響我做其他事情的效率
  2. 使用一個瀏覽器在跑遇到問題時方便除錯

1.2 跨網域(CORS)錯誤

如果你把他改成一個瀏覽器執行，跑完 FB 粉專再跑 IG 粉專應該又會出現跨網域(CORS)問題的錯誤(目前只有 windows 作業系統才會遇到)

• 這是網域切換時因為一些安全性的疑慮而拒絕跳轉，像是從 https://www.facebook.com/ 跳轉到 https://www.instagram.com 就會遇到這個問題

• 這個問題在建立瀏覽器時加上設定 { acceptSslCerts: true, acceptInsecureCerts: true } 即可解決

  let driver = new webdriver.Builder().forBrowser("chrome").withCapabilities(options,
      { acceptSslCerts: true, acceptInsecureCerts: true }//這是為了解決跨網域問題
  ).build();
  

2. 一隻程式爬完 FB & IG 粉專

2.1 分析程式結構邏輯

為了幫助讀者能較快掌握程式的邏輯，我根據每個函式所做的功能以及執行步驟列出結構如下：

• crawler : 觸發爬蟲的函式

  1. 檢查 Driver 是否是設定

  2. 建立這個 browser 的類型

  3. 設定 browser 的視窗大小

  4. loginInstagramGetTrace : 登入IG並取得指定帳號的追蹤人數

     先執行 IG 爬蟲是因為有些人登入 IG 的方式是綁定 FB 帳號，這會導致我們程式需要判斷更多狀況；而讓IG先爬蟲就能避免這個問題嚕～

     1. 前往 IG 登入頁，填入登入資訊
     2. 點擊登入按紐
     3. 判斷是否登入成功
     4. 登入成功後跳轉指定帳號頁面
     5. 獲取指定帳號追蹤人數

  5. loginFacebookGetTrace : 登入 FB 並取得粉絲專業的追蹤人數

     1. 前往 FB 登入頁，填入登入資訊
     2. 點擊登入按紐
     3. 判斷是否登入成功
     4. 登入成功後跳轉指定粉專頁面
     5. 獲取指定粉專追蹤人數

  6. 關閉 browser

寫程式如同拼積木，隨著功能的增加程式的體積會越來越大，這裡我建議你寫一份程式架構圖的文件來輔助，未來遇到需求變更時看架構圖就能迅速修改

index.js

require('dotenv').config(); //載入.env環境檔
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用
//取出.env檔案的FB、IG資訊
const ig_username = process.env.IG_USERNAME
const ig_userpass = process.env.IG_PASSWORD
const fb_username = process.env.FB_USERNAME
const fb_userpass = process.env.FB_PASSWORD

const webdriver = require('selenium-webdriver'), // 加入虛擬網頁套件
    By = webdriver.By,//你想要透過什麼方式來抓取元件，通常使用xpath、css
    until = webdriver.until;//直到抓到元件才進入下一步(可設定等待時間)

const chrome = require('selenium-webdriver/chrome');
const options = new chrome.Options();
options.setUserPreferences({ 'profile.default_content_setting_values.notifications': 1 });//因為FB會有notifications干擾到爬蟲，所以要先把它關閉

function getCrawlerPath () {
    if (process.env.FB_VERSION === 'new') {//如果是新版FB
        return {
            "fb_head_path": `//*[contains(@class,"fzdkajry")]`,
            "fb_trace_path": `//*[contains(@class,"knvmm38d")]`
        }
    } else {//如果為設定皆默認為舊版
        return {
            "fb_head_path": `//*[contains(@class,"_1vp5")]`,
            "fb_trace_path": `//*[@id="PagesProfileHomeSecondaryColumnPagelet"]//*[contains(@class,"_4bl9")]`
        }
    }
}

async function loginFacebookGetTrace (driver) {
    const web = 'https://www.facebook.com/login';//我們要前往FB
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入fb登入資訊
    const fb_email_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));
    fb_email_ele.sendKeys(fb_username)
    const fb_pass_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="pass"]`)));
    fb_pass_ele.sendKeys(fb_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.xpath(`//*[@id="loginbutton"]`)))
    login_elem.click()

    // FB有經典版以及新版的區分，兩者的爬蟲路徑不同，我們藉由函式取得各自的路徑
    const { fb_head_path, fb_trace_path } = getCrawlerPath();
    
    //因為登入這件事情要等server回應，你直接跳轉粉絲專頁會導致登入失敗
    //用登入後才有的元件，來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(fb_head_path)))

    //登入成功後要前往粉專頁面
    const fanpage = "https://www.facebook.com/baobaonevertell/"
    await driver.get(fanpage)
    let fb_trace = 0;//這是紀錄FB追蹤人數
    
    //因為考慮到登入之後每個粉專顯示追蹤人數的位置都不一樣，所以就採用全抓在分析
    const fb_trace_eles = await driver.wait(until.elementsLocated(By.xpath(fb_trace_path)))
    
    for (const fb_trace_ele of fb_trace_eles) {
        const fb_text = await fb_trace_ele.getText()
        if (fb_text.includes('人在追蹤')) {
            fb_trace = fb_text
            break
        }
    }
    console.log(`FB追蹤人數：${fb_trace}`)
}
async function loginInstagramGetTrace (driver) {
    const web = 'https://www.instagram.com/accounts/login';//前往IG登入頁面
    await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作

    //填入ig登入資訊
    let ig_username_ele = await driver.wait(until.elementLocated(By.css("input[name='username']")));
    ig_username_ele.sendKeys(ig_username)
    let ig_password_ele = await driver.wait(until.elementLocated(By.css("input[name='password']")));
    ig_password_ele.sendKeys(ig_userpass)

    //抓到登入按鈕然後點擊
    const login_elem = await driver.wait(until.elementLocated(By.css("button[type='submit']")))
    login_elem.click()

    //登入後才會有右上角功能列，我們以這個來判斷是否登入
    await driver.wait(until.elementLocated(By.xpath(`//*[@id="react-root"]//*[contains(@class,"_47KiJ")]`)))

    //登入成功後要前往粉專頁面
    const fanpage = "https://www.instagram.com/baobaonevertell/"
    await driver.get(fanpage)

    let ig_trace = 0;//這是紀錄IG追蹤人數
    const ig_trace_xpath = `//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span`
    const ig_trace_ele = await driver.wait(until.elementLocated(By.xpath(ig_trace_xpath)))
    // ig因為當人數破萬時文字不會顯示，所以改抓title
    ig_trace = await ig_trace_ele.getAttribute('title')
    console.log(`IG追蹤人數：${ig_trace}`)
}

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            //設定driver路徑
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

async function crawler () {
    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    // 建立這個browser的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
    
    //考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
    await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });

    //因為有些人是用FB帳號登入IG，為了避免增加FB登出的動作，所以採取先對IG進行爬蟲
    await loginInstagramGetTrace(driver)
    await loginFacebookGetTrace(driver)

    driver.quit();
}

crawler()

2.2 思考程式上有什麼地方需要改進

看完上面的程式後，我想大部分的人都有點暈了XD，如果你有認真看程式應該有以下體會：

1. 閱讀起來有點吃力
2. 遇到錯誤時不好找問題
3. 很難掌握每個函式的功能
4. 幾個月後回來看這隻程式估計一臉茫然

如果還有更多的體會歡迎大家在下方留言(請鞭小力一點QQ)

明天會講程式碼的重構，透過重構我們可以更有效率的掌握程式；後天會講try-catch在本專案的應用，方便日後的除錯

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

2. 觀察執行順序是否為：Instagram自動登入 → 跳轉到指定帳號 → Facebook自動登入 → 跳轉到粉絲頁 → 關閉

   如果想要中斷終端機(Terminal)執行的程式，可以用下面按鍵組合:

   • Windows: Ctrl + c
   • Mac: control + c

3. 順利的話就能看到FB & IG的追蹤人數嚕～

   

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)
    • 填上IG登入資訊

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

學習，從複製開始

筆者有話先說

有了 Facebook 爬蟲的經驗後，我相信這篇大家是有能力獨自完成的，建議大家先用自己的方式來完成今日目標，這篇文章適合實作遇到問題或是你實作完成後再來參考

今日目標

1. 完成 IG 自動登入

1.1 分析 IG 登入頁面的元件

1.2 改用 css 抓取元件，完成 IG 自動登入

2. 從畫面判斷使用者是否登入成功

3. 前往 IG 帳號並取得追蹤人數

3.1 了解響應式網頁對爬蟲的影響

3.2 設定瀏覽器開啟時的視窗大小

3.3 完成前往 IG 帳號並取得追蹤人數的程式

1. IG 自動登入

1.1 分析 IG 登入頁面的元件

• 我在反覆使用 IG 登入 時發現登入的畫面偶爾會長不一樣(如下圖)導致Xpath路徑錯誤

  版本1	版本2

  

  |

  

• 先進入開發者模式確認紅框內元件的特徵

  

  • 在下圖我們觀察到 電話號碼、用戶名稱或電子郵件 以及 密碼 這兩個元件的 共通點：

    1. 都是 input 的 html 標籤

    2. 用 name 這個 attribute 來表示他們的作用

       

       

  • 登入按鈕 則用以下條件來取出：

    1. 使用 button 的 html 標籤

    2. 用 type 這個 attribute 來表示他要執行的動作

       

1.2 改用 css 抓取元件，完成 IG 自動登入

• 根據上面的分析後我們改用 css 抓取 IG 登入的元件來操作

  //填入ig登入資訊
  let ig_username_ele = await driver.wait(until.elementLocated(By.css("input[name='username']")));
  ig_username_ele.sendKeys(ig_username)
  let ig_password_ele = await driver.wait(until.elementLocated(By.css("input[name='password']")));
  ig_password_ele.sendKeys(ig_userpass)
  
  //抓到登入按鈕然後點擊
  const login_elem = await driver.wait(until.elementLocated(By.css("button[type='submit']")))
  login_elem.click()
  

  • 別忘記在 .env檔填寫 IG登入的帳號密碼

    #填寫自己登入IG的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
    IG_USERNAME='ig username'
    IG_PASSWORD='ig password'
    

2. 判斷使用者是否登入成功

• 與 FB 類似，IG 要登入之後才會有右上角功能列，這裡我使用他作為判斷登入與否

  

  //登入後才會有右上角功能列，我們以這個來判斷是否登入
  await driver.wait(until.elementLocated(By.xpath(`//*[@id="react-root"]//*[contains(@class,"_47KiJ")]`)))
  

3. 抓出 IG 追蹤人數

3.1 了解響應式網頁對爬蟲的影響

• 響應式網頁設計(RWD)是什麼？：網頁會根據瀏覽器解析度的不同重新排版，同一個網頁你在手機、平板、電腦看到的畫面配置都是不一樣的
• 如果你跟我一樣充滿實驗精神，你會發現 IG 的頁面會隨著螢幕寬度更改而重新排版，Xpath 的路徑也會跟著改變

  • 寬螢幕 Xpath

    

    //*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span
    

  • 窄螢幕 Xpath

    

    //*[@id="react-root"]/section/main/div/ul/li[2]/a/span
    

3.2 設定瀏覽器開啟時的視窗大小

• 為了避免因為螢幕寬度不一樣造成 Xpath 不同，所以我們要設定瀏覽器開啟時的視窗大小(本專案以寬螢幕作為範例)，這樣才能保證你的爬蟲在不同電腦有一樣的執行結果

  // 建立browser的類型
  let driver = await new webdriver.Builder().forBrowser("chrome").withCapabilities(options).build();
  //考慮到ig在不同螢幕寬度時的Xpath不一樣，所以我們要在這裡設定統一的視窗大小
  await driver.manage().window().setRect({ width: 1280, height: 800, x: 0, y: 0 });
  

3.3 完成前往 IG 帳號並取得追蹤人數的程式

• 在固定螢幕寬度後，使用 Xpath 就能穩定的抓出帳號追蹤人數

  //登入成功後要前往粉專頁面
  const fanpage = "https://www.instagram.com/baobaonevertell/"
  await driver.get(fanpage)
  await driver.sleep(3000)
  
  let ig_trace = 0;//這是紀錄IG追蹤人數
  const ig_trace_xpath = `//*[@id="react-root"]/section/main/div/header/section/ul/li[2]/a/span`
  const ig_trace_ele = await driver.wait(until.elementLocated(By.xpath(ig_trace_xpath)))
  // ig因為當人數破萬時文字不會顯示，所以改抓title
  ig_trace = await ig_trace_ele.getAttribute('title')
  console.log(`追蹤人數：${ig_trace}`)
  driver.quit();
  

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

2. 你會看到 Instagram 自動登入 → 跳轉到指定帳號 → 關閉

3. 確認輸出正確的粉專追蹤人數你就成功嚕～

   

到目前為止我們已經可以抓出 FB & IG 粉專的追蹤人數了，充滿好奇心的讀者可以先試著看看利用爬蟲爬完 FB 粉專後繼續爬 IG

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天FB爬蟲的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整你.env檔填上IG登入資訊

參考資源

1. Filling in login forms in Instagram using selenium and webdriver (chrome) python OSX

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

遇到困難挫折時，多想一下自己的初衷；如果你沒有初衷，那就想一下薪水吧

筆者有話先說

我的文章是以專案的角度寫作，遇到問題才會分析解決的方案，與專門介紹套件的文章風格不同，因為這個系列文撰寫的初衷並不是教一個技術而是培養你解決問題的能力

今日目標

1. 關閉通知彈窗

1.1 用 Google 關鍵字來尋找解答

1.2 調整 chrome 的參數來關閉通知彈窗

2. 用參數區分爬蟲要跑 FB 的經典版還是新版

2.1 判斷自己的 FB 是經典版本還是新版

2.2 在 .env加入參數來做區別

3. 分析今日目標：前往 FB 粉專取得追蹤人數資訊

4. 前往 FB 粉專

4.1 程式執行的順序跟你想的不一樣

4.2 從畫面判斷使用者是否登入成功，使用 Class 抓取網頁元件

4.3 加入登入完成才能前往粉專的邏輯

5. 取得 FB 粉專追蹤人數

5.1 在粉專頁面找出追蹤人數的位置，並分析取出元件的方法

5.2 取出粉專的追蹤者人數

6. 完成爬蟲後關閉瀏覽器

1. 關閉通知彈窗

昨天登入FB的時候應該大家畫面都會長這樣

• 經典版：

  

• 新版：

  

在通知彈窗存在的狀態下是無法抓取網頁元件的(充滿嘗試精神的讀者的可以嘗試看看)

1.1 用 Google 關鍵字來尋找解答

遇到你覺得很多人也會遇到的問題時用 Google 找解答會比你研究文檔快很多，像這個問題在 Google 下關鍵字：nodejs selenium-webdriver notifications，前幾篇一定會有文章能解決你的問題

在這裡 通知 的英文為 notification，再次提醒用英文比較容易找到解答，如果一開始不知道哪個才是準確的關鍵字，你可以先用 Google 翻譯，然後每個單字都嘗試看看

1.2 調整 chrome 的參數來關閉通知彈窗

1. 更改 chrome 瀏覽器 notifications 的設定

   const chrome = require('selenium-webdriver/chrome');
   const options = new chrome.Options();
   //因為FB會有notifications干擾到爬蟲，所以要先把它關閉
   options.setUserPreferences({ 'profile.default_content_setting_values.notifications': 1 });
   

2. 讓 chrome 瀏覽器依照這個設定建立

   let driver = new webdriver.Builder().forBrowser("chrome").
       withCapabilities(options).build();// 建立這個browser的類型
   

3. index.js 加入上面的設定後在終端機(Terminal)執行指令就會發現彈窗提示不見了!

   yarn start
   

2. 用參數區分爬蟲要跑 FB 的經典版還是新版

2.1 判斷自己的 FB 是經典版本還是新版

FB 網頁更新非常頻繁，到現在更有經典版以及新版的區別，如果不清楚自己是什麼版本可以看下面的畫面做判斷

• 經典版

  

• 新版

  

2.2 在 .env加入參數來做區別

因為有經典版(classic)及新版(new)的區別，所以我們在 .env環境設定檔需要增加一個參數：FB_VERSION 來識別，檔案調整如下：

.env

#填寫自己登入FB的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
FB_USERNAME='fb username'
FB_PASSWORD='fb password'

#FB跑經典版還是新版(classic/new)
FB_VERSION='new'

接下來的畫面也會依據經典版以及新版做相關的說明

3. 分析今日目標：前往 FB 粉專取得追蹤人數資訊

面對複雜問題時，我一律建議把大問題先拆解成小問題，小問題再細分成功能項目，這樣同一時間只需集中注意力完成一個功能，這樣的做法能帶給你階段性成就感，也讓你大腦有喘息的空間

像是今天要做的功能 前往 FB 粉專取得追蹤人數資訊 可以拆分成幾個步驟：

1. 前往FB粉專
2. 找出追蹤者人數的元件位置
3. 關閉瀏覽器

建議大家可以自己先按照昨天所提供的方法來實做看看會遇到什麼樣的問題，再來看下面我我所遇到的狀況及解決方式

4. 前往 FB 粉專

4.1 程式執行的順序跟你想的不一樣

我一開始天真的以為在使用者登入後兩行程式碼就能解決

//登入成功後要前往粉專頁面
const fanpage = "https://www.facebook.com/baobaonevertell/" 
await driver.get(fanpage)

但實際執行後你會發現很詭異的事情，在FB登入成功前網頁就直接導向到粉絲專頁了

4.2 從畫面判斷使用者是否登入成功，使用 Class 抓取網頁元件

因為 FB 在執行登入作業時需要等待 server 回應資料確認使用者身份，這塊我們可以從 FB 有什麼元件是登入後才會出現在畫面的這個方向去思考，接下來我會介紹用 Class 抓取網頁元件的方法

• 經典版：一定要在登入後 Facebook 才會有名字顯示，class 為：_1vp5

  

• 新版：一定要在登入後 Facebook 才會有訊息及通知區塊顯示，共同的 class 為：fzdkajry

  

昨天教的用 Xpath 取出元件的方法在這裡不適用，因為他們取出的路徑太過複雜，只要 FB 的版面一改版就有很高的機率壞掉
* 經典版：//[@id=“u_0_e”]/div[1]/div[1]/div/a/span/span
* 新版： //[@id=“mount_0_0”]/div/div[1]/div[1]/div[2]/div[4]/div[1]/div[1]/span/div/div[1]/svg

• 為了方便區分經典版/新版的 FB，我們增加一個函式：getCrawlerPath，來回傳各自的爬蟲路徑

  function getCrawlerPath () {
      if (process.env.FB_VERSION === 'new') {//如果是新版FB
          return {
              "fb_head_path": `//*[contains(@class,"fzdkajry")]`
          }
      } else {//如果為設定皆默認為舊版
          return {
              "fb_head_path": `//*[contains(@class,"_1vp5")]`
          }
      }
  }
  

4.3 加入登入完成才能前往粉專的邏輯

• 我們用上一步的class：fb_head_path，作為判斷登入與否的依據

.
.
.
// FB有經典版以及新版的區分，兩者的爬蟲路徑不同，我們藉由函式取得各自的路徑
const { fb_head_path } = getCrawlerPath();

//因為登入這件事情要等server回應，你直接跳轉粉絲專頁會導致登入失敗
//以登入後才會出現的元件作為判斷登入與否的依據
await driver.wait(until.elementLocated(By.xpath(fb_head_path)))

//登入成功後要前往粉專頁面
const fanpage = "https://www.facebook.com/baobaonevertell/"
await driver.get(fanpage)
.
.
.

5. 取得 FB 粉專追蹤人數

5.1 在粉專頁面找出追蹤人數的位置，並分析取出元件的方法

• 經典版

  

  • 紅框位置 Xpath 的路徑

    //*[@id="PagesProfileHomeSecondaryColumnPagelet"]/div/div[1]/div/div[1]/div[4]/div/div[2]/div
    

  • 如果你只要爬這個粉絲團的話用這個 Xpath 就足夠了，但你如果常逛粉絲團，你會發現不是每個粉絲團顯示追蹤人數的 Xpath 位置都一樣，下面的粉絲團網址你可以點進去試試看：

    • 小姐非常有事

    //*[@id="PagesProfileHomeSecondaryColumnPagelet"]/div/div[1]/div/div[2]/div[4]/div/div[2]/div
    

    • 人類圖澳洲

    //*[@id="PagesProfileHomeSecondaryColumnPagelet"]/div/div[3]/div/div[2]/div[4]/div/div[2]/div
    

    仔細一看就會發現 每個 Xpath 都會有細微的不同 ，所以昨天教的 Xpath 在這裡就失靈了，我們需要換一個方法來判斷，也就是該元件的 class 結構

  • 使用 class 找出網頁元件

    • 下面的幾張圖你可以觀察到這個追蹤者的資訊都在相同的 class="_4bl9" 之下

      

      

      

    • 但是 Facebook 有很多的元件都使用到這個 class 所以我們需要把所有符合的 class 都抓下來，透過分析字串(xxx人在追蹤)來得到正確的資訊

• 新版

  

  • 紅框位置Xpath的路徑

    //*[@id="mount_0_0"]/div/div[1]/div[1]/div[3]/div/div/div[1]/div[1]/div[4]/div[2]/div/div[1]/div[2]/div[1]/div/div/div/div[2]/div[4]/div/div/div/div[2]/div/div/span/span
    

  • 與經典版相同的地方：不是每個粉絲團的 Xpath 都一樣，所以我們需要改用 class 結構來分析

  • class 結構分析：你會很崩潰的發現他的 class 有夠多…

    

    • 在發現這些 class 都與很多 facebook 元件共用的狀態下，你要思考的是哪個元件被共用的次數是最少的，經由這樣的邏輯思考後，發現 class="knvmm38d" 是裡面共用次數最少的

• 為了方便區分經典版/新版的FB，我們將上面的路徑新增到 getCrawlerPath 回傳參數中

  function getCrawlerPath () {
      if (process.env.FB_VERSION === 'new') {//如果是新版FB
          return {
              "fb_head_path": `//*[contains(@class,"fzdkajry")]`,
              "fb_trace_path": `//*[contains(@class,"knvmm38d")]`
          }
      } else {//如果為設定皆默認為舊版
          return {
              "fb_head_path": `//*[contains(@class,"_1vp5")]`,
              "fb_trace_path": `//*[@id="PagesProfileHomeSecondaryColumnPagelet"]//*[contains(@class,"_4bl9")]`
          }
      }
  }
  

5.2 取出粉專的追蹤者人數

• 因為這次要抓取的資料要從複數個 class 裡面篩選出來，但在我們無法決定 class 載入的順序的情況下，偶而會出現抓不到追蹤人數的元件，為了保證元件載入的穩定性，讓瀏覽器前往粉專頁面3秒後再進行爬蟲

  await driver.sleep(3000)
  

• 在確認需要分析的 class 之後，只要把對應的 class 全部取出來轉換成文字，用 for/of迴圈做字串分析就能找出需要的資訊

.
.
.
await driver.sleep(3000)
let fb_trace = 0;//這是紀錄FB追蹤人數
//因為考慮到登入之後每個粉專顯示追蹤人數的位置都不一樣，所以就採用全抓在分析
const fb_trace_eles = await driver.wait(until.elementsLocated(By.xpath(fb_trace_path)))
for (const fb_trace_ele of fb_trace_eles) {
    const fb_text = await fb_trace_ele.getText()
    if (fb_text.includes('人在追蹤')) {
        fb_trace = fb_text
        break
    }
}
console.log(`追蹤人數：${fb_trace}`)
.
.
.

儘量不要在 forEach 中使用 aysnc/await，因為他還需要透過一個 callback 函式才能使用，邏輯表現不如 for/of 來的直觀

6. 完成爬蟲後關閉瀏覽器

確認爬蟲都執行完畢後，用下面這行程式即可關閉瀏覽器

driver.quit();

執行程式

1. 在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

2. 你會看到 Facebook 自動登入 → 跳轉到粉絲頁 → 關閉

3. 如果能正確輸出該粉專的追蹤人數你就成功嚕～

   

相信到這裡大家都能成功地抓出粉專的追蹤者人數了，對這個爬蟲專案應該也充滿了信心了吧！

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整.env檔
    • 填上FB登入資訊
    • 填上FB版本(classic/new)

參考資源

1. Using async/await with a forEach loop
2. JavaScript 的 4 種陣列遍歷方法： for VS forEach() VS for/in VS for/of

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

1. 請勿拿來蒐集個人隱私
   • 相片、個人資料
2. 請勿高頻率訪問一個網站
   • 高頻率訪問一個網站可能對導致對方伺服器癱瘓(DDOS)
3. 請勿盜取相關智慧財產權相關的資料
   • 社群上發表的文章、有人統整過的資訊
4. 請勿蒐集網站後台資料
   • 僅抓取前端網頁有顯示的公開信息，不要去抓後台的敏感資訊
5. 請勿作為破解工具
   • 嘗試各種帳號密碼試圖登入自己沒有權限的頁面

這系列的教學文章是想讓大家省去如同機器人般的操作，把時間精力放在分析資料上面

今天的學習要特別注意什麼？

一定要自己實作過一遍!

一定要自己實作過一遍!

一定要自己實作過一遍!

因為很重要所以要說三遍，前面幾篇文章比較偏向概念，但今後的文章概念實作並重；因為FB 與 IG 改版的速度極快，我現在提供的方法在他們改版後可能就會失效，所以文章的每個步驟要自己去實作才能理解為什麼這樣做，同時培養自己分析網頁結構的能力

今日目標

1. 學會分析網頁結構 - 以Facebook登入頁為範例

1.1 拆解平常登入 FB 的步驟

1.2 將平常操作的位置轉化為程式可以讀懂的路徑(Xpath)

2. 打造自動登入FaceBook的機器人

2.1 了解 selenium-webdriver 如何操作網頁元件

2.2 在 .env檔填上 FB 登入資訊，並從程式中讀取

2.3 讓爬蟲幫你完成平日登入的步驟

1. 學會分析網頁結構 — 以Facebook登入頁為範例

你可以想像 selenium-webdriver 這個套件就是讓機器人代替你的手來做操作，想要讓機器幫你操作，你需要告訴他明確的操作位置，接下來向大家介紹如何抓出這些位置

1.1 拆解平常登入FB的步驟

• 先用 chrome 無痕模式打開Facebook登入頁面

  

• 打開後的 FB 的登入畫面如下

  

  剛發完文章發現 FB 登入畫面又變惹QQ，不過操作上都一樣請勿驚慌

  

• 接下來把你平常登入FB的動作分幾個步驟，下一步要對這些操作到的元件進行結構分析：

  1. 輸入電子郵件或電話
  2. 輸入密碼
  3. 按下登入按鈕

1.2 將平常操作的位置轉化為程式可以讀懂的路徑(Xpath)

1. 我們先用先紅框圈出登入會用到的元件位置

   

2. 接著對元件按下滑鼠右鍵 → 檢查，就會進入開發者的介面

   

3. 然後你就會看到一堆不友善的程式碼，這個時候別緊張，我們原則上不需要理解他們在寫什麼，我們只要知他在什麼位置就好

   

4. 想知道他位置的方法也很簡單，對開發者頁面的那個程式碼按右鍵 → Copy → Copy Xpath

   

   你就會得到 電子郵件或電話 元件在這個頁面的位置

   //*[@id="email"]
   

   重複上面的步驟你面可以取得 密碼 元件的位置

   //*[@id="pass"]
   

   以及 登入按鈕 元件的位置

   //*[@id="loginbutton"]
   

   取得這三個元件的 Xpath 後我們便可以明確告訴機器人該做什麼事嚕

2. 打造自動登入FaceBook的機器人

2.1 了解 selenium-webdriver 如何操作網頁元件

• 透過網頁的 Xpath 取出元件

  // 取出想操作的元件 = 瀏覽器會等待直到路徑(//*[@id="email"])的元件顯示才回傳該元件
  const fb_email_ele = await driver.wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));
  

• 在輸入框中輸入指定文字

  // 將你想要輸入的文字透過sendKeys塞入元件
  fb_email_ele.sendKeys(fb_username)
  

• 點擊按鈕

  // 將取出的元件使用click函式觸發點擊事件
  login_elem.click()
  

2.2 在 .env檔填上 FB 登入資訊，並從程式中讀取

理解關鍵程式的功能後我們來把他們組合起來吧：

1. 在 .env檔填寫 FB 登入的帳號密碼

   #填寫自己登入FB的真實資訊(建議開小帳號來實驗，因為帳號使用太頻繁會被官方鎖住)
   FB_USERNAME='fb username'
   FB_PASSWORD='fb password'
   

2. 取出在 .env檔案裡面的 FB 帳號密碼提供主程式使用

   require('dotenv').config(); //載入.env環境檔
   
   //取出.env檔案填寫的FB資訊
   const fb_username = process.env.FB_USERNAME
   const fb_userpass = process.env.FB_PASSWORD
   

2.3 讓爬蟲幫你完成平日登入的步驟

1. 將套件中會使用到的函式引入

   const webdriver = require('selenium-webdriver'), // 加入虛擬網頁套件
       By = webdriver.By,//你想要透過什麼方式來抓取元件，通常使用xpath、css
       until = webdriver.until;//直到抓到元件才進入下一步(可設定等待時間)
   const chrome = require('selenium-webdriver/chrome');
   const path = require('path');//用於處理文件路徑的小工具
   const fs = require("fs");//讀取檔案用
   

2. 將我們對網頁操作的操作加入程式

   • 前往 facebook 登入頁面 → 輸入登入資訊 → 按下登入按鈕

   async function loginFacebook () {
   
       if (!checkDriver()) {
           return
       }
   
       let driver = await new webdriver.Builder().forBrowser("chrome").build();
       const web = 'https://www.facebook.com/login';//我們要前往FB
       await driver.get(web)//在這裡要用await確保打開完網頁後才能繼續動作
   
       //填入fb登入資訊
       //使用until是要求直到網頁顯示了這個元件才能執行下一步
       const fb_email_ele = await driver.
           wait(until.elementLocated(By.xpath(`//*[@id="email"]`)));//找出填寫email的元件
       fb_email_ele.sendKeys(fb_username)//將使用者的資訊填入
   
       const fb_pass_ele = await driver.
           wait(until.elementLocated(By.xpath(`//*[@id="pass"]`)));
       fb_pass_ele.sendKeys(fb_userpass)
   
       //抓到登入按鈕然後點擊
       const login_elem = await driver.
           wait(until.elementLocated(By.xpath(`//*[@id="loginbutton"]`)))
       login_elem.click()
   }
   loginFacebook()//登入FB
   

執行程式

在專案資料夾的終端機(Terminal)執行指令

yarn start

你會看到 chrome 的應用程式自動打開並且成功登入 Facebook

如果模擬器讓你成功登入 FB 可以在下方留言讓我知道喔，登入成功的瞬間有沒有充滿成就感呢？

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄
  • 調整你.env檔填上FB登入資訊

參考資源

1. Python 爬蟲解析：以爬取臉書社團為案例，使用 Selenium 來進行網頁模擬爬蟲

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008

在決定以爬蟲作為主題時有朋友勸我不要寫這類有爭議的主題，但因為以下幾點我還是選了這個主題：

1. 爬蟲道德觀：有些網路文章道德觀崩壞，把一個好的技術變成智慧財產的盜賊
2. 中文資源缺乏，技術過時：中文的教學文章較少，許多範例的技術到今天已經無法使用了
3. 缺乏系統性的整合：網路上的資源相對零碎，學習上缺乏系統性，容易在學習過程中遇到問題而半途而廢

學習爬蟲對我有什麼好處?

• 如果你是工程師
  1. 最直接的好處就是讓你在未來職涯上有更多的選擇
  2. 可以大量訓練你對網頁架構的認知
  3. 當你學會爬蟲時，你就能寫出相對來說反爬蟲的網頁了
• 如果你是行銷廣告、電商小編
  1. 你可以透過爬蟲來了解網路世界在資料這塊的邏輯
  2. 就算你看完文章後還是無法完全掌握，但當你請工程師來撰寫爬蟲時，你能很具體地說出你的需求並與工程師溝通順暢
  3. 我認為掌握分析資料能力的人才最有機會做出能說服公司的策略

今日目標

1. 知道如何選擇適合的爬蟲工具
2. 使用 selenium-webdriver 套件開啟瀏覽器：openCrawlerWeb
3. 解決 windows 無法自動讀取 chromedriver.exe 路徑的問題
   • 寫判斷 Driver 是否設定的函式：checkDriver
4. 將 checkDriver 整合進 openCrawlerWeb

1. 如何選擇適合的爬蟲工具?

在Day5有提到尋找工具的方法，現在我們依序來說明:

1. 官方資源
   • 由於近年 FB & IG 的 api 改版頻繁，加上各式各樣權限的限制導致我們連公開資料都無法得到，所以在這裡我們放棄使用官方提供的 api
2. 網路資源
   • 透過下關鍵字我們可以看到很多人分享爬蟲的經驗，我們把這些經驗中看起來能用的套件記錄下來
3. npm 套件
   • 先在 npm 官網 確認這些套件健康程度，太少人用或太久沒更新的就淘汰掉，接著進入實際測試確認是否符合專案需求，以下是我當時找到的資源並附上實測後的分析:
     1. request & cheerio
        • 下關鍵字候第一個找到的資源，使用範例程式測試後確認他可以透過網址抓到網頁元素並進行分析
        • but…他在 FB、IG 面前毫無用武之地，因為 FB 會偵測你使用的瀏覽器，所以在第一關他就陣亡了
     2. selenium-webdriver
        • 基本上他是一個無論是什麼網頁都能夠爬蟲的工具了，我認為非常適合新手使用
        • 工具運行時會開啟一個瀏覽器，這個瀏覽器會依據撰寫的腳本來模擬人類操作的每個步驟
        • 所見即所得，看得到的資訊都能夠抓下來，學習起來非常容易且直覺，所以這是本專案最後選擇的工具
     3. Puppeteer
        • 操作邏輯與 selenium-webdriver 非常類似
        • 預設附帶 Chronium 瀏覽器，不會有瀏覽器匹配問題(但是只能用這個瀏覽器QQ)
        • 只能使用 Node.js 撰寫，不像 selenium-webdriver 有多種語言的 binding

2. 使用 selenium-webdriver 套件開啟瀏覽器：openCrawlerWeb

我的文章會會依據需求使用到它的各種功能，如果有迫不及待的小夥伴也可以先去官網來更深刻的了解他

1. selenium-webdriver前置環境安裝

   • 先在終端機(Terminal)下指令安裝他

     yarn add selenium-webdriver
     

   • 本專案使用的模擬器是 chrome，電腦還沒裝的請先下載

   • 因為跑 selenium 需要用到 driver，大家可以依照自己的作業系統做設定

     • mac 作業系統
       • 如果你用的電腦是 mac，恭喜你，不要需要額外下載 chrome driver 就能夠直接寫使用(不過 chrome 還是要下載)
     • windows 作業系統

       1. 先確認自己 chrome 版本：將chrome://settings/help貼到你的網址列

          

       2. 下載與你 chrome 版本相同的chrome driver

          

          

       3. 下載的檔案解壓縮後將 chromedriver.exe 放到專案根目錄下

2. 用openCrawlerWeb函式打開爬蟲用網頁

   • 因為 selenium-webdriver 是使用非同步函式建立瀏覽器(browser)，所以我們需要加上 await 明確告訴程式必須建立完瀏覽器才能打開網頁

     PS. 因為 javascript 支援非同步語法，所以我們必須很明確地告訴程式他要執行的順序(在 async 的函式中用 await，是標明必須等待這項工作完成才能進入下一步)，否則他跑起來的順序跟你想的不一樣 (並非完成前面工作才執行下一步的順序)，想更深入理解的朋友可以參考這篇文章喔

   index.js

   require('dotenv').config(); //載入.env環境檔
   const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
   
   async function openCrawlerWeb() {
   
       // 建立這個browser的類型
       let driver = await new webdriver.Builder().forBrowser("chrome").build();
       const web = 'https://www.google.com/';//填寫你想要前往的網站
       driver.get(web)//透國這個driver打開網頁
   }
   openCrawlerWeb()//打開爬蟲網頁
   

3. 執行程式
   在專案資料夾的終端機(Terminal)執行指令

   yarn start
   

   如果執行順利，你會看到 chrome 應用程式自動打開並且進入 google 的首頁

   

3. 解決 windows 無法自動讀取 chromedriver.exe 路徑

因為有人回報部分 windows 就算把 chromedriver.exe 放在專案根目錄也讀不到，所以特別寫了一個 checkDriver 的函式，邏輯如下：

• 判斷電腦是否有預設的 chromedriver
  • Yes → 無須設定
  • No → 確認路徑下是否有 chromedriver.exe 的檔案
    • Yes → 設定 driver 路徑
    • No → 無法設定 driver 路徑回傳 false
• 備註
  • try-catch：顧名思義就是先 try，如果發生問題就會 catch 並執行錯誤處理；之後會有文章深入討論 try-catch 對專案的重要性
  • __dirname：目前檔案所在的資料夾路徑

const chrome = require('selenium-webdriver/chrome');
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'        
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            //設定driver路徑
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

• 將 chromedriver.exe 放到根目錄後記得在 .gitignore 把它加進去忽略清單喔，他屬於不需要版控的檔案

  .gitignore

  node_modules
  .env
  chromedriver.exe
  

4. 將checkDriver整合到openCrawlerWeb

在建立瀏覽器之前，我們先用 checkDriver 函式來確認 Driver 是否是設定，如果無法設定會跳出錯誤提醒，統整後程式如下

index.js

require('dotenv').config(); //載入.env環境檔
const webdriver = require('selenium-webdriver') // 加入虛擬網頁套件
const chrome = require('selenium-webdriver/chrome');
const path = require('path');//用於處理文件路徑的小工具
const fs = require("fs");//讀取檔案用

function checkDriver() {
    try {
        chrome.getDefaultService()//確認是否有預設
    } catch {
        console.warn('找不到預設driver!');
        
        //'../chromedriver.exe'記得調整成自己的路徑
        const file_path = '../chromedriver.exe'        
        //請確認印出來日誌中的位置是否與你路徑相同
        console.log(path.join(__dirname, file_path));
        
        //確認路徑下chromedriver.exe是否存在            
        if (fs.existsSync(path.join(__dirname, file_path))) {
            //設定driver路徑
            const service = new chrome.ServiceBuilder(path.join(__dirname, file_path)).build();
            chrome.setDefaultService(service);
            console.log('設定driver路徑');
        } else {
            console.error('無法設定driver路徑');
            return false
        }
    }
    return true
}

async function openCrawlerWeb() {

    if (!checkDriver()) {// 檢查Driver是否是設定，如果無法設定就結束程式
        return
    }
    
    // 建立這個broswer的類型
    let driver = await new webdriver.Builder().forBrowser("chrome").build();
    const web = 'https://www.google.com/';//填寫你想要前往的網站
    driver.get(web)//透國這個driver打開網頁
}
openCrawlerWeb()//打開爬蟲網頁

ℹ️ 專案原始碼

• 今天的完整程式碼可以在這裡找到喔
• 我也貼心地把昨天的把昨天的程式碼打包成壓縮檔，你可以用裡面乾淨的環境來實作今天的功能喔
  • 請記得在終端機下指令 yarn 才會把之前的套件安裝
  • windows需下載與你chrome版本相同的chrome driver放在專案根目錄

參考資源

1. [JS] 談談 JavaScript 中的錯誤處理 Error Handling
2. 為什麼用 (或不用) Puppeteer
3. 重新認識 JavaScript: Day 26 同步與非同步
4. 鐵人賽：JavaScript Await 與 Async

免責聲明:文章技術僅抓取公開數據作爲研究，任何組織和個人不得以此技術盜取他人智慧財產、造成網站損害，否則一切后果由該組織或個人承擔。作者不承擔任何法律及連帶責任！

在許多人的幫助下，本系列文章已出版成書，並添加了新的篇章與細節補充：

• 加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項
• 將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門
• 調整專案架構
  • 優化爬蟲程式，以更廣的視角來擷取網頁資訊
  • 增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者
  • 排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

有興趣的朋友可以到天瓏書局選購，感謝大家的支持。

購書連結：https://www.tenlong.com.tw/products/9789864348008