CSS attribute and pseudo-class selectors in Selenium Java - Framework Patterns

Framework Mode - CSS attribute and pseudo-class selectors

Folder Structure

src/
└── test/
    └── java/
        └── com/
            └── example/
                ├── pages/
                │   └── LoginPage.java
                ├── tests/
                │   └── LoginTest.java
                ├── utils/
                │   └── CssSelectorHelper.java
                └── config/
                    └── TestConfig.java

Test Framework Layers

• Driver Layer: Manages WebDriver setup and teardown for browsers.
• Page Objects: Classes representing web pages, using CSS attribute and pseudo-class selectors to locate elements.
• Tests: Test classes that use page objects to perform actions and assertions.
• Utilities: Helper classes for building complex CSS selectors and reusable methods.
• Configuration: Holds environment settings, browser options, and credentials.

Configuration Patterns

• Environment Properties: Use TestConfig.java to load environment variables (e.g., dev, staging, prod) from property files.
• Browser Settings: Configure browser type and options (headless, window size) in TestConfig.java.
• Credentials: Store securely in environment variables or encrypted files, accessed via config classes.
• Selector Management: Use constants or helper methods in page objects or utilities to keep CSS selectors maintainable.

Test Reporting and CI/CD Integration

• Use TestNG built-in reports for test execution results (pass/fail).
• Integrate with Allure or ExtentReports for detailed HTML reports showing which CSS selectors were used.
• Configure CI/CD pipelines (e.g., Jenkins, GitHub Actions) to run tests on code push and publish reports.
• Include screenshots on failure to help debug selector issues.

Best Practices

1. Use Specific CSS Attribute Selectors: Target elements precisely, e.g., input[type='email'] to avoid flaky tests.
2. Leverage Pseudo-classes: Use selectors like :nth-child() or :not() to handle dynamic elements.
3. Keep Selectors Maintainable: Define selectors as constants or methods in page objects for easy updates.
4. Prefer Explicit Waits: Wait for elements located by CSS selectors to be visible or clickable before interacting.
5. Validate Selectors Regularly: Use browser DevTools to test CSS selectors before adding to code.

Self Check

Where in this folder structure would you add a new CSS selector for a button that uses a pseudo-class :hover effect on the Login page?

Key Result

Organize Selenium Java tests using page objects with CSS attribute and pseudo-class selectors for precise element targeting.