CSS pseudo-classes for selection in Selenium Python - Framework Patterns

Framework Mode - CSS pseudo-classes for selection

Folder Structure

selenium-python-project/
├── src/
│   ├── pages/
│   │   ├── __init__.py
│   │   └── home_page.py          # Page objects using CSS pseudo-classes
│   ├── tests/
│   │   ├── __init__.py
│   │   └── test_home_page.py     # Test cases using page objects
│   ├── utils/
│   │   ├── __init__.py
│   │   └── wait_helpers.py       # Explicit wait utilities
│   └── config/
│       ├── __init__.py
│       └── settings.py           # Configurations for environment, browser
├── requirements.txt
├── pytest.ini                    # Pytest configuration
└── README.md
    

Test Framework Layers

• Config Layer: Holds environment variables, browser options, and credentials in config/settings.py.
• Page Object Layer: Classes in src/pages/ represent web pages. They use CSS selectors with pseudo-classes like :nth-child(), :first-child, :last-child to locate elements precisely.
• Utility Layer: Helper functions for waits and common Selenium actions in src/utils/wait_helpers.py.
• Test Layer: Test scripts in src/tests/ use page objects to perform actions and assertions.

Configuration Patterns

Use config/settings.py to store:

• Base URLs for different environments (dev, staging, prod).
• Browser choice (Chrome, Firefox) with options.
• Timeout values for waits.
• Credentials securely (use environment variables or secrets manager in real projects).

Example snippet from settings.py:

import os

BASE_URL = "https://example.com"
BROWSER = "chrome"
IMPLICIT_WAIT = 10
EXPLICIT_WAIT = 15
# Credentials loaded from environment variables for safety
USERNAME = os.getenv('APP_USERNAME')
PASSWORD = os.getenv('APP_PASSWORD')

Test Reporting and CI/CD Integration

• Use pytest with plugins like pytest-html to generate readable HTML reports.
• Configure CI pipelines (GitHub Actions, Jenkins) to run tests on code push.
• Fail fast on critical test failures to save time.
• Store reports as artifacts in CI for review.
• Use screenshots on failure to help debugging.

Best Practices for CSS Pseudo-Classes in Selenium Python Framework

1. Use CSS pseudo-classes to target elements precisely: For example, li:nth-child(2) selects the second list item, helping avoid brittle XPath expressions.
2. Combine pseudo-classes with classes or IDs: This improves selector stability, e.g., ul.menu > li:first-child.
3. Prefer explicit waits over implicit waits: Wait for elements to be visible or clickable before interacting.
4. Keep selectors readable and maintainable: Avoid overly complex selectors that are hard to understand.
5. Organize selectors in page objects: Centralize CSS selectors so updates are easy when UI changes.

Self Check

Where in this folder structure would you add a new page object for a login page that uses CSS pseudo-classes to select input fields?

Key Result

Organize Selenium Python tests with page objects using CSS pseudo-classes for precise element selection.

Practice

1. Which CSS pseudo-class would you use to select the first child element of a parent in Selenium?

easy

A. :last-child

B. :first-child

C. :nth-child(2)

D. :hover

Solution

1. Step 1: Understand the meaning of :first-child

   The :first-child pseudo-class selects the very first child element of its parent.

2. Step 2: Compare with other options

   :last-child selects the last child, :nth-child(2) selects the second child, and :hover is for mouse hover state, not position.

3. Final Answer:

   :first-child -> Option B

4. Quick Check:

   First child selector = :first-child [OK]

Hint: First child is always :first-child in CSS selectors [OK]

Common Mistakes:

• Confusing :first-child with :nth-child(1)
• Using :hover for position selection
• Mixing :last-child with :first-child

2. Which of the following is the correct syntax to select all even-numbered list items using CSS pseudo-classes in Selenium?

easy

A. li:nth-child(odd)

B. li:nth-child(2n+1)

C. li:nth-of-type(odd)

D. li:nth-child(even)

Solution

1. Step 1: Understand nth-child(even)

   The selector li:nth-child(even) selects all list items at even positions: 2, 4, 6, etc.

2. Step 2: Check other options

   li:nth-child(2n+1) and li:nth-child(odd) select odd positions, li:nth-of-type(odd) selects odd elements but by type, which may differ.

3. Final Answer:

   li:nth-child(even) -> Option D

4. Quick Check:

   Even items = nth-child(even) [OK]

Hint: Use nth-child(even) to select even positions easily [OK]

Common Mistakes:

• Using odd instead of even
• Confusing nth-child with nth-of-type
• Wrong formula like 2n+1 for even

3. Given the HTML:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
</ul>

What text will be selected by the CSS selector ul li:nth-child(3) in Selenium?

medium

A. Cherry

B. Banana

C. Date

D. Apple

Solution

1. Step 1: Understand nth-child(3) selector

   The selector ul li:nth-child(3) selects the third child li element inside the ul.

2. Step 2: Identify the third li element

   The third li element is <li>Cherry</li> as it is the third item in the list.

3. Final Answer:

   Cherry -> Option A

4. Quick Check:

   Third child text = Cherry [OK]

Hint: Count list items from 1 to find nth-child(n) [OK]

Common Mistakes:

• Counting from zero instead of one
• Selecting nth-of-type instead of nth-child
• Confusing order of list items

4. You wrote this Selenium locator: driver.find_element(By.CSS_SELECTOR, 'div:nth-child(0)'). Why does it fail and how to fix it?

medium

A. nth-child index starts at 1, so 0 is invalid; use 'div:nth-child(1)' instead

B. nth-child accepts zero, but div has no children; add children first

C. CSS selector syntax error; use 'div:first-child' instead

D. Selenium does not support nth-child; use XPath instead

Solution

1. Step 1: Check nth-child index rules

   nth-child indexes start at 1, so 0 is invalid and causes a syntax error.

2. Step 2: Correct the selector

   Replace 'div:nth-child(0)' with 'div:nth-child(1)' to select the first child div correctly.

3. Final Answer:

   nth-child index starts at 1, so 0 is invalid; use 'div:nth-child(1)' instead -> Option A

4. Quick Check:

   nth-child index ≥ 1 [OK]

Hint: nth-child numbering starts at 1, never zero [OK]

Common Mistakes:

• Using zero as nth-child index
• Assuming nth-child works like array index
• Thinking Selenium lacks nth-child support

5. You want to select all buttons except the first one inside a form using Selenium CSS selectors. Which selector correctly achieves this?

hard

A. form button:not(:first-child)

B. form button:nth-child(n+2)

C. form button:nth-of-type(n+2)

D. form button:not(:nth-child(1))

Solution

1. Step 1: Understand the difference between nth-child and nth-of-type

   nth-child counts all types of children, nth-of-type counts only elements of the specified type (button).

2. Step 2: Select buttons except the first one

   Using 'form button:nth-of-type(n+2)' selects all button elements starting from the second button, ignoring other element types.

3. Step 3: Why other options fail

   :not(:first-child) excludes elements that are the first child of their parent, but if the first child is not a button, it won't exclude the first button. Similarly, :nth-child(n+2) counts all children, not just buttons, so it may skip buttons if other elements are present.

4. Final Answer:

   form button:nth-of-type(n+2) -> Option C

5. Quick Check:

   Use nth-of-type for type-specific position [OK]

Hint: Use nth-of-type(n+2) to skip first element of that type [OK]

Common Mistakes:

• Using nth-child instead of nth-of-type
• Using :not(:first-child) which may exclude wrong elements
• Assuming first-child always matches first button