CSS attribute and pseudo-class selectors in Selenium Java - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ locator

intermediate

Locate elements with attribute containing a specific substring

Which CSS selector correctly locates all <input> elements whose name attribute contains the substring user?

A input[name$='user']

B input[name^='user']

C input[name*='user']

D input[name~='user']

💡 Hint

The * operator in attribute selectors means 'contains'.

The selector input[name*='user'] matches all <input> elements whose name attribute contains the substring 'user' anywhere.

Other options mean:

• ^= starts with
• $= ends with
• ~= contains a whole word separated by spaces

❓ assertion

intermediate

Verify element is the first child using CSS pseudo-class

In Selenium Java, which assertion correctly verifies that a located element is the first child of its parent using CSS pseudo-class selectors?

Selenium Java

WebElement element = driver.findElement(By.cssSelector("li:first-child"));
// Which assertion below is correct?

A assertEquals("Home", element.getText());

B assertNull(element);

C assertTrue(element.getText().equals("Home"));

D assertFalse(element.isDisplayed());

💡 Hint

Use assertEquals to compare expected and actual text.

The selector li:first-child selects the first <li> child element. To verify its text, use assertEquals comparing expected and actual text.

❓ Predict Output

advanced

Output of Selenium locator count with attribute selector

Given the following HTML snippet and Selenium Java code, what is the output of elements.size()?

Selenium Java

<ul>
  <li data-role="admin">Admin</li>
  <li data-role="user">User1</li>
  <li data-role="user">User2</li>
  <li>Guest</li>
</ul>

List<WebElement> elements = driver.findElements(By.cssSelector("li[data-role='user']"));
System.out.println(elements.size());

A 0

B 3

C 1

D 2

💡 Hint

Count only <li> elements with attribute data-role exactly 'user'.

The selector li[data-role='user'] matches <li> elements with attribute data-role exactly equal to 'user'. There are two such elements.

🔧 Debug

advanced

Identify the error in CSS selector for Selenium

Which option contains an invalid CSS selector that will cause Selenium to throw an exception?

A button:contains('Submit')

B a[href$='.pdf']

C div[class^='container']

D input[type='checkbox']:checked

💡 Hint

CSS selectors do not support :contains pseudo-class.

The :contains() pseudo-class is not a valid CSS selector and is not supported by Selenium's CSS selector engine. It will cause an error.

Other selectors are valid CSS selectors.

❓ framework

expert

Best practice for waiting on element with attribute and pseudo-class

In Selenium Java, which code snippet correctly waits up to 10 seconds for a visible <button> element with attribute data-action='save' and that is the last child of its parent, using CSS selectors and explicit waits?

A

new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("button[data-action='save']:last-child")));

B

new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[data-action='save']:last-child")));

C

new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("button[data-action='save']:first-child")));

D

new WebDriverWait(driver, Duration.ofSeconds(10))
  .until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("button[data-action='save']:last-child")));

💡 Hint

Use elementToBeClickable to ensure visibility and interactability.

Option B waits for the button with attribute data-action='save' that is the last child and is clickable (visible and enabled). This is best for clicking.

Option B waits only for visibility, which may not guarantee clickability.

Option B waits only for presence in DOM, not visibility.

Option B uses :first-child which is incorrect for last child.

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