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