小豬的Python學習之旅 —— 5.使用Selenium抓取JavaScript動態生成資料的網頁

coder-pig發表於2018-01-17

原文網址 : https://juejin.im/post/5a5e232151882573291471e0

PythonJavaScript網頁

引言

自從學習了爬蟲之後，每天不寫個小爬蟲爬爬小姐姐，都覺得渾身難受：

小豬的Python學習之旅 —— 5.使用Selenium抓取JavaScript動態生成資料的網頁

小姐姐是挺好看的，只是身體日漸消瘦而已，多喝營養快線就好！

(快來學Python爬蟲，一起爬可愛的小姐姐啊~)

抓多了發現有一些小網站很狡猾，竟然搞起反爬蟲來了，不直接生成資料，而是通過載入JS來生成資料，然後你開啟Chrome瀏覽器的 開發者選項，然後你會發現Elements頁面結構和Network抓包抓包返回的內容竟然是不一樣的，Network抓包那裡竟然沒有對應的資料，本該是資料的地方，竟然是JS程式碼，比如煎蛋的妹子圖：

對於我這種不會JS的安卓狗來說，不禁感嘆：

抓不到資料怎麼破，開始我還想著自學一波JS基本語法，再去模擬抓包拿到別人的JS檔案，自己再去分析邏輯，然後搗鼓出真正的URL，後來還是放棄了，有些JS竟然他麼的是加密的，而且要抓的頁面那麼多，每個這樣分析分析到什麼時候...

後面意外發現有個自動化測試框架：Selenium 可以幫我們處理這個問題。簡單說下這個東西有什麼用吧，我們可以編寫程式碼讓瀏覽器：

1.自動載入網頁；
2.模擬表單提交(比如模擬登入)，獲取需要的資料；
3.頁面截圖；
4.判斷網頁某些動作是否發生，等等。

然後這個東西是不支援瀏覽器功能的，你需要和第三方的瀏覽器 一起搭配使用，支援下述瀏覽器，需要把對應的瀏覽器驅動下載到Python的對應路徑下：

Chrome：sites.google.com/a/chromium.… FireFox：github.com/mozilla/gec… PhantomJS：phantomjs.org/ IE：selenium-release.storage.googleapis.com/index.html Edge：developer.microsoft.com/en-us/micro… Opera：github.com/operasoftwa…

直接開始本節的內容吧~

1.安裝Selenium

這個就很簡單了，直接通過pip命令列進行安裝：

sudo pip install selenium
複製程式碼

PS：想起之前公司小夥伴問過我pip在win上怎麼執行不了，又另外下了很多pip，其實如果你安裝了Python3的話，已經預設帶有pip了，你需要另外配置下環境變數，pip的路徑在Python安裝目錄的Scripts目錄下~

Path後面加上這個路徑就好~

2.下載瀏覽器驅動

因為Selenium是不帶瀏覽器的，所以需要依賴第三方的瀏覽器，要呼叫第三方的瀏覽器的話，需要下載瀏覽器的驅動，因為筆者用到是Chrome，這裡就以 Chrome為例子吧，其他瀏覽器的自行搜尋相關資料了！開啟Chrome瀏覽器，鍵入：

chrome://version
複製程式碼

可以檢視Chrome瀏覽器版本的相關資訊，這裡主要是關注版本號就行了：

61，好的，接下來到下面的這個網站檢視對應的驅動版本號：

chromedriver.storage.googleapis.com/2.34/notes.…

好的，那就下載v2.34版本的瀏覽器驅動吧：

chromedriver.storage.googleapis.com/index.html?…

下載完成後，把zip檔案解壓下，解壓後的chromedriver.exe拷貝到Python 的Scripts目錄下。(這裡不用糾結win32，在64位的瀏覽器上也是可以正常使用的！)

PS：Mac的話把解壓後的檔案拷貝到usr/local/bin目錄下 Ubuntu的話拷貝到：usr/bin目錄下

接下來我們寫個簡單的程式碼來測試下：

from selenium import webdriver

browser = webdriver.Chrome()  # 呼叫本地的Chrome瀏覽器
browser.get('http://www.baidu.com')  # 請求頁面，會開啟一個瀏覽器視窗
html_text = browser.page_source  # 獲得頁面程式碼
browser.quit()  # 關閉瀏覽器
print(html_text)
複製程式碼

