Python でスクリーンショットを撮るには?-Python チュートリアル-php.cn

How To Take Screenshots In Python?

ヘッドレスブラウザ自動化ライブラリは、スクリーンショットの撮影に適用できる幅広い構成オプションを提供します。このガイドでは、Selenium と Playwright を使用して Python のスクリーンショットを取得する方法について説明します。次に、Web ページのキャプチャをカスタマイズするための一般的なブラウザーのヒントとコツを見ていきます。始めましょう!

基本的なスクリーンショット機能

このガイドでは、Python のスクリーンショットを撮るために必要なインストールを含む、Selenium と Playwright のコアメソッドについて説明することから始めます。次に、カスタマイズされた Selenium と Playwright のスクリーンショットを撮るための一般的な機能を調べます。

セレンのスクリーンショット

Python で Selenium を使用してスクリーンショットを作成する方法を調べる前に、Selenium をインストールしましょう。以下の pip コマンドを使用して、webdriver-manager と一緒に Selenium をインストールします:

pip install selenium webdriver-manager

ログイン後にコピー

webdriver-manager Python ライブラリを使用して、必要なブラウザドライバーを自動的にダウンロードします。

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

ログイン後にコピー

必要なインストールの準備ができたので、Selenium Python を使用してスクリーンショットを撮りましょう:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager

driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

# request target web page
driver.get("https://web-scraping.dev/products")

# take sceenshot and directly save it
driver.save_screenshot('products.png')

# image as bytes
bytes = driver.get_screenshot_as_png()

# image as base64 string
base64_string = driver.get_screenshot_as_base64()

ログイン後にコピー

Selenium Python のスクリーンショットを撮るための上記の Python スクリプトは非常に簡単です。 save_screenshot メソッドを使用して、ドライバービューポート全体のスクリーンショットを撮り、その画像ファイルを products.png ファイルに保存します。ディスクに直接保存する代わりに、プレーン画像データをバイナリまたはbase64として保存してさらに処理する他の方法も利用できます。

Selenium の詳細については、専用ガイドを参照してください。

劇作家のスクリーンショット

Playwright API はさまざまなプログラミング言語で利用できます。 Python Playwright を使用してスクリーンショットを撮るので。以下の pip コマンドを使用して Python パッケージをインストールします:

pip install playwright

ログイン後にコピー

次に、必要な Playwright Web diver バイナリをインストールします。

playwright install chromium # alternatively install `firefox` or `webkit`

ログイン後にコピー

Playwright のスクリーンショットを撮るには、.screenshot メソッドを使用できます:

from pathlib import Path
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    # request target web page
    page.goto('https://web-scraping.dev/products')

    # take sceenshot and directly save it
    page.screenshot(path="products.png")

    # or screenshot as bytes
    image_bytes = page.screenshot()
    Path("products.png").write_bytes(image_bytes)

ログイン後にコピー

上記では、まず新しい Playwright ヘッドレスブラウザインスタンスを起動し、その中で新しいタブを開きます。次に、ページのスクリーンショットを使用して、商品の PNG ファイルに保存します。

Web スクレイピングでの使用方法の詳細については、Playwright の専用ガイドをご覧ください。

待機とタイムアウト

Web ページ上の画像は動的に読み込まれます。したがって、Web サイトのスクリーンショットの破損を防ぐには、ロードを正しく待機することが重要です。待機とタイムアウトを定義するためのさまざまな手法を検討してみましょう。

固定タイムアウト

固定タイムアウトは、ヘッドレスブラウザの待機機能の最も基本的なタイプです。スクリーンショットをキャプチャする前に一定時間待機することで、すべての DOM 要素が正しくロードされることが保証されます。

セレン:

import time
# ....

driver.get("https://web-scraping.dev/products")

# wait for 10 seconds before taking screenshot
time.sleep(10)

driver.save_screenshot('products.png')

ログイン後にコピー

劇作家

