必學的Python Selenium套件自動化網頁截圖技巧

Photo by Marga Santoso on Unsplash

平時在瀏覽網頁的時候，相信大家有時會對於網頁上的某部分資訊感到有興趣，就會想要透過截圖的方式保存下來，就像是Yahoo奇摩股市網站，提供了不少資料視覺化的圖表，如果能夠利用網頁截圖的技巧，就可以大幅提升每天的分析效率。

所以，今天就以Yahoo奇摩股市網站為例，來和大家分享如何使用Python Selenium套件的自動化截圖方法(Method)，截取網頁圖表，其中的重點包含：

安裝Python Selenium套件
Python Selenium套件截圖方法(Method)
Python Selenium套件特定位置截圖

一、安裝Python Selenium套件

Python Selenium套件在[Python爬蟲教學]整合Python Selenium及BeautifulSoup實現動態網頁爬蟲文章有詳細的介紹，簡單來說就是一個瀏覽器自動化套件，使用者能夠透過撰寫腳本的方式，驅動瀏覽器執行各種操作，所以常應用於網頁自動化測試。

而安裝的方法，可以透過以下的指令來完成：

$ pip install selenium

除此之外，還需安裝瀏覽器的驅動程式，這邊筆者推薦可以利用以下指令安裝使用Webdriver-Manager套件，能夠在執行Python Selenium時，自動偵測與安裝所使用的瀏覽器驅動程式：

$ pip install webdriver-manager

二、Python Selenium套件截圖方法(Method)

安裝完成後，建立app.py檔案，引用剛剛所安裝的Python Selenium及Webdriver-Manager模組(Module)，如下範例：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager

接著，建立Python Selenium的Chrome瀏覽器驅動物件，並且請求所要截圖的網頁網址，這邊以Yahoo奇摩股市的台積電每股盈餘圖表為例，如下範例：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

而要進行截圖的動作，就需要使用Python Selenium套件的get_screenshot_as_file()方法(Method)，傳入自訂的檔案名稱即可，如下範例：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

driver.get_screenshot_as_file("2330.png")

執行完成，別忘了呼叫Python Selenium套件的close()方法(Method)，關閉瀏覽器，如下範例：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

driver.get_screenshot_as_file("2330.png")

driver.close()

執行結果

從執行結果會發現，Python Selenium套件沒有截取到我們所需要的圖表，這時候，就會需要利用下一節的技巧，將畫面移動到特定的位置，在進行截圖的動作。

三、Python Selenium套件特定位置截圖

前往Yahoo奇摩股市的台積電每股盈餘圖表，並且在圖表的地方按下右鍵，選擇「檢查」，可以看到它的原始碼如下：

其中，就可以使用圖表的class(樣式類別)，來定位圖表的位置，如下範例第8行：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

charts = driver.find_element_by_class_name('chartjs-render-monitor')

driver.get_screenshot_as_file("2330.png")

driver.close()

而要將畫面移動到圖表的位置，就需要引用Python Selenium套件的ActionChains模組(Module)，如下範例第3行：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.action_chains import ActionChains


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

charts = driver.find_element_by_class_name('chartjs-render-monitor')

driver.get_screenshot_as_file("2330.png")

driver.close()

接著，建立ActionChains物件，並且呼叫move_to_element()方法(Method)，傳入所要移動到的元素位置，如下範例第11、12行：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.action_chains import ActionChains


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.get("https://tw.stock.yahoo.com/quote/2330/eps")

charts = driver.find_element_by_class_name('chartjs-render-monitor')

action = ActionChains(driver)
action.move_to_element(charts).perform()

driver.get_screenshot_as_file("2330.png")

driver.close()

執行結果

成功截取了我們所需要的每股盈餘網頁圖表。而如果要截取多家公司的話，透過迴圈的方式即可完成，如下範例第6、9、10、17行：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.action_chains import ActionChains


stockNos = ['2330', '2303', '2408']
driver = webdriver.Chrome(ChromeDriverManager().install())

for stockNo in stockNos:
    driver.get(f"https://tw.stock.yahoo.com/quote/{stockNo}/eps")

    charts = driver.find_element_by_class_name('chartjs-render-monitor')

    action = ActionChains(driver)
    action.move_to_element(charts).perform()

    driver.get_screenshot_as_file(f"{stockNo}.png")

driver.close()

執行結果