CSS attribute and pseudo-class selectors in Selenium Java - Test Execution Trace

Test Overview

This test opens a webpage and uses CSS attribute and pseudo-class selectors to find elements. It verifies that the correct elements are found and interactable.

Test Code - Selenium

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.*;
import java.time.Duration;

public class CssSelectorTest {
    WebDriver driver;
    WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
    }

    @Test
    public void testCssAttributeAndPseudoClassSelectors() {
        driver.get("https://example.com/testpage");

        // Find input with attribute type='text'
        WebElement inputText = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("input[type='text']")));
        assertNotNull(inputText);

        // Find link with href containing 'contact'
        WebElement contactLink = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("a[href*='contact']")));
        assertTrue(contactLink.isDisplayed());

        // Find first list item using :first-child pseudo-class
        WebElement firstListItem = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("ul#menu li:first-child")));
        assertEquals("Home", firstListItem.getText());

        // Click the contact link
        contactLink.click();

        // Verify URL changed to contact page
        wait.until(ExpectedConditions.urlContains("contact"));
        assertTrue(driver.getCurrentUrl().contains("contact"));
    }

    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

Execution Trace - 8 Steps

Step	Action	System State	Assertion	Result
1	Test starts and Chrome browser opens	Chrome browser window is open and ready	—	PASS
2	Navigate to https://example.com/testpage	Browser displays the test page with inputs, links, and menu	—	PASS
3	Find input element with attribute type='text' using CSS selector input[type='text']	Input element is present in the DOM	Assert inputText is not null	PASS
4	Find link element with href containing 'contact' using CSS selector a[href*='contact']	Contact link is present and visible	Assert contactLink is displayed	PASS
5	Find first list item in menu using CSS selector ul#menu li:first-child	First list item is present with text 'Home'	Assert firstListItem text equals 'Home'	PASS
6	Click the contact link	Browser navigates to contact page	—	PASS
7	Wait until URL contains 'contact'	URL is updated to contact page URL	Assert current URL contains 'contact'	PASS
8	Test ends and browser closes	Browser window is closed	—	PASS

Failure Scenario

Failing Condition: The CSS selector does not find the element because the attribute or pseudo-class is incorrect or element is missing

Execution Trace Quiz - 3 Questions

Which CSS selector is used to find an input element with attribute type='text'?

A input:first-child

B input.text

C input[type='text']

D input#text

Key Result

Using CSS attribute selectors and pseudo-classes helps target elements precisely, making tests more reliable and easier to maintain.

Practice

1. Which CSS selector correctly selects all <input> elements with a type attribute equal to "text"?

easy

A. input[type^='text']

B. input[type*='text']

C. input[type$='text']

D. input[type='text']

Solution

1. Step 1: Understand attribute selectors

   The selector input[type='text'] matches input elements whose type attribute exactly equals text.

2. Step 2: Differentiate other selectors

   ^= means starts with, $= means ends with, and *= means contains. These do not require exact match.

3. Final Answer:

   input[type='text'] -> Option D

4. Quick Check:

   Exact attribute match = input[type='text'] [OK]

Hint: Use '=' for exact attribute match in CSS selectors [OK]

Common Mistakes:

• Confusing ^= (starts with) with = (exact match)
• Using $= or *= when exact match is needed
• Forgetting to quote attribute values

2. Which of the following is the correct CSS selector syntax to select all <a> elements with an href attribute containing the word "login"?

easy

A. a[href*='login']

B. a[href^='login']

C. a[href$='login']

D. a[href='login']

Solution

1. Step 1: Understand the *= attribute selector

   The selector a[href*='login'] matches a elements whose href attribute contains the substring login anywhere.

2. Step 2: Differentiate other selectors

   ^= matches start, $= matches end, and = matches exact. We want contains, so *= is correct.

3. Final Answer:

   a[href*='login'] -> Option A

4. Quick Check:

   Contains substring = *= [OK]

Hint: Use '*=' to select attributes containing a substring [OK]

Common Mistakes:

• Using ^= or $= instead of *= for substring match
• Forgetting quotes around attribute values
• Using = which requires exact match

3. Given the following HTML snippet:

<ul>
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
  <li class="active">Item 4</li>
</ul>

What will the CSS selector li.active:first-of-type select?

medium

A. All li elements with class active

B. The first li element with class active

C. No elements, because first-of-type ignores class

D. The first li element in the list regardless of class

Solution

1. Step 1: Understand :first-of-type pseudo-class

   :first-of-type selects the first sibling of its type (here, the first li) regardless of class.

2. Step 2: Combine with class selector

   The selector li.active:first-of-type looks for an li that is both .active and the first li. The first li has no class, so no match.

3. Final Answer:

   No elements, because first-of-type ignores class -> Option C

4. Quick Check:

   first-of-type ignores class, so no match [OK]

Hint: :first-of-type matches first element type ignoring classes [OK]

Common Mistakes:

• Assuming :first-of-type matches first element with class
• Confusing :first-child with :first-of-type
• Ignoring that class must match too

4. You want to select all <button> elements that are disabled using a CSS selector in Selenium. Which selector is incorrect and will cause your test to fail?

medium

A. button:enable

B. button[disabled]

C. button[disabled='disabled']

D. button:disabled

Solution

1. Step 1: Identify valid selectors for disabled buttons

   button:disabled and button[disabled] correctly select disabled buttons. button[disabled='disabled'] also works if attribute equals 'disabled'.

2. Step 2: Spot invalid pseudo-class

   :enable is not a valid CSS pseudo-class. The correct one is :enabled.

3. Final Answer:

   button:enable -> Option A

4. Quick Check:

   Invalid pseudo-class = :enable [OK]

Hint: Use :disabled or [disabled], not :enable [OK]

Common Mistakes:

• Using :enable instead of :enabled
• Assuming [disabled='true'] works (it must match exact value)
• Confusing attribute selector syntax

5. You have a list of <input> elements with various name attributes:

<input name="user_email">
<input name="user_password">
<input name="admin_email">
<input name="admin_password">

Which CSS selector will select only the input elements whose name attribute ends with "_email"?

hard

A. input[name*='_email']

B. input[name$='_email']

C. input[name^='_email']

D. input[name='_email']

Solution

1. Step 1: Understand $= attribute selector

   The selector input[name$='_email'] matches input elements whose name attribute ends exactly with _email.

2. Step 2: Differentiate other selectors

   *= matches contains anywhere, ^= matches starts with, and = matches exact. We want ends with, so $= is correct.

3. Final Answer:

   input[name$='_email'] -> Option B

4. Quick Check:

   Ends with substring = $= [OK]

Hint: Use $= to select attributes ending with a substring [OK]

Common Mistakes:

• Using *= or ^= instead of $= for ends with
• Forgetting quotes around attribute values
• Using = which requires exact match