Choosing XPath vs CSS strategy in Selenium Java - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

When to prefer XPath over CSS selectors?

In Selenium Java tests, which situation best justifies choosing XPath over CSS selectors?

A When you want to select elements using simple tag names.

B When you want to select elements by ID attribute.

C When you need to select elements based on their text content.

D When you want to select elements by class name only.

💡 Hint

Think about which selector can handle text content filtering.

XPath supports selecting elements by their text content, which CSS selectors cannot do. CSS selectors are better for simple attribute or class selections.

❓ Predict Output

intermediate

Output of locating elements with XPath vs CSS

Given the HTML snippet below, what is the number of elements matched by each locator?

<ul>
  <li class="item">Apple</li>
  <li class="item">Banana</li>
  <li class="item">Cherry</li>
</ul>

Which option correctly states the number of elements found by these locators?

XPath: //li[contains(text(),'a')]
CSS: li.item

A XPath finds 2 elements; CSS finds 3 elements.

B XPath finds 3 elements; CSS finds 2 elements.

C XPath finds 1 element; CSS finds 3 elements.

D XPath finds 3 elements; CSS finds 3 elements.

💡 Hint

Check which list items contain the letter 'a' in their text.

The XPath locator selects <li> elements whose text contains 'a'. 'Banana' and 'Cherry' contain 'a', so 2 elements. The CSS selector selects all <li> elements with class 'item', which are all 3.

❓ assertion

advanced

Correct assertion for element text using XPath

Which assertion correctly verifies that the element located by XPath //button[@id='submit'] has the exact text 'Submit' in Selenium Java?

Selenium Java

WebElement button = driver.findElement(By.xpath("//button[@id='submit']"));

A assertNull(button.getText());

B assertTrue(button.getText().contains("Submit"));

C assertFalse(button.getText().equals("Submit"));

D assertEquals("Submit", button.getText());

💡 Hint

Exact text match requires equality assertion.

assertEquals checks that the button's text exactly matches 'Submit'. Using contains or assertFalse would not verify exact match. assertNull is incorrect because the text is expected.

🔧 Debug

advanced

Why does this CSS selector fail to locate the element?

Given the HTML below, why does the CSS selector div#main > span.highlighted fail to find the <span> element?

<div id="main">
  <div>
    <span class="highlighted">Text</span>
  </div>
</div>

A Because the &lt;span&gt; is not a direct child of &lt;div id="main"&gt; but a grandchild.

B Because the &lt;span&gt; does not have the class 'highlighted'.

C Because the CSS selector syntax is invalid.

D Because the &lt;div&gt; with id 'main' does not exist.

💡 Hint

Check the relationship between elements in the selector.

The '>' combinator in CSS means direct child. The <span> is inside a nested <div>, so it is a grandchild, not a direct child, causing the selector to fail.

❓ framework

expert

Choosing locator strategy for dynamic elements in Selenium Java

You have a web page where element IDs change every time the page loads, but the element has a stable class and contains specific text. Which locator strategy is best to reliably find this element?

A Use CSS selector with ID attribute.

B Use XPath with contains() to match the stable class and text content.

C Use XPath with exact ID match.

D Use CSS selector with tag name only.

💡 Hint

Think about how to handle dynamic IDs and stable attributes.

XPath allows combining conditions like contains() on class and text(), which helps locate elements with dynamic IDs but stable other attributes. CSS selectors cannot filter by text content.

Practice

1. Which locator strategy is generally faster and simpler for selecting elements in Selenium Java?

easy

A. Name Locator

B. XPath

C. CSS Selector

D. ID Locator

Solution

1. Step 1: Understand locator speed

   ID locators are the fastest and simplest because they directly map to unique element IDs in the DOM.

2. Step 2: Compare with CSS Selector

   CSS selectors are fast and flexible but generally slightly slower than ID locators.

3. Final Answer:

   ID Locator -> Option D

4. Quick Check:

   ID Locator = Fastest and simplest [OK]

