XPath axes (parent, child, sibling) in Selenium Python - Framework Patterns

Framework Mode - XPath axes (parent, child, sibling)

Folder Structure

selenium_python_project/
├── src/
│   ├── pages/
│   │   ├── __init__.py
│   │   ├── base_page.py
│   │   └── sample_page.py
│   ├── tests/
│   │   ├── __init__.py
│   │   └── test_sample_page.py
│   ├── utils/
│   │   ├── __init__.py
│   │   └── wait_utils.py
│   └── config/
│       ├── __init__.py
│       └── config.py
├── requirements.txt
└── pytest.ini
  

Test Framework Layers

• Driver Layer: Manages Selenium WebDriver setup and teardown (in utils or base_page.py).
• Page Objects: Classes representing web pages, using XPath axes (parent, child, sibling) in locators to find elements precisely.
• Tests: Test scripts using pytest that call page object methods to perform actions and assertions.
• Utilities: Helper functions like explicit waits to handle dynamic page elements.
• Configuration: Stores environment settings, browser options, and credentials.

Configuration Patterns

Use a config.py file to manage environment variables and browser settings.

# config/config.py
class Config:
    BASE_URL = "https://example.com"
    BROWSER = "chrome"
    IMPLICIT_WAIT = 10
    EXPLICIT_WAIT = 15

# You can extend this to load from environment variables or .env files for flexibility.
  

Test Reporting and CI/CD Integration

• Use pytest with pytest-html plugin to generate HTML reports.
• Integrate tests in CI/CD pipelines (GitHub Actions, Jenkins) to run on code push.
• Reports show pass/fail status, screenshots on failure, and logs.

# Example pytest command with HTML report
pytest --html=reports/report.html --self-contained-html
  

Framework Design Principles

1. Use XPath axes carefully: Use parent::, child::, and following-sibling:: axes to locate elements relative to known elements for stable locators.
2. Keep locators readable: Avoid overly complex XPath expressions; prefer clear and maintainable ones.
3. Page Object Model: Encapsulate XPath locators and actions inside page classes to separate test logic from UI details.
4. Explicit waits: Use waits to handle dynamic content before accessing elements found by XPath axes.
5. Config-driven tests: Manage environment and browser settings centrally for easy changes.

Self Check

Where in this folder structure would you add a new page object class for a login page that uses XPath axes to locate elements?

Key Result

Organize Selenium Python tests using Page Object Model with XPath axes locators, explicit waits, and config-driven settings.

Practice

1. Which XPath axis selects the direct parent of the current node?

easy

A. child::

B. parent::

C. following-sibling::

D. preceding-sibling::

Solution

1. Step 1: Understand XPath axes

   XPath axes describe relationships between nodes, such as parent, child, or siblings.

2. Step 2: Identify the axis for parent node

   The parent:: axis selects the direct parent of the current node.

3. Final Answer:

   parent:: -> Option B

4. Quick Check:

   Parent axis = parent:: [OK]

Hint: Parent axis always uses 'parent::' [OK]

Common Mistakes:

• Confusing parent:: with child::
• Using sibling axes to find parent
• Forgetting axes syntax with double colons

2. Which of the following is the correct XPath syntax to select all child <li> elements of a <ul> element?

easy

A. //ul/parent::li

B. //ul/preceding-sibling::li

C. //ul/following-sibling::li

D. //ul/child::li

Solution

1. Step 1: Understand child axis usage

   The child:: axis selects direct children of the current node.

2. Step 2: Apply correct syntax for child li elements

   Using //ul/child::li selects all li children of ul.

3. Final Answer:

   //ul/child::li -> Option D

4. Quick Check:

   Child axis syntax = child:: [OK]

Hint: Use 'child::' to select direct children nodes [OK]

Common Mistakes:

• Using parent:: instead of child::
• Using sibling axes for children
• Omitting the axis and expecting child selection

3. Given the following HTML snippet:

<div>
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

What does the XPath //h2/following-sibling::p[1] select?

medium

A. No element, XPath is invalid

B. The second p element inside the div

C. The first p element inside the div

D. The h2 element itself

Solution

1. Step 1: Understand following-sibling axis

   The following-sibling::p[1] selects the first p sibling after the h2 node.

2. Step 2: Apply to given HTML

   After h2, the first p is "Paragraph 1", so it selects that element.

3. Final Answer:

   The first <p> element inside the <div> -> Option C

4. Quick Check:

   following-sibling::p[1] = first p after h2 [OK]

Hint: following-sibling::p[1] picks first p after current node [OK]

Common Mistakes:

• Selecting the second p instead of the first
• Confusing preceding-sibling with following-sibling
• Thinking it selects children instead of siblings

4. You wrote this XPath to select the previous sibling of a div element:
//div/preceding-sibling::div[1]
But it returns no elements. What is the most likely reason?

medium

A. The div has no preceding sibling div elements

B. The syntax is incorrect; axes cannot be used with //

C. You should use parent::div instead

D. preceding-sibling axis selects children, not siblings

Solution

1. Step 1: Understand preceding-sibling axis

   The preceding-sibling::div[1] selects the immediate previous sibling div element.

2. Step 2: Reason why no elements returned

   If no elements are returned, it means the current div has no preceding sibling div.

3. Final Answer:

   The <div> has no preceding sibling <div> elements -> Option A

4. Quick Check:

   preceding-sibling returns nothing if no previous siblings [OK]

Hint: No preceding sibling means empty result, not syntax error [OK]

Common Mistakes:

• Thinking axes can't be used with //
• Confusing parent:: with preceding-sibling::
• Assuming preceding-sibling selects children

5. You want to select all span elements that are children of a div whose immediate parent is a section. Which XPath expression correctly uses axes to achieve this?

hard

A. //section/child::div/child::span

B. //div/parent::section/child::span

C. //section/parent::div/child::span

D. //span/parent::div/parent::section

Solution

1. Step 1: Understand the hierarchy

   The span elements are children of div, and that div is a child of section.

2. Step 2: Build XPath with axes

   //section/child::div/child::span selects span children of div children of section.

3. Step 3: Check other options

   //div/parent::section/child::span selects span children of section, which is incorrect. //section/parent::div/child::span and D misuse axes or order.

4. Final Answer:

   //section/child::div/child::span -> Option A

5. Quick Check:

   Use child axes from section to div to span [OK]

Hint: Chain child:: axes from parent to target child [OK]

Common Mistakes:

• Using parent:: in wrong direction
• Selecting wrong node levels
• Mixing sibling axes instead of child axes