CSS selector syntax in Selenium Python - Build an Automation Script

Verify login button is clickable using CSS selector

Preconditions (1)

Step 1: Locate the login button using CSS selector '#loginBtn'

Step 2: Click the login button

Step 3: Verify that the URL changes to 'https://example.com/dashboard'

✅ Expected Result: The login button is found and clicked successfully, and the browser navigates to the dashboard page

Automation Requirements - Selenium with Python

Assertions Needed:

Assert the login button is present using CSS selector

Assert the login button is clickable

Assert the URL after clicking is 'https://example.com/dashboard'

Best Practices:

Use explicit waits to wait for elements to be clickable

Use By.CSS_SELECTOR for locating elements

Avoid using overly complex or brittle CSS selectors

Keep selectors simple and maintainable

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()

try:
    # Open the login page
    driver.get('https://example.com/login')

    # Wait until the login button is clickable using CSS selector
    wait = WebDriverWait(driver, 10)
    login_button = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, '#loginBtn')))

    # Click the login button
    login_button.click()

    # Wait until URL changes to dashboard
    wait.until(EC.url_to_be('https://example.com/dashboard'))

    # Assert the current URL is dashboard
    assert driver.current_url == 'https://example.com/dashboard', f"Expected URL to be 'https://example.com/dashboard' but got {driver.current_url}"

finally:
    driver.quit()

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

First, it opens the login page URL.

Then, it waits explicitly for the login button to be clickable using the CSS selector #loginBtn. This ensures the element is ready for interaction.

Next, it clicks the login button.

After clicking, it waits until the URL changes to the expected dashboard URL.

Finally, it asserts that the current URL matches the expected dashboard URL to confirm navigation succeeded.

The try-finally block ensures the browser closes even if the test fails.

This approach follows best practices: using explicit waits, CSS selectors, and clear assertions.

Common Mistakes - 4 Pitfalls

{'mistake': "Using driver.find_element(By.ID, 'loginBtn') instead of By.CSS_SELECTOR", 'why_bad': 'The test is about CSS selector syntax, so using ID locator misses the point and does not practice CSS selectors.', 'correct_approach': 'Always use By.CSS_SELECTOR with the correct CSS selector string to locate elements.'}

Using time.sleep() instead of explicit waits

{'mistake': "Using overly complex CSS selectors like 'div > ul > li:nth-child(2) > a.login-btn'", 'why_bad': 'Complex selectors are brittle and break easily if page structure changes.', 'correct_approach': "Use simple, stable selectors like IDs or classes, e.g., '#loginBtn' or '.login-btn'."}

Not asserting the URL after clicking the button

Bonus Challenge

Now add data-driven testing with 3 different CSS selectors for the login button

Show Hint