[Python] seleniumでWebページ全体のスクリーンショットを撮影する方法

2025-01-18更新日: 2025-01-18

Seleniumを使用してWebページ全体のスクリーンショットを撮影するには、通常のdriver.save_screenshot()ではページの表示範囲のみがキャプチャされます。

Webページ全体を撮影するには、execute_script()でページの高さを取得し、ウィンドウサイズを調整する必要があります。

具体的には、driver.execute_script("return document.body.scrollHeight")でページの高さを取得し、driver.set_window_size()でウィンドウサイズを変更した後、save_screenshot()で全体をキャプチャします。

目次から探す

Webページ全体のスクリーンショットを撮影する手順
Webページ全体のスクリーンショットを撮影する際の注意点
応用例：特定の要素のスクリーンショットを撮影する
応用例：複数ページのスクリーンショットを自動で撮影する
応用例：ヘッドレスブラウザでスクリーンショットを撮影する
まとめ

Webページ全体のスクリーンショットを撮影する手順

Webページ全体のスクリーンショットを撮影するには、Seleniumを使用してページの高さを取得し、ウィンドウサイズを調整し、最終的にスクリーンショットを保存する必要があります。

以下にその手順を詳しく説明します。

ページの高さを取得する方法

ページの高さを取得するには、JavaScriptを使用してdocument.body.scrollHeightを取得します。

これにより、ページ全体の高さを知ることができます。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの高さを取得
page_height = driver.execute_script("return document.body.scrollHeight")
print("ページの高さ:", page_height)
# WebDriverを終了
driver.quit()

ページの高さ: 1200

ウィンドウサイズを動的に変更する方法

ページの高さを取得したら、ウィンドウサイズをその高さに合わせて変更します。

これにより、全体のスクリーンショットを撮影する準備が整います。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの高さを取得
page_height = driver.execute_script("return document.body.scrollHeight")
# ウィンドウサイズを変更
driver.set_window_size(1920, page_height)
# WebDriverを終了
driver.quit()

ウィンドウサイズを変更しました: 幅1920px, 高さ1200px

スクリーンショットを保存する方法

ウィンドウサイズを変更した後、スクリーンショットを撮影し、指定したパスに保存します。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの高さを取得
page_height = driver.execute_script("return document.body.scrollHeight")
# ウィンドウサイズを変更
driver.set_window_size(1920, page_height)
# スクリーンショットを保存
driver.save_screenshot("screenshot.png")
# WebDriverを終了
driver.quit()

スクリーンショットを保存しました: screenshot.png

実際のコード例

以下は、上記の手順をすべて組み合わせた実際のコード例です。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの高さを取得
page_height = driver.execute_script("return document.body.scrollHeight")
# ウィンドウサイズを変更
driver.set_window_size(1920, page_height)
# スクリーンショットを保存
driver.save_screenshot("screenshot.png")
# WebDriverを終了
driver.quit()

スクリーンショットを保存しました: screenshot.png

このコードを実行することで、指定したWebページの全体のスクリーンショットを撮影し、screenshot.pngというファイル名で保存することができます。

Webページ全体のスクリーンショットを撮影する際の注意点

Webページ全体のスクリーンショットを撮影する際には、いくつかの注意点があります。

これらのポイントを押さえておくことで、より正確で高品質なスクリーンショットを取得することができます。

ページの動的コンテンツに対する対応

多くのWebページは、JavaScriptを使用して動的にコンテンツを生成します。

このため、スクリーンショットを撮影する前に、すべてのコンテンツが正しく読み込まれていることを確認する必要があります。

特に、画像や動画などのメディアコンテンツは、読み込みに時間がかかることがあります。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 動的コンテンツが読み込まれるまで待機
WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.ID, "dynamic-content"))
)
# スクリーンショットを保存
driver.save_screenshot("screenshot.png")
# WebDriverを終了
driver.quit()

動的コンテンツが読み込まれました。

スクロールが必要なページの処理

長いページやスクロールが必要なページでは、すべてのコンテンツを表示するためにスクロール処理が必要です。

Seleniumを使用して、ページを自動的にスクロールしながらスクリーンショットを撮影することができます。

from selenium import webdriver
import time
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの高さを取得
page_height = driver.execute_script("return document.body.scrollHeight")
# スクロールして全体を表示
for i in range(0, page_height, 100):
    driver.execute_script(f"window.scrollTo(0, {i});")
    time.sleep(0.1)  # スクロール後の待機
