跟著IG潮流來爬蟲 — 如何獲取貼文圖片&影片連結 — 系列4（附Python程式碼）
使用Selenium獲取Instagram圖片及影片網址(可下載檔案)
歡迎回到 Selenium 動態網頁爬蟲系列文章第四篇~
本篇文章會從頭解釋，如何檢視網頁及找到所需的資訊，若已了解相關概念，可以直接往下滑到最後觀看實作程式碼~
動態網頁爬蟲一切的開始都是從網頁檢視器，觀察觀察再觀察！
你是不是曾滑著Instagram，看著琳琅滿目的漂亮照片，想存成桌布自己欣賞呢？無論是新聞、好山好水、美女帥哥、偶像的照片或影片，本篇文章將會手把手教你怎麼找到它們的原始檔案並且下載下來，你將不再需要妥協於手機截圖的爛畫質啦！
本文以bbcnews的此篇文章為例，貼文中包含了許多動物的圖片：
(資料來源：https://www.instagram.com/p/CE_bR-osw4M/)
我們來看看如此可愛生動的照片們究竟隱藏在哪裡吧！
- 檢視網頁及找到需要的網頁資訊
第一步，同樣是打開網頁檢視器(Windows系統：請按f12、macOS系統：請按option+command+c)。打開後可以看到以下視窗(圖一)。
接著點選視窗左上角的小鼠標(圖二)。這時當我們任意的在網頁上滑動，旁邊的藍色網底區塊應該也會跟著移動。
當我們將鼠標移到圖片上並點擊，旁邊的網頁檢視器會將對應到的網頁元素碼區域標示出來，如圖三。
咦！？怎麼什麼東西都沒有啊？
不用擔心，這是很正常的，因為我們可能不是直接點到網頁上的圖片，而是點到一些功能介面、網頁板塊之類的網頁元素，這時只要展開附近的階層，通常就能找到需要的內容囉！(需要的資訊通常會在上下層級內)。
因此我們將上一層展開，馬上發現到了圖片連結！太好了！如圖四所示。
在換到下一張圖片之前，別忘了先簡單記憶一下classname(在這裡是KL4Bh)！有了classname我們才能透過Selenium抓到他們！
接著繼續嘗試下一張圖片，使用同樣的方法也可以順利找到圖片的連結，而且classname也是一樣的呢！如圖五所示。
不過等等，連結怎麼會有這麼多？！
別緊張，我們來仔細觀察一下，有沒有看到特別的地方呢？
原來srcset裡的這些連結，是為了因應Instagram不同大小的介面，而儲存了大小不同的圖片檔案，
這時當然就可以依據自己的需求下載不同大小的圖片檔案啦！
不過通常大家都想要最高畫質的圖片檔案，答案就在靠近的底下的src裡面！
趕快檢查一下連結能不能使用吧！開啟連結之後，會出現只有一張圖片的畫面，而這張圖片應該就會是我們剛剛點擊的圖片內容啦！(可愛的魚~)，如圖七所示。
進入連結的網頁後，這裡的圖片就可以另存下載了！
影片(或IGTV)也是使用同樣的方式，即可以找到影片的首頁縮圖及影片檔案，大家可以自己嘗試看看。
以下進入相關程式碼的說明。
接下來，我會將程式碼分為三部分來解釋各行程式碼的用處及原理。
1. 前往特定貼文頁面
url = 'https://www.instagram.com/p/CE_bR-osw4M/'
browser.get(url)url就是你需要爬取資料的網頁連結，使用browser.get(url)可以使webdriver前往對應的網頁，之後爬取資料。
如果是從前面文章讀過來的朋友應該知道 browser是什麼跟怎麼開了，還不知道的請見：動態網頁爬蟲第一道鎖 — Selenium教學：如何使用Webdriver、send_keys(附Python 程式碼)
2. 抓取目前網頁原始碼
執行完上方的程式碼後，webdriver的chrome介面應該已前往對應貼文了，此時需要抓取網頁原始碼並解密。
這時就需要Beautiful Soup的強大功能啦~簡簡單單的一行就出來了，真的是非常方便！
soup = Soup(browser.page_source,”lxml”) # 抓取網頁原始碼3. 獲得需要的內容：圖片或影片連結
這邊要特別注意一下，只要是頁面上看到的圖片，包括下方推薦貼文的首頁圖片，其classname都為KL4Bh。所以我們使用find_all找出所有classname為KL4Bh的網頁元素之後，選擇第一項(index為0)才會是我們想要的圖片。
soup.find_all(class_="KL4Bh")[0].img.get('src')可以得到如下的連結：
因為之前的貼文只有圖片，所以另外找了另一則有影片的貼文示範。
# 獲取影片連結
url = 'https://www.instagram.com/p/CFHwyL6s9Gn/'
browser.get(url)
soup = Soup(browser.page_source,"lxml")
soup.find_all(class_="_5wCQW")[0].video.get('src')前三行都是一樣的概念，只需要更改classname跟標籤部份而已(.img變成.video，這種用法是find的另一種簡易寫法)
可以得到如下的連結：
基本的爬蟲原理就到這裡了，大家可以自由去摸索，Selenium及Beautiful Soup爬蟲的概念都大同小異，加油！
以下將會介紹如何獲取單篇貼文的所有圖片或影片連結，會運用大量try&except還有更多複雜的方法，請小心食用。
實際上Selenium的強大之處就是模擬人在動態網頁上的行為，可以輸入資料、點擊等等。因此我們可以寫一個小型迴圈不斷獲取圖片及影片連結，自動點擊下一頁按鈕，直到沒有下一張圖片或影片為止。
而且Instagram貼文圖片常常不只一張，手動點擊下一頁再使用Selenium及Beautiful Soup爬取未免也太陽春了一點。
但是要順利完成這樣厲害的功能可不是一件容易的事。以下是我在撰寫Instagram爬蟲程式時遇到的三大麻煩：
- 動態加載：Instagram是動態網頁，所以會有預載好的資料也有先前看過的資料，而先前載過的資料會隨著下一頁按鈕的點擊漸漸消失，所以需要一邊比較資料一邊爬取。
- 網頁架構不同：單張圖片或影片，跟多張圖片或影片的classname及網頁架構不相同。
- 網速影響很大：同樣的程式碼有時候出的來，有時候出不來…
解決完上述的問題之後，有了以下的程式碼。
除了主要爬蟲程式碼以外，還添加了一些幫助偵錯(count、print)、WebDriverWait、time.sleep等待網頁加載等等的細節。但是網速還是影響很大(time.sleep到底要多久)，盡量要在網速穩定的情況下爬蟲才不會做白工啊~
程式碼看得霧煞煞嗎？沒關係這裡有流程圖：
對程式碼大概有個理解之後，大家心中一定有許多疑惑，接下來將會一一解答。
Q1. 如何使用Selenium登入Instagram？
請見：跟著IG潮流來爬蟲－用Selenium帶您自動登入 IG －系列1(附Python程式碼)。
Q2. 如何使用Selenium自動點擊下一頁按鈕？
運用先前相同的概念，我們很快可以找到下一頁按鈕的classname為「_6CZji」。
而使用 WebDriverWait()可以等待網頁加載，避免網速太慢抓不到的問題。
# 等待按鈕出現
WebDriverWait(browser, 15).until(EC.presence_of_element_located((By.CLASS_NAME, ‘_6CZji’)))# 找到下一頁按鈕
button = browser.find_elements_by_class_name(‘_6CZji’)[0]# 點擊下一頁按鈕
button.click()
Q3. 如何判斷貼文為單張圖片或影片？
方法可以有很多種，可以尋找網頁中是否有下一頁的按鈕，並使用find函式去找他的classname。
又或是如同下面的程式碼一樣，透過觀察網頁，我們可以發現多張圖片跟影片的貼文會多一層classname為Ckrof的框架，裡面會包含我們所需要的訊息。
# 如果找到這層框架則為多張圖片的貼文
if (soup.find(class_="Ckrof") != None):除了上述兩種方法之外，大家也可以去自由嘗試其他的方法！
Q4. 同樣的程式碼，我的電腦怎麼抓不到檔案？
那可能是Instagram又改版了(檢查一下classname)、Webdriver需要更新、網路不穩定等等情形。觀察一下log的錯誤訊息也許可以找到一些提示！
爬蟲程式碼是需要定期偵錯的，今天可以爬成功，明天就不一定了(真痛苦…)，大家多多加油！
以上就是本文關於爬取Instagram圖片及影片網址的內容了。
如果你喜歡我的文章，請給我一點掌聲。
更多Selenium相關文章連結：
- FB 爬蟲可以更簡單-用Selenium自動登入FB-系列1(附Python程式碼)
- 好奇自己FB的互動性指標嗎?!用Selenium爬蟲-搞定貼文按讚數、留言數、分享數-系列2(附Python程式碼)
- 用Selenium爬蟲-抓取FB文章內容、時間-系列3(附Python程式碼)
- 跟著IG潮流來爬蟲－用Selenium帶您自動登入 IG －系列1(附Python程式碼)
- 跟著IG潮流來爬蟲 — 如何爬取IG貼文短連結 — 系列2（附Python程式碼）
- 跟著IG潮流來爬蟲 — 如何爬取IG貼文讚數&留言數 — 系列3（附Python程式碼）
作者：戴若竹(臺灣行銷研究特邀作者)、鍾皓軒(臺灣行銷研究有限公司創辦人）