# ....

with sync_playwright() as p:
    # ....
    page.goto('https://web-scraping.dev/products')

    # wait for 10 seconds before taking screenshot
    page.wait_for_timeout(10000)

    page.screenshot(path="products.png")

ログイン後にコピー

上記では、Playwright の wait_for_timeout メソッドを使用して、Web ページのスクリーンショットに進む前に固定の待機条件を定義しています。 Selenium は固定タイムアウト用の組み込みメソッドを提供していないので、Python の組み込み時間モジュールを使用します。

セレクター

動的待機条件には、続行する前に特定の要素のセレクターがページ上に表示されるまで待機するが含まれます。定義されたタイムアウト内にセレクターが見つかった場合、待機プロセスは終了します。

セレン

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.common.by import By
# ....

driver.get("https://web-scraping.dev/products")

_timeout = 10 # set the maximum timeout to 10 seconds
wait = WebDriverWait(driver, _timeout)
wait.until(expected_conditions.presence_of_element_located(
    (By.XPATH, "//div[@class='products']") # wait for XPath selector
    # (By.CSS_SELECTOR, "div.products") # wait for CSS selector
    )
)

driver.save_screenshot("products.png")

ログイン後にコピー

劇作家

# ....

with sync_playwright() as p:
    # ....
    page.goto('https://web-scraping.dev/products')

    # wait for XPath or CSS selector
    page.wait_for_selector("div.products", timeout=10000)
    page.wait_for_selector("//div[@class='products']", timeout=10000)

    page.screenshot(path="products.png")

ログイン後にコピー

上記では、Selenium の Expected_conditions と Playwright の wait_for_selector メソッドを使用して、Python スクリーンショットを撮る前にセレクターを待機する動的条件を利用しています。

ロード状態

利用可能な最後の待機条件はロード状態です。 ブラウザページが特定の状態に達するまで待機します :

domcontentloaded: 完全な DOM ツリーがロードされるまで待ちます
networkidle: ネットワーク接続が少なくとも 500 ミリ秒なくなるまで待ちます

ネットワークアイドル状態を待機することは、レンダリングする複数の画像を含む Web ページのスナップショットをキャプチャする場合に特に役立ちます。これらのページは帯域幅を大量に消費するため、特定のセレクターを待つよりも、すべてのネットワーク呼び出しが終了するのを待つほうが簡単です。

ここでは、waitForLoadState メソッドを利用して、Playwright のスクリーンショットを撮る前に待機する方法を示します:

# ....

with sync_playwright() as p:
    # ....
    page.goto('https://web-scraping.dev/products')

    # wait for load state
    page.wait_for_load_state("domcontentloaded") # DOM tree to load
    page.wait_for_load_state("networkidle") # network to be idle

    page.screenshot(path="products.png")

ログイン後にコピー

Selenium にはドライバーのロード状態をインターセプトするためのメソッドがありませんが、カスタム JavaScript の実行を使用して実装できることに注意してください。

エミュレーション

エミュレーションにより、ヘッドレスブラウザ構成をカスタマイズして、一般的な Web ブラウザの種類とユーザー設定をシミュレートできます。これらの設定は、それに応じて撮影された Web ページのスクリーンショットに反映されます。

For instance, by emulating a specific phone browser, the website screenshot taken appears as if it was captured by an actual phone.

Viewport

Viewport settings represent the resolution of the browser device through width and height dimensions. Here's how to change Python screenshot viewport.

Selenium

# ....

# set the viewport dimensions (width x height)
driver.set_window_size(1920, 1080)

driver.get("https://web-scraping.dev/products")

driver.save_screenshot("products.png")

ログイン後にコピー

Playwright:

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)

    context = browser.new_context(
        viewport={"width": 1920, "height": 1080}, # set viewport dimensions
        device_scale_factor=2, # increase the pixel ratio
    )

    page = context.new_page()
    page.goto("https://web-scraping.dev/products")

    page.screenshot(path="products.png")