執行這段程式碼，會自動調起瀏覽器，並且訪問百度：

並且控制檯會輸出HTML的程式碼，就是直接獲取的Elements頁面結構， JS執行完後的頁面~接下來我們就可以來抓我們的煎蛋妹子圖啦~

3.Selenium 簡單實戰：抓取煎蛋妹子圖

直接分析Elements頁面結構，找到想要的關鍵結點：

明顯這就是我們抓取的小姐姐圖片，複製下這個URL，看下我們列印出的頁面結構有沒有這個東西：

可以，很棒，有這個頁面資料，接下來就走一波Beautiful Soup獲取到我們想要的資料啦~

經過上面的過濾就能夠拿到我們的妹子圖片URL：

隨手開啟一個驗證下，嘖嘖：

看了下一頁只有30個小姐姐，這顯然是滿足不了我們的，我們在第一次載入的時候先拿到一波頁碼，然後就知道有多少頁了，然後自己再去拼接URL載入不同的頁面，比如這裡總共又448頁：

拼接成這樣的URL即可：http://jandan.net/ooxx/page-448 過濾下拿到頁碼：

接下來就把程式碼補齊咯，迴圈抓取每一頁的小姐姐，然後下載到本地，完整程式碼如下：

import os
from selenium import webdriver
from bs4 import BeautifulSoup
import urllib.request
import ssl
import urllib.error

base_url = 'http://jandan.net/ooxx'
pic_save_path = "output/Picture/JianDan/"


# 下載圖片
def download_pic(url):
    correct_url = url
    if url.startswith('//'):
        correct_url = url[2:]
    if not url.startswith('http'):
        correct_url = 'http://' + correct_url
    print(correct_url)
    headers = {
        'Host': 'wx2.sinaimg.cn',
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) '
                      'Chrome/61.0.3163.100 Safari/537.36 '
    }
    try:
        req = urllib.request.Request(correct_url, headers=headers)
        resp = urllib.request.urlopen(req)
        pic = resp.read()
        pic_name = correct_url.split("/")[-1]
        with open(pic_save_path + pic_name, "wb+") as f:
            f.write(pic)
    except (OSError, urllib.error.HTTPError, urllib.error.URLError, Exception) as reason:
        print(str(reason))


# 開啟瀏覽器模擬請求
def browser_get():
    browser = webdriver.Chrome()
    browser.get('http://jandan.net/ooxx')
    html_text = browser.page_source
    page_count = get_page_count(html_text)
    # 迴圈拼接URL訪問
    for page in range(page_count, 0, -1):
        page_url = base_url + '/page-' + str(page)
        print('解析：' + page_url)
        browser.get(page_url)
        html = browser.page_source
        get_meizi_url(html)
    browser.quit()


# 獲取總頁碼
def get_page_count(html):
    soup = BeautifulSoup(html, 'html.parser')
    page_count = soup.find('span', attrs={'class': 'current-comment-page'})
    return int(page_count.get_text()[1:-1]) - 1


# 獲取每個頁面的小姐姐
def get_meizi_url(html):
    soup = BeautifulSoup(html, 'html.parser')
    ol = soup.find('ol', attrs={'class': 'commentlist'})
    href = ol.findAll('a', attrs={'class': 'view_img_link'})
    for a in href:
        download_pic(a['href'])


if __name__ == '__main__':
    ssl._create_default_https_context = ssl._create_unverified_context
    if not os.path.exists(pic_save_path):
        os.makedirs(pic_save_path)
    browser_get()
複製程式碼

執行結果：

看下我們輸出資料夾~

是的，貼那麼多小姐姐，就是想騙你學Python!

4.PhantomJS

PhantomJS沒有介面的瀏覽器，特點：會把網站載入到記憶體並執行頁面上的 JavaScript，因為不會展示圖形介面，所以執行起來比完整的瀏覽器要高效。 (在一些Linux的主機上沒有圖形化介面，就不能用有介面的瀏覽器了，可以通過PhantomJS來規避這個問題)。

Win上安裝PhantomJS：

