findElement by cssSelector in Selenium Java - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ locator

intermediate

Identify the correct CSS selector to find a button with class 'submit-btn' inside a form with id 'loginForm'

Which CSS selector will correctly locate the submit button inside the form with id 'loginForm'?

A form#loginForm > button.submit-btn

B .submit-btn #loginForm

C #loginForm .submit-btn

D button#loginForm.submit-btn

💡 Hint

Remember that the selector should find an element with class inside the form with the given id.

The selector #loginForm .submit-btn finds any element with class submit-btn inside the element with id loginForm. Option C looks for an element with id inside a class, which is incorrect. Option C looks for a direct child button which may not always be correct if the button is nested deeper. Option C looks for a button with id 'loginForm' which is wrong.

❓ Predict Output

intermediate

What happens in this Selenium Java code snippet?

Given the following code, what will happen if no such element exists?

Selenium Java

WebElement element = driver.findElement(By.cssSelector("div.content > p.highlight"));
System.out.println(element.getText());

A Prints the text inside the first <p> with class 'highlight' inside a <div> with class 'content'

B Throws NoSuchElementException if no such element exists

C Prints the HTML of the <p> element

D Prints the tag name 'p'

💡 Hint

Consider what happens if the element is not found by findElement.

The findElement method throws NoSuchElementException if the element is not found. The code tries to print the text of the element, but if the element does not exist, it will not reach the print statement and instead throw an exception.

❓ assertion

advanced

Which assertion correctly verifies the presence of an element found by CSS selector?

You want to assert that an element with CSS selector '.nav-item.active' is displayed on the page. Which assertion is correct?

Selenium Java

WebElement element = driver.findElement(By.cssSelector(".nav-item.active"));

A assertFalse(element.isEnabled());

B assertEquals(element.getText(), "true");

C assertNotNull(driver.findElement(By.cssSelector(".nav-item.active")));

D assertTrue(element.isDisplayed());

💡 Hint

Check which method confirms the element is visible on the page.

element.isDisplayed() returns true if the element is visible. Using assertTrue with this method correctly asserts visibility. Option D wrongly compares text to "true". Option D only checks element is not null but does not confirm visibility. Option D asserts the element is disabled, which is unrelated.

🔧 Debug

advanced

Why does this CSS selector cause NoSuchElementException?

Given the HTML structure:

<ul id="menu">
  <li class="item">Home</li>
  <div>
    <li class="item active">About</li>
  </div>
</ul>

The code below throws NoSuchElementException. Why?

driver.findElement(By.cssSelector("ul#menu > li.active"));

A Because the selector should be "ul#menu li.active" without the > combinator

B Because the selector is correct but the element is not visible

C Because the id selector #menu is invalid

D Because the selector looks for a direct child <li> with class 'active', but the <li> has classes 'item active' and the space causes mismatch

💡 Hint

Check the relationship between

and
• elements and the meaning of > in CSS selectors.

The selector ul#menu > li.active looks for

elements with class 'active' that are direct children of

. In the HTML, the
• elements have classes 'item active', so the selector matches. However, if the
• is not a direct child (e.g., wrapped in another element), it won't match. If the
• is direct child, the selector is correct. But if the selector causes NoSuchElementException, likely the
• is not direct child or the selector is too strict. Using ul#menu li.active matches any descendant
• with class 'active'.

❓ framework

expert

How to implement a reusable method to find elements by CSS selector with timeout in Selenium Java?

You want to create a method that waits up to a given timeout for an element to be present using a CSS selector. Which implementation is correct?

A

public WebElement waitForElement(By selector, int timeoutSeconds) {
  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(timeoutSeconds));
  return wait.until(ExpectedConditions.presenceOfElementLocated(selector));
}

B

public WebElement waitForElement(String cssSelector, int timeoutSeconds) {
  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(timeoutSeconds));
  return wait.until(ExpectedConditions.elementToBeClickable(By.cssSelector(cssSelector)));
}

C

public WebElement waitForElement(String cssSelector, int timeoutSeconds) {
  WebDriverWait wait = new WebDriverWait(driver, timeoutSeconds);
  return wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(cssSelector)));
}

D

public WebElement waitForElement(By selector, int timeoutSeconds) {
  WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(timeoutSeconds));
  return wait.until(ExpectedConditions.visibilityOfElementLocated(selector));
}

💡 Hint

Check the correct constructor usage of WebDriverWait and the expected condition for presence.

Option A correctly uses Duration.ofSeconds(timeoutSeconds) for the timeout and waits for presence of element located by the given selector. Option A uses an outdated constructor without Duration, which is deprecated. Option A waits for element to be clickable, which is more restrictive than presence. Option A waits for visibility, which may fail if element is present but hidden.

Practice

1. What does driver.findElement(By.cssSelector(".btn-primary")) do in Selenium Java?

