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

Practice

1. Which CSS selector will select all elements with the class button?

easy

A. .button

B. #button

C. button

D. *button

Solution

1. Step 1: Understand class selector syntax

   In CSS, a class selector uses a dot . followed by the class name to select elements with that class.

2. Step 2: Match the selector to the class button

   The selector .button selects all elements with class button.

3. Final Answer:

   .button -> Option A

4. Quick Check:

   Class selector = .classname [OK]

Hint: Class selectors start with a dot (.) [OK]

Common Mistakes:

• Using # for class instead of .
• Using tag name without dot
• Using * which is universal selector

2. Which CSS selector correctly selects an element with the ID main-header?

easy

A. *#main-header

B. .main-header

C. main-header

D. #main-header

Solution

1. Step 1: Understand ID selector syntax

   ID selectors use a hash # followed by the ID name to select a unique element.

2. Step 2: Match selector to ID main-header

   The selector #main-header selects the element with ID main-header.

3. Final Answer:

   #main-header -> Option D

4. Quick Check:

   ID selector = #idname [OK]

Hint: ID selectors start with a hash (#) [OK]

Common Mistakes:

• Using dot (.) for ID instead of hash (#)
• Using tag name without prefix
• Adding * before ID selector unnecessarily

3. Given this HTML snippet:

<div class='container'>
  <button id='submit' class='btn primary'>Send</button>
</div>

Which CSS selector will select the button element inside the div with class container?

medium

A. container > button.primary

B. div.container button

C. #submit.container

D. button#submit .container

Solution

1. Step 1: Understand descendant selector

   div.container button selects any button inside a div with class container.

2. Step 2: Check other options for correctness

   container > button.primary incorrectly targets a <container> tag (missing dot for class selector). #submit.container is invalid because ID and class cannot be combined like that without space. button#submit .container looks for .container inside button#submit, which is wrong.

3. Final Answer:

   div.container button -> Option B

4. Quick Check:

   Descendant selector = parent child [OK]

Hint: Space means descendant, > means direct child [OK]

Common Mistakes:

• Confusing descendant and child selectors
• Combining ID and class without space
• Wrong order of selectors

4. You want to select all input elements with attribute type='text'. Which CSS selector is correct?

medium

A. All of the above

B. input[type='text']

C. input[type="text"]

D. input[type=text]

Solution

1. Step 1: Understand attribute selector syntax

   CSS attribute selectors can use quotes or no quotes around the value. Both input[type=text] and input[type='text'] are valid.

2. Step 2: Confirm all options are valid

   Using double quotes input[type="text"] is also valid. So all three selectors correctly select input elements with type='text'.

3. Final Answer:

   All of the above -> Option A

4. Quick Check:

   Attribute selectors allow quotes or no quotes [OK]

Hint: Quotes optional in attribute selectors [OK]

Common Mistakes:

• Using incorrect attribute syntax
• Forgetting quotes when value has spaces
• Using wrong attribute name

5. You want to select all li elements that are the first child of their parent ul. Which CSS selector should you use?

hard

A. ul li:first-child

B. ul li:first-of-type

C. ul > li:first-child

D. li:first-child

Solution

1. Step 1: Understand child combinator and pseudo-class

   ul > li:first-child selects li elements that are the first child directly under ul.

2. Step 2: Compare other options

   ul li:first-child selects any li that is first child of its parent inside any ul descendant (could be nested). li:first-child selects any li that is first child anywhere. ul li:first-of-type selects first li of its type inside ul, but not necessarily first child.

3. Final Answer:

   ul > li:first-child -> Option C

4. Quick Check:

   Direct child + first-child pseudo-class = ul > li:first-child [OK]

Hint: Use > for direct child, :first-child for first element [OK]

Common Mistakes:

• Confusing :first-child and :first-of-type
• Missing direct child combinator >
• Selecting nested elements unintentionally