1.官網下載：phantomjs.org/download.ht… 壓縮包；
2.解壓：phantomjs-2.1.1-windows.zip 放到自己想放的位置；
3.配置環境變數：目錄/bin 比如我的：
；
4.開啟cmd，鍵入：phantomjs --version 驗證是否配置成功；

Ubuntu/MAC上安裝PhantomJS：

sudo apt-get install phantomjs
複製程式碼

！！！關於PhantomJS的重要說明：

在今年的四月份，Phantom.js的維護者（Maintainer）宣佈退出PhantomJS，意味著這個專案專案可能不會再進行維護了！！！Chrome和FireFox也開始提供Headless模式(無需吊起瀏覽器)，所以，估計使用PhantomJS的小夥伴也會慢慢遷移到這兩個瀏覽器上。Windows Chrome需要60以上的版本才支援 Headless模式，啟用Headless模式也非常簡單：

selenium官方文件也寫了：

執行的時候也會報這個警告：

5.Selenium實戰：模擬登入CSDN，並儲存Cookie

CSDN登入網站：passport.csdn.net/account/log…

分析下頁面結構，不難找到對應的登入輸入框，以及登入按鈕：

我們要做的就是在這兩個結點輸入賬號密碼，然後觸發登入按鈕，同時把Cookie儲存到本地，後面就可以帶著Cookie去訪問相關頁面了~

先編寫模擬登入的方法吧：

找到輸入賬號密碼的節點，設定下自己的賬號密碼，然後找到登入按鈕節點，click一下，然後坐等登入成功，登入成功後可以比較 current_url是否發生了改變。然後把Cookies給儲存下來，這裡我用的是pickle庫，可以用其他，比如json，或者字串拼接，然後儲存到本地。如無意外應該是能拿到Cookie的，接著就利用 Cookie去訪問主頁。

通過add_cookies方法來設定Cookie，引數是字典型別的，另外要先訪問get一次連結，再去設定cookie，不然會報無法設定cookie的錯誤！

看下右下角是否變為登入狀態就可以知道是否使用Cookie登入成功了：

6.Selenium 常用函式

Seleninum作為自動化測試的工具，自然是提供了很多自動化操作的函式，下面列舉下個人覺得比較常用的函式，更多可見官方文件： 官方API文件：seleniumhq.github.io/selenium/do…

1) 定位元素

find_element_by_class_name：根據class定位
find_element_by_css_selector：根據css定位
find_element_by_id：根據id定位
find_element_by_link_text：根據連結的文字來定位
find_element_by_name：根據節點名定位
find_element_by_partial_link_text：根據連結的文字來定位，只要包含在整個文字中即可
find_element_by_tag_name：通過tag定位
find_element_by_xpath：使用Xpath進行定位

PS：把element改為elements會定位所有符合條件的元素，返回一個List 比如：find_elements_by_class_name

2) 滑鼠動作

有時需要在頁面上模擬滑鼠操作，比如：單擊，雙擊，右鍵，按住，拖拽等可以匯入ActionChains類：selenium.webdriver.common.action_chains.ActionChains 使用ActionChains(driver).XXX呼叫對應節點的行為

click(element)：單擊某個節點；
click_and_hold(element)：單擊某個節點並按住不放；
context_click(element)：右鍵單擊某個節點；
double_click(element)：雙擊某個節點；
drag_and_drop(source,target)：按住某個節點拖拽到另一個節點；
drag_and_drop_by_offset(source, xoffset, yoffset)：按住節點按偏移拖拽
key_down：按下特殊鍵，只能用(Control, Alt and Shift)，比如Ctrl+C ActionChains(driver).key_down(Keys.CONTROL).send_keys('c').key_up(Keys.CONTROL).perform()；
key_up：釋放特殊鍵；
move_by_offset(xoffset, yoffset)：按偏移移動滑鼠；
move_to_element(element)：滑鼠移動到某個節點的位置；
move_to_element_with_offset(element, xoffset, yoffset)：滑鼠移到某個節點並偏移；
pause(second)：暫停所有的輸入多少秒；
perform()：執行操作，可以設定多個操作，呼叫perform()才會執行；
release()：釋放滑鼠按鈕
reset_actions：重置操作
send_keys(keys_to_send)：模擬按鍵，比如輸入框節點.send_keys(Keys.CONTROL,'a') 全選輸入框內容，輸入框節點.send_keys(Keys.CONTROL,'x')剪下，模擬回退：節點.send_keys(keys.RETURN)；或者直接設定輸入框內容：輸入框節點.send_keys('xxx')；
send_keys_to_element(element, *keys_to_send)：和send_keys類似；

