Selenium CSS selector by id AND multiple classes

Question

Using selenium for the first time here, I was wondering why:

final WebElement justAnId = findElement(By.cssSelector("#someId"));
final WebElement whatIWant = justAnId.findElement(
    By.cssSelector(".aClass.andAnother input[type=text]")
);

works, but not:

final WebElement whatIWant = findElement(By.cssSelector(
    "div#someId.aClass.andAnother input[type=text]"
));

Although they seem equivalent to me I get:

org.openqa.selenium.NoSuchElementException: Unable to locate element:
{"method":"css selector","selector":"div#someId.aClass.andAnother input[type=text]"}

Is this intended behaviour or a bug in Selenium? I had a quick look in the bug tracker in Selenium but I didn't see anything about that. I wanted to ask here before raising an issue that doesn't need to be. Also as far as I understand it doesn't work in IE6 but who cares. I was using firefox for this run.

Esti · Accepted Answer · 2013-07-19 01:47:34Z

11

Actually the two are quite different selectors.

Here is your cssSelector:

div#someId.aClass.andAnother input[type=text]

But what you really wanted to write was:

div#someId .aClass.andAnother input[type=text]

notice the space between ID and class. you need that.

edited Jul 19, 2013 at 1:47

Esti

3,7178 gold badges40 silver badges60 bronze badges

answered Jul 19, 2013 at 1:28

mandu

1111 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BoltClock · Accepted Answer · 2013-01-29 17:45:38Z

8

findElement() finds an element in the current context, which means your first snippet of code is really finding an element that matches .aClass.andAnother input[type=text], which is contained within #someId. The element with that ID may or may not contain the two classes; WebDriver doesn't assume you're referring to the same element; it just finds the input as long as its ancestors are #someId and .aClass.andAnother.

This is completely different from div#someId.aClass.andAnother input[type=text], which finds any input[type=text] within div#someId.aClass.andAnother only (i.e. it's a div that contains both the ID and the classes).

answered Jan 29, 2013 at 17:45

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

2 Comments

JimEvans Over a year ago

+1 on this answer. As a sanity check, whenever you encounter an issue like this in WebDriver, open the browser's JavaScript console (Firebug for Firefox, the F12 Developer Tools for IE, and the WebKit Developer Tools for Chrome) and use document.querySelector() using the same selector that failed for you in your WebDriver code. If the selector doesn't return the expected element in the JavaScript console, you can be sure it'll never do so in WebDriver.

Renaud Over a year ago

Thanks for the answer and comments, I didn't know I could use the selectors from the dev tools, +1. Ren.

Collectives™ on Stack Overflow

Selenium CSS selector by id AND multiple classes

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related