Element-level screenshot in Selenium Python - Framework Patterns

Framework Mode - Element-level screenshot

Folder Structure

selenium-python-project/
├── tests/
│   ├── test_login.py
│   ├── test_dashboard.py
│   └── test_element_screenshot.py  <-- Element screenshot tests here
├── pages/
│   ├── base_page.py
│   ├── login_page.py
│   └── dashboard_page.py
├── utils/
│   ├── screenshot_helper.py  <-- Helper for element-level screenshots
│   └── driver_factory.py
├── config/
│   ├── config.yaml
│   └── credentials.yaml
├── reports/
│   └── latest_report.html
├── conftest.py
└── requirements.txt
    

Test Framework Layers

• Driver Layer: Manages browser setup and teardown (e.g., driver_factory.py).
• Page Objects: Encapsulate page elements and actions (e.g., base_page.py with screenshot method).
• Tests: Test cases that use page objects and utilities (e.g., test_element_screenshot.py).
• Utilities: Helper functions like element-level screenshot capture (screenshot_helper.py).
• Configuration: Environment settings, credentials, and browser options (config.yaml).
• Reporting: Collect and store test results and screenshots (reports/ folder).

Configuration Patterns

Use YAML files to store environment URLs, browser types, and credentials. Example config.yaml:

environment:
  url: "https://example.com"
browser: "chrome"
screenshot_path: "./reports/screenshots/"
    

Load config in conftest.py to provide fixtures for tests.

Use command line options to select browser or environment dynamically.

Test Reporting and CI/CD Integration

• Use pytest-html plugin to generate HTML reports with embedded screenshots.
• Save element-level screenshots in a dedicated folder with timestamped filenames.
• Integrate with CI/CD pipelines (e.g., GitHub Actions, Jenkins) to run tests on push and upload reports as artifacts.
• Attach screenshots to failed test reports for easier debugging.

Best Practices

• Encapsulate Screenshot Logic: Put element screenshot code in page objects or helpers to reuse easily.
• Use Explicit Waits: Wait for element visibility before taking screenshots to avoid errors.
• Organize Screenshots: Store screenshots with meaningful names and timestamps for traceability.
• Keep Tests Clean: Tests should call screenshot methods, not handle driver details directly.
• Integrate with Reports: Automatically attach screenshots on failures to speed up debugging.

Self Check

Where in this folder structure would you add a new method to capture an element-level screenshot for a login button?

Key Result

Organize element-level screenshot logic in page objects and utilities, integrate with reporting, and configure environments cleanly.