Element screenshots in Selenium Java - Framework Patterns

Framework Mode - Element screenshots

Folder Structure

src/
└── test/
    └── java/
        └── com/
            └── example/
                ├── pages/
                │   ├── LoginPage.java
                │   ├── DashboardPage.java
                ├── tests/
                │   ├── LoginTests.java
                │   ├── DashboardTests.java
                ├── utils/
                │   └── ScreenshotUtil.java
                └── config/
                    └── TestConfig.java
    

Test Framework Layers

• Driver Layer: Manages WebDriver setup and teardown for browsers.
• Page Objects: Classes representing web pages with element locators and actions.
• Tests: Test classes containing test methods using page objects and assertions.
• Utilities: Helper classes like ScreenshotUtil to capture element screenshots.
• Configuration: Central place for environment settings, browser options, and credentials.

Configuration Patterns

Use a TestConfig class or properties file to manage:

• Browser type (Chrome, Firefox, etc.)
• Base URL for the application
• Timeouts for waits
• Screenshot folder path
• Credentials (use environment variables or encrypted storage for security)

Example snippet from TestConfig.java:

public class TestConfig {
    public static final String BASE_URL = "https://example.com";
    public static final String BROWSER = System.getProperty("browser", "chrome");
    public static final String SCREENSHOT_PATH = "./screenshots/";
    public static final int TIMEOUT_SECONDS = 10;
}
    

Test Reporting and CI/CD Integration

• Use TestNG or JUnit reports to capture test results.
• Integrate screenshot capture on test failure for debugging.
• Configure CI tools (Jenkins, GitHub Actions) to run tests and archive reports and screenshots.
• Example: Attach element screenshots to reports when assertions fail.

Best Practices for Element Screenshots Framework

1. Use Page Object Model: Keep element locators and actions in page classes for easy maintenance.
2. Centralize Screenshot Logic: Implement screenshot capture in a utility class to reuse code.
3. Capture Screenshots on Failure: Automatically take element screenshots when tests fail to help debugging.
4. Use Explicit Waits: Wait for elements to be visible before capturing screenshots to avoid blank images.
5. Organize Screenshots: Save screenshots with meaningful names and timestamps in a dedicated folder.

Self Check

Where in this folder structure would you add a new utility method to capture a screenshot of a specific web element?

Key Result

Use Page Object Model with a centralized utility to capture element screenshots on test failure for clear debugging.