ログイン後にコピー

Here, we use Selenium's set_window_size method to set the browser viewport. As for Playwright, we define a browser context to set the viewport in addition to increasing the pixel ratio rate through the the device_scale_factor property for higher quality.

Playwrights provides a wide range of device presets to emulate multiple browsers and operating systems, enabling further Playwright screenshot customization:

# ....

with sync_playwright() as p:
    iphone_14 = p.devices['iPhone 14 Pro Max']
    browser = p.webkit.launch(headless=False)
    context = browser.new_context(
        **iphone_14,
    )

    # open a browser tab with iPhone 14 Pro Max's device profile
    page = context.new_page()

    # ....

ログイン後にコピー

The above Python script selects a device profile to automatically define its settings, including UserAgent, screen viewport, scale factor, and browser type. For the full list of available device profiles, refer to the official device registry.

Locale and Timezone

Taking a screenshot on websites with localization features can make the images look different based on the locale language and timezone settings used. Hence, corretly setting these values ensures the correct behavior.

Selenium

from selenium import webdriver
from selenium.webdriver.chrome.service import Service as ChromeService
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.options import Options

driver_manager = ChromeService(ChromeDriverManager().install())
options = Options()
# set locale
options.add_argument("--lang=fr-FR")

driver = webdriver.Chrome(service=driver_manager, options=options)

# set timezone using devtools protocol
timezone = {'timezoneId': 'Europe/Paris'}
driver.execute_cdp_cmd('Emulation.setTimezoneOverride', timezone)

driver.get("https://webbrowsertools.com/timezone/")
# ....

ログイン後にコピー

Playwright

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        locale='fr-FR',
        timezone_id='Europe/Paris',
    )
    page = context.new_page()
    page.goto("https://webbrowsertools.com/timezone/")
    # ....

ログイン後にコピー

In this Python code, we set the browser's localization preferences through the locale and timezone settings. However, other factors can affect the localization profile used. For the full details, refer to our dedicated guide on web scraping localization.

Geolocation

Taking Python screenshots on websites can often be affected by automatic browser location identification. Here's how we can change it through longitude and latitude values.

Selenium

# ....
driver_manager = ChromeService(ChromeDriverManager().install())
driver = webdriver.Chrome(service=driver_manager)

geolocation = dict(
    {
        "latitude": 37.17634,
        "longitude": -3.58821,
        "accuracy": 100
    }
)

# set geolocation using devtools protocol
driver.execute_cdp_cmd("Emulation.setGeolocationOverride", geolocation)

ログイン後にコピー

Playwright

# ....
with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        geolocation={"longitude": 37.17634, "latitude": -3.58821},
        permissions=["geolocation"]
    )
    page = context.new_page()

ログイン後にコピー

Dark Mode

Taking webpage screenshots in the dark mode is quite popular. To approach it, we can change the browser's default color theme preference.

Selenium

# ....

options = Options()
options.add_argument('--force-dark-mode')

driver_manager = ChromeService(ChromeDriverManager().install())
driver = webdriver.Chrome(service=driver_manager, options=options)

driver.get("https://reddit.com/") # will open in dark mode

ログイン後にコピー

Playwright

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        color_scheme='dark'
    )
    page = context.new_page()
    page.goto("https://reddit.com/") # will open in dark mode

ログイン後にコピー

The above code sets the default browser theme to dark mode, enabling dark-mode web screenshots accordingly. However, it has no effect on websites without native theme-modification support.

Pro Tip: Force Dark Mode

To force dark-mode screenshots across all websites, we can use Chrome flags. To do this, start by retrieving the required argument using the below steps:

Open the available chrome flags from the address chrome://flags/
Search for the enable-force-dark flag and enable it with selective inversion of everything
Relaunch the browser
Go to chrome://version/ and copy the created flag argument from the command line property

After retrieving the flag argument, add it to the browser context to force dark website screenshots in Python.