easy

A. Finds all elements with class 'btn-primary' on the page

B. Finds the first element with class 'btn-primary' on the page

C. Finds the element with id 'btn-primary'

D. Throws an error if any element has class 'btn-primary'

Solution

1. Step 1: Understand the method used

   findElement returns the first matching element found on the page.

2. Step 2: Analyze the CSS selector

   The selector .btn-primary matches elements with class btn-primary.

3. Final Answer:

   Finds the first element with class 'btn-primary' on the page -> Option B

4. Quick Check:

   findElement + .class = first matching element [OK]

Hint: findElement + .class finds first element with that class [OK]

Common Mistakes:

• Confusing findElement with findElements
• Using id selector syntax for class
• Thinking it finds all matching elements

2. Which of the following is the correct syntax to find an element with id 'login' using CSS selector in Selenium Java?

easy

A. driver.findElement(By.cssSelector(".login"));

B. driver.findElement(By.cssSelector("*login"));

C. driver.findElement(By.cssSelector("login"));

D. driver.findElement(By.cssSelector("#login"));

Solution

1. Step 1: Identify CSS selector for id

   In CSS, id selectors start with #, so #login selects element with id 'login'.

2. Step 2: Check syntax correctness

   The syntax driver.findElement(By.cssSelector("#login")); is correct for Selenium Java.

3. Final Answer:

   driver.findElement(By.cssSelector("#login")); -> Option D

4. Quick Check:

   Id selector uses # [OK]

Hint: Use # for id selectors in CSS [OK]

Common Mistakes:

• Using . instead of # for id
• Missing quotes around selector
• Using invalid selector syntax

3. What will be the result of this code snippet?

WebElement element = driver.findElement(By.cssSelector("div.content > p.highlight"));
String text = element.getText();
System.out.println(text);

Assuming the HTML is:

<div class="content">
  <p class="highlight">Hello</p>
  <p>World</p>
</div>

medium

A. HelloWorld

B. World

C. Hello

D. NoSuchElementException

Solution

1. Step 1: Understand the CSS selector used

   div.content > p.highlight selects a p element with class highlight that is a direct child of div with class content.

2. Step 2: Match selector to HTML

   The first p inside div.content has class highlight and text "Hello".

3. Final Answer:

   Hello -> Option C

4. Quick Check:

   Selector matches first p.highlight text [OK]

Hint: Use > for direct child in CSS selectors [OK]

Common Mistakes:

• Ignoring direct child combinator >
• Selecting wrong paragraph text
• Assuming all p tags are selected

4. Identify the error in this Selenium Java code:

WebElement button = driver.findElement(By.cssSelector("button#submit-btn.active"));
button.click();

Given the HTML:

<button id="submit-btn">Submit</button>

medium

A. CSS selector requires both id and class but element has no class 'active'

B. Syntax error in findElement method call

C. button.click() is invalid method

D. NoSuchElementException because id selector is wrong

Solution

1. Step 1: Analyze the CSS selector

   The selector button#submit-btn.active looks for a button with id submit-btn AND class active.

2. Step 2: Compare with HTML element

   The button has id submit-btn but no class active, so selector matches no element.

3. Final Answer:

   CSS selector requires both id and class but element has no class 'active' -> Option A

4. Quick Check:

   Selector requires all parts to match [OK]

Hint: All parts in CSS selector must match element attributes [OK]

Common Mistakes:

• Assuming partial match works in CSS selector
• Ignoring missing class in element
• Thinking click() method is invalid

5. You want to find the first input element inside a form with class 'search' that is enabled and visible. Which CSS selector is best to use with findElement in Selenium Java?

hard

A. form.search input:not([disabled])

B. form.search > input[disabled='false']

C. form.search input:enabled

D. form.search input[visible='true']

Solution

1. Step 1: Understand CSS selectors for enabled inputs

   CSS does not have a standard :enabled pseudo-class for all browsers; instead, :not([disabled]) selects inputs without the disabled attribute.

2. Step 2: Check options for correctness

   form.search input:enabled uses :enabled which is not widely supported in CSS selectors for Selenium.
   form.search > input[disabled='false'] uses attribute [disabled='false'] which is invalid because disabled is boolean attribute.
   form.search input:not([disabled]) uses :not([disabled]) which correctly selects enabled inputs.
   form.search input[visible='true'] uses [visible='true'] which is not a valid attribute for visibility.

3. Final Answer:

   form.search input:not([disabled]) -> Option A

4. Quick Check:

   Use :not([disabled]) to find enabled inputs [OK]

Hint: Use :not([disabled]) to select enabled inputs [OK]

Common Mistakes:

• Using unsupported :enabled pseudo-class
• Checking disabled='false' attribute incorrectly
• Using non-existent visible attribute