Tracefans｜林鼎淵 Dean Lin

【Day11】舉一反三，帶你了解IG爬蟲不可忽略的細節

林鼎淵 — Sat, 26 Sep 2020 08:44:52 +0800

學習，從複製開始

筆者有話先說

有了 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();

執行程式

在專案資料夾的終端機(Terminal)執行指令
```
yarn start
```
你會看到 Instagram 自動登入 → 跳轉到指定帳號 → 關閉
確認輸出正確的粉專追蹤人數你就成功嚕～

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

ℹ️ 專案原始碼

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

參考資源

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

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

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

加入更多實務經驗，用完整的開發流程讓讀者了解專案每個階段要注意的事項

將爬蟲的步驟與技巧做更詳細的說明，讓讀者可以輕鬆入門

調整專案架構

優化爬蟲程式，以更廣的視角來擷取網頁資訊

增加資料驗證、錯誤通知等功能，讓爬蟲執行遇到問題時可以第一時間通知使用者

排程部分改用 node-schedule & pm2 的組合，讓讀者可以輕鬆管理專案程序並獲得更精確的 log 資訊

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

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

【Day10】關閉干擾爬蟲的彈窗，將FB粉專追蹤數納入囊中

林鼎淵 — Fri, 25 Sep 2020 09:09:47 +0800

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

筆者有話先說

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

今日目標

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 的參數來關閉通知彈窗

更改 chrome 瀏覽器 notifications 的設定

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

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

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

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 粉專取得追蹤人數資訊 可以拆分成幾個步驟：

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

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

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")]`
        }
    }
}