Selenium Screenshots of Multiple Logged-In Pages
To capture screenshots of multiple logged-in pages with Selenium in Python, you need to automate the login process once, then navigate to each page and call the screenshot method on the WebDriver. The core steps are: start a browser session, perform login, iterate through your list of URLs, and save a screenshot for each using driver.save_screenshot() or element.screenshot().
Background: Why Screenshots of Authenticated Pages Are Tricky
Web pages that require authentication present a unique challenge for automated screenshots. If you simply open a URL with Selenium, you’ll get the login page or a redirect, not the content you want. The session cookie that proves you’re logged in is only present after a successful login. This means your script must handle authentication before it can capture anything useful. Common use cases include visual regression testing, documenting user interfaces, archiving dashboards, or creating tutorial materials for internal tools.
How It Works: The Login and Screenshot Flow
The standard approach involves three phases. First, you initialize the WebDriver (e.g., Chrome, Firefox) and navigate to the login page. Second, you locate the username and password fields, fill them in, and submit the form. Third, after the login succeeds, you loop through your target URLs and take screenshots. Here’s a minimal example using ChromeDriver:
from selenium import webdriver
from selenium.webdriver.common.by import By
import time
driver = webdriver.Chrome()
try:
# Login
driver.get('https://example.com/login')
driver.find_element(By.ID, 'username').send_keys('your_username')
driver.find_element(By.ID, 'password').send_keys('your_password')
driver.find_element(By.ID, 'login_button').click()
time.sleep(3) # wait for redirect
# Screenshots
urls = [
'https://example.com/dashboard',
'https://example.com/reports',
'https://example.com/settings'
]
for i, url in enumerate(urls):
driver.get(url)
time.sleep(2) # let the page load
driver.save_screenshot(f'screenshot_{i+1}.png')
finally:
driver.quit()This saves three PNG files in the current directory. The time.sleep() calls are a simple way to wait, but a more robust method is to use WebDriverWait to wait for a specific element to appear on each page.
Choosing the Right Wait Strategy
Fixed sleeps are fragile; pages load at different speeds. Instead, use explicit waits. For example, after navigating to the dashboard, wait for a known element like driver.find_element(By.ID, 'welcome_message') to be visible. This ensures the screenshot captures the fully rendered page. Here’s how to implement it:
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
wait = WebDriverWait(driver, 10)
for i, url in enumerate(urls):
driver.get(url)
wait.until(EC.presence_of_element_located((By.TAG_NAME, 'body')))
# Optionally wait for a page-specific element
driver.save_screenshot(f'screenshot_{i+1}.png')If you know a unique element for each page, you can create a list of locators and wait for each one. This is more reliable than a generic body tag, which exists even on error pages.
Common Problems and How to Solve Them
- Login fails or session doesn’t persist: Some sites use two-factor authentication, CAPTCHAs, or JavaScript-heavy login flows. For testing, you can often bypass this by injecting a session cookie directly into the browser. Use
driver.add_cookie()after navigating to the domain, but you must obtain the cookie value from a previous manual login or an API. - Screenshots are blank or show a login page: The session may have expired, or the navigation to a new URL cleared the cookies. Ensure you don’t call
delete_all_cookies()accidentally. Also, check that the URL is correct and the site doesn’t redirect to a login page. - Element not found errors: The login form fields may have dynamic IDs. Use more robust locators like XPath or CSS selectors that match the structure, e.g.,
//input[@type='email']. - Headless mode issues: Running in headless mode (no browser window) is common for servers, but some sites behave differently. If screenshots appear blank, try running headed once to see if the page actually loads. Also, set a realistic window size with
driver.set_window_size(1920, 1080)to avoid mobile layouts.
Comparison: save_screenshot vs element.screenshot
Selenium offers two screenshot methods. driver.save_screenshot(filename) captures the entire viewport of the browser window. element.screenshot(filename) captures only a specific element, like a chart or a table. The latter is useful when you only need a section of the page, and it can avoid capturing irrelevant parts like navigation menus. For full-page screenshots, you might need to use a third-party library like Pillow to stitch multiple viewport captures together, as Selenium does not natively support full-page screenshots in all drivers.
Safety and Best Practices
When handling credentials, never hardcode them in your script. Use environment variables or a configuration file that is not committed to version control. Also, be mindful of the site’s terms of service; automated login may be prohibited. For testing your own applications, this is fine, but for third-party sites, check their policies. Additionally, screenshots may contain sensitive data; store them securely and avoid sharing them publicly.
Alternatives to Selenium for Screenshots
If you only need screenshots without complex interactions, consider tools like Playwright or Puppeteer. They offer similar functionality with built-in wait mechanisms and are often faster. For static pages, a simple HTTP request with a library like requests and a headless browser like html2image might suffice, but they cannot handle JavaScript-heavy pages. Selenium remains a solid choice because it supports multiple browsers and languages, and it’s widely used in existing test suites.
Frequently Asked Questions
How do I take a full-page screenshot with Selenium?
Selenium’s save_screenshot only captures the visible viewport. For a full-page screenshot, you can use the Chrome DevTools Protocol (CDP) to capture beyond the viewport. In Selenium 4, use driver.execute_cdp_cmd('Page.captureScreenshot', {'format': 'png', 'captureBeyondViewport': True}) and save the returned base64 data. Alternatively, use a library like Selenium-Screenshot that stitches multiple screenshots.
Can I take screenshots without logging in each time?
Yes, you can reuse a browser profile or session. Save the cookies after login and load them in a new session. For example, get cookies with driver.get_cookies(), store them in a file, then in a new session use driver.add_cookie() for each cookie after navigating to the domain. This avoids the login step on subsequent runs.
Why are my screenshots black or blank?
This often happens in headless mode due to missing GPU acceleration or incorrect window size. Try adding options like --headless=new (for Chrome) and --window-size=1920,1080. Also, check if the page uses WebGL or canvas; you may need to enable hardware acceleration in the browser options.
How do I handle multi-factor authentication in Selenium?
For automated testing, disable MFA for the test account if possible. If you must handle it, you can use a pre-generated token or a test OTP code. Alternatively, use a tool like Selenium’s add_cookie with a session cookie obtained from a manual login, which bypasses the MFA step.
What is the best file format for screenshots?
PNG is the default and best for screenshots because it is lossless and supports transparency. JPEG can be used for smaller file sizes, but it may introduce artifacts. For documentation, PNG is recommended.
Can I take screenshots of pages that require a VPN or specific network?
Yes, as long as your machine has access to the network where the page is reachable. Selenium uses the system’s network settings, so if you are connected to a VPN, the browser will use it. Just ensure the VPN is active before running the script.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.