Wie mache ich Screenshots in Python?

Headless-Browser-Automatisierungsbibliotheken bieten eine Vielzahl von Konfigurationsoptionen, die zum Erstellen von Screenshots angewendet werden können. In dieser Anleitung erklären wir das Erstellen von Python-Screenshots mit Selenium und Playwright. Anschließend befassen wir uns mit gängigen Browser-Tipps und -Tricks zum Anpassen von Webseitenerfassungen. Fangen wir an!

Grundlegende Screenshot-Funktionen

In diesem Leitfaden behandeln wir zunächst die Kernmethoden von Selenium und Playwright, einschließlich der Installation, die zum Erstellen von Python-Screenshots erforderlich ist. Anschließend erkunden wir gängige Funktionen zum Erstellen benutzerdefinierter Selenium- und Playwright-Screenshots.

Selenium-Screenshots

Bevor wir die Verwendung von Selenium zum Erstellen von Screenshots in Python erkunden, installieren wir es. Verwenden Sie den folgenden Pip-Befehl, um Selenium zusammen mit dem Webdriver-Manager zu installieren:

pip install selenium webdriver-manager

Wir verwenden die Webdriver-Manager-Python-Bibliothek, um die erforderlichen Browsertreiber automatisch herunterzuladen:

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()))

Da nun die erforderliche Installation fertig ist, verwenden wir Selenium Python, um Screenshots zu machen:

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()

Das obige Python-Skript zum Erstellen von Selenium-Python-Screenshots ist ziemlich einfach. Wir verwenden die Methode save_screenshot, um einen Screenshot des vollständigen Ansichtsfensters des Fahrers zu erstellen und die Bilddatei in der Datei „products.png“ zu speichern. Als Alternative zum direkten Speichern auf der Festplatte stehen andere Methoden zur Verfügung, um die einfachen Bilddaten zur weiteren Verarbeitung alsbinär oder base64zu speichern.

Weitere Informationen zu Selen finden Sie in unserem speziellen Leitfaden.

Dramatiker-Screenshots

Die Playwright-API ist in verschiedenen Programmiersprachen verfügbar. Da wir Screenshots mit Python Playwright machen werden. Installieren Sie das Python-Paket mit dem folgenden Pip-Befehl:

pip install playwright

Als nächstes installieren Sie die erforderlichen Playwright Web Diver-Binärdateien:

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

Um einen Playwright-Screenshot zu erstellen, können wir die .screenshot-Methode verwenden:

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)

Oben beginnen wir damit, eine neue Playwright-Headless-Browser-Instanz zu starten und dann einen neuen Tab darin zu öffnen. Dann erstellen wir einen Screenshot der Seite und speichern ihn in der PNG-Datei des Produkts.

Weitere Informationen zur Verwendung für Web Scraping finden Sie in unserem speziellen Leitfaden zu Playwright.

Wartezeiten und Timeouts

Bilder auf Webseiten werden dynamisch geladen. Daher istdas richtige Warten auf das Laden von entscheidender Bedeutung, um beschädigte Website-Screenshots zu verhindern. Lassen Sie uns verschiedene Techniken zum Definieren von Wartezeiten und Zeitüberschreitungen untersuchen.

Zeitüberschreitungen behoben

Feste Zeitüberschreitungen sind die grundlegendste Art von Headless-Browser-Wartefunktionen. Indem wireine gewisse Zeit warten, bevor wir Screenshots aufnehmen, stellen wir sicher, dass alle DOM-Elemente korrekt geladen werden.

Selen:

import time # .... driver.get("https://web-scraping.dev/products") # wait for 10 seconds before taking screenshot time.sleep(10) driver.save_screenshot('products.png')

Dramatiker

# .... 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")

Oben verwenden wir die Methode „wait_for_timeout“ von Playwright, um eine feste Wartebedingung zu definieren, bevor wir mit dem Webseiten-Screenshot fortfahren. DaSelenium keine integrierten Methoden für feste Zeitüberschreitungen bereitstellt, verwenden wir das integrierte Zeitmodul von Python.