Selenium

# ....

driver_manager = ChromeService(ChromeDriverManager().install())
options = Options()

options.add_argument('--enable-features=WebContentsForceDark:inversion_method/cielab_based')
driver = webdriver.Chrome(service=driver_manager, options=options)

driver.get("https://web-scraping.dev/products")
driver.save_screenshot('dark_screenshot.png')

ログイン後にコピー

Playwright

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(
        headless=False,
        args=[
            '--enable-features=WebContentsForceDark:inversion_method/cielab_based'
        ]
    )
    context = browser.new_context()
    page = context.new_page()

    page.goto("https://web-scraping.dev/products")
    page.screenshot(path="dark_screenshot.png")

ログイン後にコピー

Here's what the retrieved dark-mode Python screenshot looks like:

How To Take Screenshots In Python?

Selection Targeting

Lastly, let's explore using Python to screenshot webpages through area selection. It enables targeting specific areas of the page.

Full Page

Taking full-page screenshots is an extremely popular use case, allowing snapshots to be captured at the whole page's vertical height.

Full-page screenshots are often _ misunderstood _. Hence, it's important to differentiate between two distinct concepts:

Screenshot viewport, the image dimensions as height and width.
Browser scrolling, whether the driver has scrolled down to load more pages.

A headless browser can scroll down, but its screenshot height hasn't been updated for the new height , or vice versa. Hence, the retrieved web snapshot doesn't look as expected.

Here's how to take scrolling screenshots with Selenium and Playwright.

Selenium

# ....

def scroll(driver):
    _prev_height = -1
    _max_scrolls = 100
    _scroll_count = 0
    while _scroll_count < _max_scrolls:
        # execute JavaScript to scroll to the bottom of the page
        driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
        # wait for new content to load (change this value as needed)
        time.sleep(1)
        # check whether the scroll height changed - means more pages are there
        new_height = driver.execute_script("return document.body.scrollHeight")
        if new_height == _prev_height:
            break
        _prev_height = new_height
        _scroll_count += 1

driver_manager = ChromeService(ChromeDriverManager().install())
options = Options()
options.add_argument("--headless") # ⚠️ headless mode is required
driver = webdriver.Chrome(service=driver_manager, options=options)

# request the target page and scroll down
driver.get("https://web-scraping.dev/testimonials")
scroll(driver)

# retrieve the new page height and update the viewport
new_height = driver.execute_script("return document.body.scrollHeight")
driver.set_window_size(1920, new_height)

# screenshot the main page content (body)
driver.find_element(By.TAG_NAME, "body").screenshot("full-page-screenshot.png")

ログイン後にコピー

Playwright

# ....

def scroll(page):
    _prev_height = -1
    _max_scrolls = 100
    _scroll_count = 0
    while _scroll_count < _max_scrolls:
        # execute JavaScript to scroll to the bottom of the page
        page.evaluate("window.scrollTo(0, document.body.scrollHeight)")
        # wait for new content to load
        page.wait_for_timeout(1000)
        # check whether the scroll height changed - means more pages are there
        new_height = page.evaluate("document.body.scrollHeight")
        if new_height == _prev_height:
            break
        _prev_height = new_height
        _scroll_count += 1

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        viewport={"width": 1920, "height": 1080}
    )
    page = context.new_page()

    # request the target page and scroll down
    page.goto("https://web-scraping.dev/testimonials")
    scroll(page)

    # automatically capture the full page
    page.screenshot(path="full-page-screenshot.png", full_page=True)

ログイン後にコピー

Since Selenium doesn't provide automatic full page screenshot capturing capabilities, we utilize additional steps:

Get the new page height after scrolling and use it to update the viewport.
Find the body element of the page and target it with a screenshot.

Selectors

So far, we have been taking web page screenshots against the entire screen viewport. However, headless browsers allow targeting a specific area by screenshotting elements using their equivalent selectors :