# スクリーンショットを保存
driver.save_screenshot("screenshot.png")
# WebDriverを終了
driver.quit()

ページをスクロールしながらスクリーンショットを撮影しました。

ページの読み込み完了を待つ方法

ページが完全に読み込まれるまで待機することは、スクリーンショットを撮影する際に非常に重要です。

WebDriverWaitを使用して、特定の要素が表示されるまで待機することができます。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ページの読み込み完了を待機
WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.TAG_NAME, "body"))
)
# スクリーンショットを保存
driver.save_screenshot("screenshot.png")
# WebDriverを終了
driver.quit()

ページの読み込みが完了しました。

スクリーンショットの解像度に関する問題

スクリーンショットの解像度は、撮影するウィンドウサイズやディスプレイの設定に依存します。

高解像度のスクリーンショットを取得するためには、ウィンドウサイズを適切に設定することが重要です。

また、ディスプレイのDPI設定も影響を与えるため、必要に応じて調整することが求められます。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# ウィンドウサイズを設定(高解像度)
driver.set_window_size(2560, 1440)
# スクリーンショットを保存
driver.save_screenshot("high_res_screenshot.png")
# WebDriverを終了
driver.quit()

高解像度のスクリーンショットを保存しました: high_res_screenshot.png

これらの注意点を考慮することで、Webページ全体のスクリーンショットをより効果的に撮影することができます。

応用例：特定の要素のスクリーンショットを撮影する

特定の要素のスクリーンショットを撮影することは、Webページの一部を強調したい場合や、特定の情報をキャプチャしたい場合に非常に便利です。

以下にその方法を詳しく説明します。

特定の要素を指定してスクリーンショットを撮影する方法

特定の要素を指定してスクリーンショットを撮影するには、まずその要素を特定し、次にその要素のスクリーンショットを取得します。

Seleniumでは、要素を取得するためにfind_elementメソッドを使用します。

from selenium import webdriver
from selenium.webdriver.common.by import By
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 特定の要素を取得(例：IDが"target-element"の要素)
element = driver.find_element(By.ID, "target-element")
# 要素のスクリーンショットを保存
element.screenshot("element_screenshot.png")
# WebDriverを終了
driver.quit()

特定の要素のスクリーンショットを保存しました: element_screenshot.png

要素の位置とサイズを取得する方法

要素の位置とサイズを取得することで、スクリーンショットを撮影する際にその要素がどのように表示されるかを把握できます。

locationとsizeプロパティを使用して、要素の位置とサイズを取得できます。

from selenium import webdriver
from selenium.webdriver.common.by import By
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 特定の要素を取得
element = driver.find_element(By.ID, "target-element")
# 要素の位置とサイズを取得
location = element.location
size = element.size
print("要素の位置:", location)
print("要素のサイズ:", size)
# WebDriverを終了
driver.quit()

要素の位置: {'x': 100, 'y': 200}
要素のサイズ: {'width': 300, 'height': 150}

要素のスクリーンショットを保存する方法

要素のスクリーンショットを保存する方法は、前述の通りelement.screenshotメソッドを使用します。

このメソッドを使うことで、特定の要素だけの画像を簡単に取得できます。

from selenium import webdriver
from selenium.webdriver.common.by import By
# WebDriverの初期化
driver = webdriver.Chrome()
# 対象のURLを開く
driver.get("https://example.com")
# 特定の要素を取得
element = driver.find_element(By.ID, "target-element")
# 要素のスクリーンショットを保存
element.screenshot("element_screenshot.png")
# WebDriverを終了
driver.quit()

要素のスクリーンショットを保存しました: element_screenshot.png

このように、特定の要素のスクリーンショットを撮影することで、必要な情報を効率的にキャプチャすることができます。

要素の位置やサイズを把握することで、より効果的なスクリーンショットを取得することが可能です。

応用例：複数ページのスクリーンショットを自動で撮影する

複数のWebページのスクリーンショットを自動で撮影することは、特定の情報を一括で取得したい場合に非常に便利です。

以下にその方法を詳しく説明します。

複数ページのURLをリスト化する方法

まず、スクリーンショットを撮影したいWebページのURLをリストとして定義します。

このリストを使用して、各ページにアクセスし、スクリーンショットを撮影します。

