Modifying element attributes with JS in Selenium Python - Framework Patterns

Framework Mode - Modifying element attributes with JS

Folder Structure

selenium-python-project/
├── src/
│   ├── pages/
│   │   └── example_page.py
│   ├── tests/
│   │   └── test_modify_attributes.py
│   ├── utils/
│   │   └── js_executor.py
│   └── config/
│       └── config.py
├── requirements.txt
└── pytest.ini
    

Test Framework Layers

• Driver Layer: Manages Selenium WebDriver setup and teardown (in test setup fixtures).
• Page Objects: Classes representing web pages, with methods to interact with elements, including methods that use JavaScript to modify attributes.
• Tests: Test cases that use page objects to perform actions and assertions.
• Utilities: Helper functions like a JavaScript executor utility to run JS code on elements.
• Configuration: Settings for browser type, URLs, and credentials.

Configuration Patterns

Use a config.py file to store environment variables such as base URL, browser choice, and credentials.

Example:

# config/config.py
BASE_URL = "https://example.com"
BROWSER = "chrome"
USERNAME = "user"
PASSWORD = "pass"
    

Use pytest command line options or environment variables to switch browsers or environments dynamically.

Test Reporting and CI/CD Integration

• Use pytest with plugins like pytest-html or allure-pytest for readable HTML reports.
• Integrate tests into CI/CD pipelines (GitHub Actions, Jenkins) to run tests on code push.
• Reports show pass/fail status and screenshots on failure.

Best Practices

• Use Page Object Model: Keep JS attribute modification inside page object methods for reuse and clarity.
• Explicit Waits: Wait for elements to be present before modifying attributes to avoid errors.
• JavaScript Execution Utility: Centralize JS execution in a utility function to handle errors and logging.
• Keep Tests Clean: Tests should call page object methods, not raw JS code.
• Use Config for Flexibility: Control browser and environment settings without changing code.

Self Check

Where in this folder structure would you add a new method to change the disabled attribute of a button using JavaScript?

Key Result

Use Page Object Model with a JavaScript utility to modify element attributes cleanly and maintainably.