How to Take a Screenshot With Playwright?

Best practices

Ensure your browser is set up correctly for screenshots, including adjusting the viewport to match the desired capture size.
Use the `full_page=True` parameter in the `page.screenshot()` method to capture the entire length of the page, which is useful for pages with scrolling.
When capturing a screenshot of a specific element, double-check that your page.query_selector() correctly targets the intended element. This ensures you're not inadvertently capturing irrelevant portions of the page.
Anticipate possible loading issues with page elements, and handle exceptions to prevent your script from failing unexpectedly.

# Importing necessary libraries
from playwright.sync_api import sync_playwright

# Function to take a screenshot using Playwright
def take_screenshot(url, path):
# Start Playwright and launch browser
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
# Navigate to the target URL
page.goto(url)
# Take a full page screenshot
page.screenshot(path=path, full_page=True)
# Close the browser
browser.close()

# Example usage: screenshot of Oxylabs product page
take_screenshot('https://sandbox.oxylabs.io/products', 'full_page_screenshot.png')

# Taking a screenshot of an element
def screenshot_element(url, selector, path):
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto(url)
# Capture screenshot of a specific element
element = page.query_selector(selector)
element.screenshot(path=path)
browser.close()

# Example: screenshot of a specific element
screenshot_element('https://sandbox.oxylabs.io/products', '.product-list', 'element_screenshot.png')

Common issues

Ensure that the path specified for saving the screenshot exists and is writable to avoid file creation errors.
Adjust the screenshot quality and format by using options like `quality` for JPEG images and `type` to specify the image format (e.g., png or jpeg) in the `screenshot()` method.
Consider using `browser.close()` inside a `finally` block to ensure the browser always closes properly, even if an error occurs during the screenshot process.
Use timeouts or wait functions to ensure that all elements are fully loaded before taking the screenshot, especially on pages with dynamic content.

# Incorrect: Assuming the directory exists
page.screenshot(path='/nonexistent_directory/screenshot.png')

# Correct: Ensure the directory exists before saving
import os
if not os.path.exists('screenshots'):
os.makedirs('screenshots')
page.screenshot(path='screenshots/screenshot.png')

# Incorrect: Saving screenshot without specifying type, defaults to PNG
page.screenshot(path='screenshot')

# Correct: Specify the image format and quality if needed
page.screenshot(path='screenshot.jpeg', type='jpeg', quality=80)

# Incorrect: Not handling browser closure on error
browser = p.chromium.launch()
try:
page = browser.new_page()
page.goto(url)
page.screenshot(path='screenshot.png')
except Exception as e:
print(e)
# Browser might not close if an error occurs

# Correct: Ensure browser closes using finally
browser = p.chromium.launch()
try:
page = browser.new_page()
page.goto(url)
page.screenshot(path='screenshot.png')
finally:
browser.close()

# Incorrect: Taking screenshot without waiting for dynamic content
page.goto(url)
page.screenshot(path='screenshot.png')

# Correct: Wait for specific elements to ensure they are loaded
page.goto(url)
page.wait_for_selector('.dynamic-content')
page.screenshot(path='screenshot.png')