Hint: Use ID locator for fastest and simplest element selection [OK]

Common Mistakes:

• Thinking XPath is always faster
• Confusing CSS with ID locator
• Assuming XPath is simpler syntax

2. Which of the following is a correct CSS selector syntax to select all <div> elements with class active?

easy

A. div.active

B. //div[@class='active']

C. div#active

D. div[class='active']

Solution

1. Step 1: Identify CSS selector for class

   In CSS, a dot (.) before a class name selects elements with that class, so div.active selects divs with class active.

2. Step 2: Check other options

   //div[@class='active'] is XPath syntax, not CSS. div#active selects div with id 'active', not class. div[class='active'] is a CSS attribute selector but less common than the dot notation for class.

3. Final Answer:

   div.active -> Option A

4. Quick Check:

   CSS class selector = div.active [OK]

Hint: Use dot (.) for class in CSS selectors [OK]

Common Mistakes:

• Using XPath syntax as CSS
• Confusing id (#) with class (.)
• Using attribute selector incorrectly

3. Given the HTML snippet:

<ul>
  <li class='item'>One</li>
  <li class='item'>Two</li>
  <li class='item'>Three</li>
</ul>

What will the following Selenium Java code return?

List<WebElement> elements = driver.findElements(By.cssSelector("ul > li.item"));
System.out.println(elements.size());

medium

A. Throws exception

B. 1

C. 3

D. 0

Solution

1. Step 1: Analyze CSS selector

   The selector ul > li.item selects all li elements with class 'item' that are direct children of ul.

2. Step 2: Count matching elements

   There are 3 li elements with class 'item' directly under ul, so the list size is 3.

3. Final Answer:

   3 -> Option C

4. Quick Check:

   3 matching elements = 3 [OK]

Hint: Count elements matching CSS selector directly under parent [OK]

Common Mistakes:

• Confusing descendant (space) with child (>) selector
• Assuming only one element matches
• Expecting exception on valid selector

4. You wrote this XPath locator in Selenium Java:

By.xpath("//div[@id='main']//a[text()='Click Here']")

But your test fails to find the element. What is a likely reason?

medium

A. The XPath syntax is invalid and causes an error

B. The element text has extra spaces or different casing

C. CSS selector should be used instead of XPath here

D. The locator should use single slash '/' instead of double '//'

Solution

1. Step 1: Check XPath syntax

   The XPath syntax is correct and valid for selecting an a element with exact text 'Click Here' inside a div with id 'main'.

2. Step 2: Consider text matching issues

   XPath text() matches exact text. If the actual element text has extra spaces or different letter case, it won't match.

3. Final Answer:

   The element text has extra spaces or different casing -> Option B

4. Quick Check:

   Exact text match fails if text differs [OK]

Hint: Check exact text match in XPath for spaces or case [OK]

Common Mistakes:

• Assuming XPath syntax error without checking text
• Switching to CSS without reason
• Changing slashes incorrectly

5. You need to select the third <li> element inside a <ul> with dynamic classes and no IDs. Which locator strategy is best and why?

hard

A. CSS selector using :nth-child(3) pseudo-class for simplicity and speed

B. XPath using position() function for precise element location

C. ID locator because it is always fastest

D. Name locator because it works for list items

Solution

1. Step 1: Analyze element attributes

   The li elements have dynamic classes and no IDs, so ID locator is not possible.

2. Step 2: Compare XPath and CSS for position

   XPath position() can select the third li, but CSS :nth-child(3) is simpler and faster for this case.

3. Final Answer:

   CSS selector using :nth-child(3) pseudo-class for simplicity and speed -> Option A

4. Quick Check:

   Use CSS :nth-child for simple positional selection [OK]

Hint: Use CSS :nth-child for fast, simple positional element selection [OK]

Common Mistakes:

• Choosing XPath unnecessarily for simple position
• Assuming ID locator always exists
• Using Name locator for non-form elements