Selenium

# ....

driver.set_window_size(1920, 1080)
driver.get("https://web-scraping.dev/product/3")

# wait for the target element to be visible
wait = WebDriverWait(driver, 10)
wait.until(expected_conditions.presence_of_element_located(
    (By.CSS_SELECTOR, "div.row.product-data")
))

element = driver.find_element(By.CSS_SELECTOR, 'div.row.product-data')

# take web page screenshot of the specific element
element.screenshot('product-data.png')

ログイン後にコピー

Playwright

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context(
        viewport={"width": 1920, "height": 1080}
    )
    page = context.new_page()

    page.goto('https://web-scraping.dev/product/3')

    # wait for the target element to be visible
    page.wait_for_selector('div.row.product-data')

    # take web page screenshot of the specific element
    page.locator('div.row.product-data').screenshot(path="product-data.png")

ログイン後にコピー

In the above code, we start by waiting for the desired element to appear in the HTML. Then, we select it and specifically capture it. Here's what's the retrieved Python screenshot looks like:

How To Take Screenshots In Python?

Coordinates

Furthermore, we can customize the webpage Python screenshots using coordinate values. In other words, it crops the web page into an image using four attributes :

X-coordinate of the clip area's horizontal position (left to right)
Y-coordinate of the clip area's vertical position (top to bottom)
Width and height dimensions

Here's how to take clipped Playwright and Selenium screenshots:

Selenium

from PIL import Image # pip install pillow
from io import BytesIO

# ....
driver.get("https://web-scraping.dev/product/3")

wait = WebDriverWait(driver, 10)
wait.until(expected_conditions.presence_of_element_located(
    (By.CSS_SELECTOR, "div.row.product-data")
))
element = driver.find_element(By.CSS_SELECTOR, 'div.row.product-data')

# automatically retrieve the coordinate values of selected selector
location = element.location
size = element.size
coordinates = {
    "x": location['x'],
    "y": location['y'],
    "width": size['width'],
    "height": size['height']
}
print(coordinates)
{'x': 320.5, 'y': 215.59375, 'width': 1262, 'height': 501.828125}

# capture full driver screenshot
screenshot_bytes = driver.get_screenshot_as_png()

# clip the screenshot and save it
img = Image.open(BytesIO(screenshot_bytes))
clip_box = (coordinates['x'], coordinates['y'], coordinates['x'] + coordinates['width'], coordinates['y'] + coordinates['height'])
cropped_img = img.crop(clip_box)
cropped_img.save('clipped-screenshot.png')

ログイン後にコピー

Playwright

# ....

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    page.goto('https://web-scraping.dev/product/3')
    page.wait_for_selector('div.row.product-data')

    element = page.query_selector("div.row.product-data")

    # automatically retrieve the coordinate values of selected selector
    coordinates = element.bounding_box()
    print(coordinates)
    {'x': 320.5, 'y': 215.59375, 'width': 1262, 'height': 501.828125}

    # capture the screenshot with clipping
    page.screenshot(path="clipped-screenshot.png", clip=coordinates)

ログイン後にコピー

We use Playwright's built-in clip method to automatically crop the captured screenshot. As for Selenium, we use Pillow to manually clip the full web page snapshot.

Banner Blocking

Websites' pop-up banners prevent taking clear screenshots. One of these is the famous " Accept Cookies" banner on web-scraping.dev as an example:

How To Take Screenshots In Python?

The above banner is displayed through cookies. If we click "accept", a cookie value will be saved on the browser to save our reference and prevent displaying the banner again.

If we observe observe browser developer tools

, we'll find the cookiesAccepted cookie set to true. So, to block cookie banners while taking Python screenshots, we'll set this cookie before navigating to the target web page.

Selenium

# ....

driver.get("https://web-scraping.dev")

# add the cookie responsible for blocking screenshot banners
driver.add_cookie({'name': 'cookiesAccepted', 'value': 'true', 'domain': 'web-scraping.dev'})

