Introduction
While capturing an entire webpage is useful in many situations, there are times when you only need an image of a specific web element, such as a login form, button, chart, logo, or error message.
Selenium provides the WebElement.screenshot() method, which captures only the selected element instead of the complete browser window.
In this tutorial, you’ll learn how to capture element screenshots using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.
What is an Element Screenshot?
An Element Screenshot captures only a particular web element rather than the entire webpage.
Example:
Entire Web Page
┌──────────────────────────┐
│ Header │
│ Navigation │
│ │
│ Login Form │
│ │
│ Footer │
└──────────────────────────┘
│
▼
Captured Screenshot
┌────────────────┐
│ Login Form │
└────────────────┘
Only the selected element is saved as an image.
Why Capture Element Screenshots?
Element screenshots help you:
Verify UI components.
Capture error messages.
Save login forms.
Validate logos and icons.
Improve test reports.
How Selenium Captures Element Screenshots
Selenium provides the screenshot() method on a WebElement.
Example:
element.screenshot(
"button.png"
)
The screenshot contains only that specific element.
Example
from pathlib import Path
from selenium import webdriver
from selenium.webdriver.common.by import By
# Topic: 36. Screenshots - Element Screenshot
# Practice site: https://the-internet.herokuapp.com/login
# Run: pytest -s 36_examples/test_02_element_screenshot.py
#
# WebElement.screenshot captures only a specific element instead of the full
# browser viewport.
def test_take_element_screenshot():
driver = webdriver.Chrome()
try:
driver.get("https://the-internet.herokuapp.com/login")
screenshot_dir = Path("screenshots")
screenshot_dir.mkdir(exist_ok=True)
screenshot_path = screenshot_dir / "login_form.png"
login_form = driver.find_element(By.ID, "login")
login_form.screenshot(str(screenshot_path))
assert screenshot_path.exists()
finally:
driver.quit()
Understanding the Code
Import Required Libraries
from pathlib import Path
from selenium import webdriver
from selenium.webdriver.common.by import By
These modules are used to:
Create folders and file paths.
Launch the browser.
Locate web elements.
Create a Chrome Browser Instance
driver = webdriver.Chrome()
Starts a new Chrome browser session.
Open the Practice Website
driver.get(
"https://the-internet.herokuapp.com/login"
)
Navigates to the login page.
Create the Screenshot Folder
screenshot_dir = Path("screenshots")
screenshot_dir.mkdir(
exist_ok=True
)
Creates a folder named screenshots if it does not already exist.
Create the Screenshot File Path
screenshot_path = (
screenshot_dir /
"login_form.png"
)
Defines where the element screenshot will be saved.
Locate the Login Form
login_form = driver.find_element(
By.ID,
"login"
)
Locates the login form using its ID.
Capture the Element Screenshot
login_form.screenshot(
str(screenshot_path)
)
Captures only the login form and saves it as login_form.png.
Unlike driver.save_screenshot(), this method does not include the rest of the webpage.
Verify the Screenshot
assert screenshot_path.exists()
Checks whether the screenshot file was successfully created.
If the file is missing, the test fails.
Close the Browser
driver.quit()
Closes the browser and ends the WebDriver session.
Practical Example
Suppose your application displays an error message after an invalid login.
The automation script:
Locates the error message.
Captures only the error element.
Saves it for debugging or reporting.
Automation Testing Example
Consider an e-commerce website.
The automation script:
Opens the product page.
Captures only the product image.
Verifies that the image is displayed correctly.
Real-World Example
Element screenshots are commonly used in:
Login forms
Error messages
Success notifications
Charts and graphs
Logos
Product images
Enterprise dashboards
Advantages of Element Screenshots
Captures only the required element.
Produces smaller image files.
Improves test reports.
Simplifies debugging.
Useful for visual validation.
Common Mistakes Beginners Make
Using Full Page Screenshots
If only one element needs verification, use WebElement.screenshot() instead of capturing the entire page.
Taking the Screenshot Before the Element Loads
Ensure the element is present and visible before capturing the screenshot.
Saving to a Non-Existent Folder
Always create the output folder before saving screenshots.
Forgetting to Verify the Screenshot
Always confirm that the screenshot file was created successfully.
Best Practices
Capture only the required elements.
Use meaningful screenshot file names.
Create a dedicated screenshots folder.
Take screenshots after the element becomes visible.
Attach element screenshots to automation reports when appropriate.
Conclusion
Element screenshots provide an efficient way to capture only the parts of a webpage that matter most. Using WebElement.screenshot(), Selenium can save images of individual elements such as forms, buttons, charts, and messages without capturing the entire browser window. This makes debugging, reporting, and UI validation much easier in modern automation projects.
Frequently Asked Questions (FAQs)
What is an Element Screenshot?
An element screenshot captures only a selected web element instead of the entire webpage.
Which Selenium method captures an element screenshot?
Use:
element.screenshot(
"image.png"
)
Can Selenium capture only a button or form?
Yes.
Any located WebElement can be captured using the screenshot() method.
Why use an element screenshot instead of a full-page screenshot?
Element screenshots are smaller, more focused, and ideal for verifying specific UI components.
Where are element screenshots commonly used?
They are commonly used for login forms, error messages, product images, charts, dashboards, logos, and other UI components.
Key Takeaways
Element screenshots capture only a selected web element.
Selenium provides the
WebElement.screenshot()method for this purpose.Create the destination folder before saving screenshots.
Verify that the screenshot file exists after capture.
Element screenshots are ideal for debugging, reporting, and UI validation.
Capturing individual UI components is an important Selenium automation skill.