CSS selector syntax in Selenium Java - Framework Patterns

Framework Mode - CSS selector syntax

Folder Structure for Selenium Java Framework

selenium-java-framework/
├── src/
│   ├── main/
│   │   └── java/
│   │       └── com/example/pages/       # Page Object classes
│   └── test/
│       └── java/
│           └── com/example/tests/       # Test classes
├── resources/
│   └── testdata/                        # Test data files (CSV, JSON)
├── drivers/                            # Browser driver executables
├── pom.xml                            # Maven build and dependency file
└── testng.xml                        # TestNG suite configuration
    

Test Framework Layers

• Driver Layer: Manages WebDriver setup and teardown for browsers.
• Page Objects: Classes representing web pages with CSS selectors locating elements.
• Tests: TestNG test classes using page objects and assertions.
• Utilities: Helper classes for waits, logging, and common actions.
• Configuration: Files and classes managing environment URLs, browser types, and credentials.

Configuration Patterns

Use testng.xml to define test suites and parameters like browser type.

Use pom.xml to manage dependencies and plugins.

Store environment URLs and credentials in src/test/resources/config.properties and load them in tests.

Example snippet to read browser parameter in TestNG:

@Parameters({"browser"})
@BeforeClass
public void setup(String browser) {
    if (browser.equalsIgnoreCase("chrome")) {
        // setup ChromeDriver
    } else if (browser.equalsIgnoreCase("firefox")) {
        // setup FirefoxDriver
    }
}
    

Test Reporting and CI/CD Integration

• Use TestNG default reports and extend with ExtentReports for detailed HTML reports.
• Integrate with CI tools like Jenkins to run tests on code commits.
• Configure Jenkins to run mvn test and archive reports.
• Use screenshots on test failures saved in target/screenshots/.

Best Practices for CSS Selector Usage in Selenium Java Framework

• Use unique IDs in CSS selectors when possible for fast and reliable element location (e.g., #submitBtn).
• Prefer simple selectors over complex chains to improve readability and maintainability.
• Use class selectors with caution; combine with element types to avoid ambiguity (e.g., button.primary).
• Avoid brittle selectors that depend on dynamic attributes or deep DOM hierarchy.
• Use CSS pseudo-classes like :nth-child() only when stable and necessary.

Self Check

Question: In this Selenium Java framework structure, where would you add a new CSS selector for a login button?

Answer: Add it in the appropriate Page Object class inside src/main/java/com/example/pages/.

Key Result

Organize Selenium Java tests with clear folder layers, use CSS selectors wisely in Page Objects, and configure tests via TestNG and Maven.