Selektoren

Dynamische Wartebedingungen beinhaltendas Warten darauf, dass die Selektoren bestimmter Elemente auf der Seite sichtbar werden, bevor fortgefahren wird. Wird der Selektor innerhalb des definierten Timeouts gefunden, wird der Wartevorgang beendet.

Selen

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")

Dramatiker

# .... 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")

Oben verwenden wir dynamische Bedingungen, um auf Selektoren zu warten, bevor wir Python-Screenshots erstellen, indem wir die „expected_conditions“ von Selenium und die „wait_for_selector“-Methode von Playwright verwenden.

Ladezustand

Die letzte verfügbare Wartebedingung ist der Ladezustand. Es wartet darauf, dass dieBrowserseite einen bestimmten Status erreicht:

• domcontentloaded: Warten Sie, bis der vollständige DOM-Baum geladen ist
• networkidle: Warten Sie, bis mindestens 500 ms lang keine Netzwerkverbindungen bestehen

Das Warten auf den Netzwerk-Leerlaufzustand ist besonders hilfreich, wenn Webseiten-Schnappschüsse mit mehreren zu rendernden Bildern erfasst werden. Da diese Seiten bandbreitenintensiv sind, ist es einfacher, auf den Abschluss aller Netzwerkanrufe zu warten, anstatt auf bestimmte Selektoren zu warten.

So nutzen Sie die Methode „waitForLoadState“, um zu warten, bevor Sie Playwright-Screenshots erstellen:

# .... 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")

Beachten Sie, dass Selenium keine verfügbaren Methoden zum Abfangen des Ladezustands des Treibers hat, diese jedoch mithilfe einer benutzerdefinierten JavaScript-Ausführung implementiert werden können.

Emulation

Emulation ermöglicht die Anpassung der Headless-Browserkonfiguration, umgängige Webbrowsertypen und Benutzerpräferenzen zu simulieren. Diese Einstellungen werdenauf den entsprechend erstellten Webseiten-Screenshots widergespiegelt.

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 theresolution 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 thelocale language and timezone settingsused. 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 throughlongitude 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 thebrowser'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, ithas 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:

Selection Targeting

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

Full Page

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

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

• Screenshotviewport, the image dimensions as height and width.
• Browserscrolling, 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 byscreenshotting 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:

Coordinates

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

• X-coordinateof the clip area's horizontal position (left to right)
• Y-coordinateof the clip area's vertical position (top to bottom)
• Widthandheightdimensions

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:

The above banner is displayed throughcookies. If we click "accept", acookie 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'llset 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 usinganti-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.

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!

More on Scrapfly

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.

Wie erstelle ich vollständige Webseiten-Screenshots in Python?

Um einen ganzseitigen Screenshot zu erstellen, scrollen Sie bei Bedarf mit Selenium oder Playwright auf der Seite nach unten. Verwenden Sie dann die Fullpage-Methode in Playwright: Screenshot(path, full_page=True), um automatisch Screenshots im vollständigen Ansichtsfenster aufzunehmen.

Was Selenium betrifft, aktualisieren Sie die Ansichtsfensterhöhe des Browsers nach dem Scrollen manuell, um die gesamte vertikale Höhe abzudecken.

Zusammenfassung

In dieser Anleitung haben wir erklärt, wie man Playwright- und Selenium-Screenshots in Python erstellt. Wir haben zunächst mit der Installation und der grundlegenden Nutzung begonnen.

Wir haben eine Schritt-für-Schritt-Anleitung zur Verwendung erweiterter Selenium- und Playwright-Funktionen zur Erstellung benutzerdefinierter Screenshots durchgearbeitet:

• Warten auf feste Ti-Timeouts, Selektor- und Ladezustände
• Emulieren von Browsereinstellungen, Ansichtsfenster, Geolokalisierung, Thema, Gebietsschema und Zeitzone
• Vollständige Seitenerfassung, Auswahl-Targeting und Bannerblockierung

Das obige ist der detaillierte Inhalt vonWie mache ich Screenshots in Python?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!