Correct CSS selector for selenium

Question

Which css selector's correct for the following HTML code ?

<li class="active editing" data-index="0">
   <div class="view">
   <input class="edit"/>
</li> 

I'm trying to get the edit field but my selector doesn't work:

find(Condition.cssClass("active editing")).find(".input").setValue(...) 

Answer 1

If your edit class is unique on the page, then you can do .edit If you need to be a bit more specific, you could do more along the lines of .active.editing input.edit

The point is, theres no "right" answer here, there are often many different css selectors you can build that can point to the same element. You want to find the balance between being short, concise and unique.

An example using this with webdriver could be
driver.findElement(By.cssSelector(".edit"));

Answer 2

If you are using Chrome: open DevTools, find you element in the DOM explorer, right-click the element and select 'Copy CSS Path'. You can test this using Selenium IDE and setting the target to "css=path_from_chrome".

Answer 3

Julian brought up good points, i.e. make sure your element is unique and does not change. If it is not, then make sure you talk to your developer to add an attribute that is unique and unchanging.

You can do

driver.findElement(By.cssSelector("li input[class='edit']"));