driver.get("https://web-scraping.dev/login?cookies=")
driver.save_screenshot('blocked-banner-screenshot.png'

ログイン後にコピー

Playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    # add the cookie responsible for blocking screenshot banners
    context.add_cookies(
        [{'name': 'cookiesAccepted', 'value': 'true', 'domain': 'web-scraping.dev', 'path': '/'}]
    )
    page = context.new_page()

    page.goto('https://web-scraping.dev/login?cookies=')
    page.screenshot(path='blocked-banner-screenshot.png')

ログイン後にコピー

For further details on using cookies, refer to our dedicated guide.

Powering Up With ScrapFly

So far, we have explored taking website screenshots using a basic headless browser configuration. However, modern websites prevent screenshot automation using anti-bot measures. Moreover, maintaining headless web browsers can be complex and time-consuming.

ScrapFly is a screenshot API that enables taking web page captures at scale by providing:

Antibot protection bypass - screenshot web pages on protected domains without being blocked by antibot services like Cloudflare.
Built-in rotating proxies
Prevents IP address blocking encountered by rate-limit rules.
Geolocation targeting access location-restricted domains through an IP address pool of +175 countries.
JavaScript execution - take full advantage of headless browser automation through scrolling, navigating, clicking buttons, and filling out forms etc.
Full screenshot customization - controls the webpage screenshot capture behavior by setting its file type, resolution, color mode, viewport, and banners settings.
Python and Typescript SDKs.

How To Take Screenshots In Python?
ScrapFly abstracts away all the required engineering efforts!

Here's how to take Python screenshots using ScrapFly's screenshot API. It's as simple as sending an API request:

from pathlib import Path
import urllib.parse
import requests

base_url = 'https://api.scrapfly.io/screenshot?'

params = {
    'key': 'Your ScrapFly API key',
    'url': 'https://web-scraping.dev/products', # web page URL to screenshot
    'format': 'png', # screenshot format (file extension)
    'capture': 'fullpage', # area to capture (specific element, fullpage, viewport)
    'resolution': '1920x1080', # screen resolution
    'country': 'us', # proxy country
    'rendering_wait': 5000, # time to wait in milliseconds before capturing
    'wait_for_selector': 'div.products-wrap', # selector to wait on the web page
    'options': [
        'dark_mode', # use the dark mode
        'block_banners', # block pop up banners
        'print_media_format' # emulate media printing format
    ],
    'auto_scroll': True # automatically scroll down the page
}

# Convert the list of options to a comma-separated string
params['options'] = ','.join(params['options'])
query_string = urllib.parse.urlencode(params)
full_url = base_url + query_string

response = requests.get(full_url)
image_bytes = response.content
# save to disk
Path("screenshot.png").write_bytes(image_bytes)

ログイン後にコピー

Try for FREE!

FAQ

To wrap up this guide on taking website screenshots with Python Selenium and Playwright, let's have a look at some frequqntly asked questions.

Are there alternatives to headless browsers for taking Python screenshots?

Yes, screenshot APIs are great alternatives. They manage headless browsers under the hood, enabling website snapshots through simple HTTP requests. For further details, refer to our guide on the best screenshot API.

How to take screenshots in NodeJS?

Puppeteer is a popular headless browser that allows web page captures using the page.screenshot method. For more, refer to our guide on taking screenshots with Puppeteer.

Python で Web ページ全体のスクリーンショットを撮るにはどうすればよいですか?

ページ全体のスクリーンショットを撮るには、必要に応じて Selenium または Playwright を使用してページを下にスクロールします。次に、Playwright の fullpage メソッド: スクリーンショット(path, full_page=True) を使用して、フルビューポートでスクリーンショットを自動的にキャプチャします。

Selenium に関しては、スクロール後にブラウザのビューポートの高さを手動で更新して、垂直方向の高さ全体をカバーします。