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.