3) 彈窗

對應類：selenium.webdriver.common.alert.Alert，感覺應該用得不多...

如果你觸發了某個時間，彈出了對話方塊，可以呼叫下述方法獲得對話方塊： alert = driver.switch_to_alert()，然後可以呼叫下述方法：

accept()：確定
dismiss()：關閉對話方塊
send_keys()：傳入值
text()：獲得對話方塊文字

4)頁面前進，後退，切換

切換視窗: driver.switch_to.window("視窗名") 或者通過window_handles來遍歷 for handle in driver.window_handles: driver.switch_to_window(handle) driver.forward() #前進 driver.back() # 後退

5) 頁面截圖

driver.save_screenshot("截圖.png")

6) 頁面等待

現在的網頁越來越多采用了 Ajax技術，這樣程式便不能確定何時某個元素完全載入出來了。如果實際頁面等待時間過長導致某個dom元素還沒出來，但是你的程式碼直接使用了這個WebElement，那麼就會丟擲NullPointer的異常。

為了避免這種元素定位困難而且會提高產生 ElementNotVisibleException的概率。所以 Selenium 提供了兩種等待方式，一種是隱式等待，一種是顯式等待。

顯式等待：

顯式等待指定某個條件，然後設定最長等待時間。如果在這個時間還沒有找到元素，那麼便會丟擲異常了。

from selenium import webdriver
from selenium.webdriver.common.by import By
# WebDriverWait 庫，負責迴圈等待
from selenium.webdriver.support.ui import WebDriverWait
# expected_conditions 類，負責條件出發
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.PhantomJS()
driver.get("http://www.xxxxx.com/loading")
try:
    # 每隔10秒查詢頁面元素 id="myDynamicElement"，直到出現則返回
    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, "myDynamicElement"))
    )
finally:
    driver.quit()
複製程式碼

如果不寫引數，程式預設會 0.5s 呼叫一次來檢視元素是否已經生成，如果本來元素就是存在的，那麼會立即返回。

下面是一些內建的等待條件，你可以直接呼叫這些條件，而不用自己寫某些等待條件了。

title_is title_contains presence_of_element_located visibility_of_element_located visibility_of presence_of_all_elements_located text_to_be_present_in_element text_to_be_present_in_element_value frame_to_be_available_and_switch_to_it invisibility_of_element_located element_to_be_clickable – it is Displayed and Enabled. staleness_of element_to_be_selected element_located_to_be_selected element_selection_state_to_be element_located_selection_state_to_be alert_is_present

隱式等待：

隱式等待比較簡單，就是簡單地設定一個等待時間，單位為秒。

from selenium import webdriver

driver = webdriver.PhantomJS()
driver.implicitly_wait(10) # seconds
driver.get("http://www.xxxxx.com/loading")
myDynamicElement = driver.find_element_by_id("myDynamicElement")
複製程式碼

當然如果不設定，預設等待時間為0。

7.執行JS語句

driver.execute_script(js語句) 比如滾動到底部： js = document.body.scrollTop=10000 driver.execute_script(js)

小結

本節講解了一波使用Selenium自動化測試框架來抓取JavaScript動態生成資料， Selenium需依賴於第三方的瀏覽器，要注意PhantomJS無介面瀏覽器過時的問題，可以使用Chrome和FireFox提供的HeadLess來替換；通過抓取煎蛋妹子圖以及模擬CSDN自動登入的例子來熟悉Selenium的基本使用，還是收貨良多的。當然Selenium的水還是很深的，當前我們能夠使用它來應付JS動態載入資料頁面資料的抓取就夠了。

最近天氣略冷，各位小夥伴記得適時添衣~ 另外這周因為事比較多，就先斷更了，下週再見，接下里要啃的骨頭是 Python多執行緒，目測得啃好幾節，敬請期待~