# スクリーンショットを撮影するURLのリスト
urls = [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
]

ループ処理でスクリーンショットを撮影する方法

次に、リスト内の各URLに対してループ処理を行い、各ページのスクリーンショットを撮影します。

Seleniumを使用して、各ページにアクセスし、スクリーンショットを取得します。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# スクリーンショットを撮影するURLのリスト
urls = [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
]
# 各URLに対してスクリーンショットを撮影
for url in urls:
    driver.get(url)  # URLを開く
    screenshot_name = url.split("/")[-1] + "_screenshot.png"  # ファイル名を生成
    driver.save_screenshot(screenshot_name)  # スクリーンショットを保存
    print(f"{screenshot_name}を保存しました。")
# WebDriverを終了
driver.quit()

page1_screenshot.pngを保存しました。
page2_screenshot.pngを保存しました。
page3_screenshot.pngを保存しました。

撮影したスクリーンショットを自動で保存する方法

上記のコードでは、各ページのスクリーンショットを自動で保存するために、URLの最後の部分をファイル名として使用しています。

これにより、各ページのスクリーンショットが一意の名前で保存されます。

from selenium import webdriver
# WebDriverの初期化
driver = webdriver.Chrome()
# スクリーンショットを撮影するURLのリスト
urls = [
    "https://example.com/page1",
    "https://example.com/page2",
    "https://example.com/page3"
]
# 各URLに対してスクリーンショットを撮影
for url in urls:
    driver.get(url)  # URLを開く
    screenshot_name = url.split("/")[-1] + "_screenshot.png"  # ファイル名を生成
    driver.save_screenshot(screenshot_name)  # スクリーンショットを保存
    print(f"{screenshot_name}を保存しました。")
# WebDriverを終了
driver.quit()

page1_screenshot.pngを保存しました。
page2_screenshot.pngを保存しました。
page3_screenshot.pngを保存しました。

このように、複数のWebページのスクリーンショットを自動で撮影し、保存することができます。

これにより、手動での作業を減らし、効率的に情報を収集することが可能になります。

応用例：ヘッドレスブラウザでスクリーンショットを撮影する

ヘッドレスブラウザを使用すると、GUI(グラフィカルユーザーインターフェース)を表示せずにWebページを操作することができます。

これにより、サーバー環境やCI/CDパイプラインでの自動化が容易になります。

以下に、ヘッドレスモードの概要とその使用方法について説明します。

ヘッドレスモードとは

ヘッドレスモードとは、ブラウザがユーザーインターフェースを表示せずに動作するモードのことです。

通常のブラウザでは、ウィンドウが表示され、ユーザーが操作できますが、ヘッドレスモードでは、バックグラウンドで処理が行われます。

このモードは、特に自動化テストやスクリーンショットの取得に便利です。

ヘッドレスモードでのスクリーンショット撮影方法

ヘッドレスモードでスクリーンショットを撮影するには、Seleniumのオプションを設定してブラウザを起動します。

以下は、Chromeブラウザをヘッドレスモードで起動し、スクリーンショットを撮影する例です。

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
# ヘッドレスモードのオプションを設定
options = Options()
options.add_argument("--headless")  # ヘッドレスモードを有効にする
options.add_argument("--window-size=1920,1080")  # ウィンドウサイズを指定
# WebDriverの初期化
driver = webdriver.Chrome(options=options)
# 対象のURLを開く
driver.get("https://example.com")
# スクリーンショットを保存
driver.save_screenshot("headless_screenshot.png")
# WebDriverを終了
driver.quit()

ヘッドレスモードでスクリーンショットを保存しました: headless_screenshot.png

ヘッドレスモードのメリットとデメリット

ヘッドレスモードにはいくつかのメリットとデメリットがあります。

メリット	デメリット
GUIが不要なため、リソースを節約できる	デバッグが難しい場合がある
サーバー環境での自動化が容易	一部のWebサイトが正常に表示されないことがある
高速な処理が可能	ユーザーインターフェースの操作ができない

ヘッドレスモードは、特に自動化やテストのシナリオで非常に便利ですが、特定の状況では注意が必要です。

特に、動的なコンテンツや特定のJavaScriptが必要なページでは、通常のブラウザでの動作と異なる場合があります。

これらの点を考慮しながら、ヘッドレスモードを活用することが重要です。