CSS pseudo-classes for selection in Selenium Python - Build an Automation Script

Verify selection of elements using CSS pseudo-classes

Preconditions (2)

Step 1: Open the test page URL

Step 2: Locate the first item in the list using :first-child pseudo-class

Step 3: Locate the last item in the list using :last-child pseudo-class

Step 4: Locate the third item in the list using :nth-child(3) pseudo-class

Step 5: Locate all even items in the list using :nth-child(even) pseudo-class

Step 6: Locate all odd items in the list using :nth-child(odd) pseudo-class

Step 7: Verify the text content of each located element matches expected values

✅ Expected Result: All elements are correctly located using CSS pseudo-classes and their text content matches the expected values

Automation Requirements - Selenium with Python

Assertions Needed:

Assert that the text of the first child element is 'Item 1'

Assert that the text of the last child element is 'Item 5'

Assert that the text of the third child element is 'Item 3'

Assert that the texts of even child elements are ['Item 2', 'Item 4']

Assert that the texts of odd child elements are ['Item 1', 'Item 3', 'Item 5']

Best Practices:

Use explicit waits to ensure elements are present before interaction

Use By.CSS_SELECTOR for locating elements with pseudo-classes

Keep selectors simple and maintainable

Use clear and descriptive assertion messages

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Setup WebDriver (assuming chromedriver is in PATH)
driver = webdriver.Chrome()
wait = WebDriverWait(driver, 10)

try:
    # Open the test page
    driver.get('https://example.com/test-list')  # Replace with actual test page URL

    # Wait for the list container to be present
    wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'ul#item-list')))

    # Locate elements using CSS pseudo-classes
    first_item = driver.find_element(By.CSS_SELECTOR, 'ul#item-list li:first-child')
    last_item = driver.find_element(By.CSS_SELECTOR, 'ul#item-list li:last-child')
    third_item = driver.find_element(By.CSS_SELECTOR, 'ul#item-list li:nth-child(3)')
    even_items = driver.find_elements(By.CSS_SELECTOR, 'ul#item-list li:nth-child(even)')
    odd_items = driver.find_elements(By.CSS_SELECTOR, 'ul#item-list li:nth-child(odd)')

    # Assertions
    assert first_item.text == 'Item 1', f"Expected 'Item 1' but got '{first_item.text}'"
    assert last_item.text == 'Item 5', f"Expected 'Item 5' but got '{last_item.text}'"
    assert third_item.text == 'Item 3', f"Expected 'Item 3' but got '{third_item.text}'"

    even_texts = [item.text for item in even_items]
    assert even_texts == ['Item 2', 'Item 4'], f"Expected ['Item 2', 'Item 4'] but got {even_texts}"

    odd_texts = [item.text for item in odd_items]
    assert odd_texts == ['Item 1', 'Item 3', 'Item 5'], f"Expected ['Item 1', 'Item 3', 'Item 5'] but got {odd_texts}"

finally:
    driver.quit()

This script uses Selenium WebDriver with Python to automate the test case.

First, it opens the test page URL where the list is located.

It waits explicitly for the list container to be present to avoid timing issues.

Then, it uses CSS selectors with pseudo-classes like :first-child, :last-child, :nth-child(3), :nth-child(even), and :nth-child(odd) to locate specific list items.

Assertions check that the text content of these elements matches the expected values, with clear messages to help identify failures.

Finally, the browser is closed cleanly in a finally block to ensure resources are freed.

Common Mistakes - 4 Pitfalls

{'mistake': 'Using XPath instead of CSS selectors for pseudo-classes', 'why_bad': "XPath does not support CSS pseudo-classes like :first-child or :nth-child, so the selectors won't work as intended.", 'correct_approach': 'Use By.CSS_SELECTOR with the appropriate pseudo-class selectors for these cases.'}

Not using explicit waits before locating elements

Hardcoding indexes in XPath instead of using CSS pseudo-classes

Not verifying the text content of located elements

Bonus Challenge

Now add data-driven testing with 3 different lists having different item counts and verify pseudo-class selections accordingly

Show Hint

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