How can I find this element by css this is what I have so far.

driver.findElement(By.cssSelector(".simplecolorpicker > span[title*=#ff8081]")).click();

Here is the image of the html: enter image description here

  • Can you provide the actual html?
    – saifur
    Mar 24, 2015 at 17:33
  • Hi, saifur the link has the html, i can't embed in the main question as I don't have privilege.
    – Elsid
    Mar 24, 2015 at 17:35
  • Are you using something like Firebug to identify elements? This makes life much much easier. There is no need to re-invent the wheel. Mar 25, 2015 at 14:43
  • Yes I am Kisnard, I just have a hard time understanding the syntax for all the different css classes and how to input them properly. I can go the easy way and just use xpath, i just don't want it to break in the future.
    – Elsid
    Mar 25, 2015 at 15:22
  • if you change the css it will break in the future also. I wouldn't stress too much about it - get it to work - keep it simple. Automation testing is to be used when you expect minimal changes. If you have lots of changes you are doing it too early. Mar 25, 2015 at 15:26

2 Answers 2


Just one issue I see with your CSS selector. When you select by attribute, you need to enclose the attribute value in quotes. Other than that, the * is also probably unnecessary as this should be an exact match:

driver.findElement(By.cssSelector(".simplecolorpicker > span[title='#ff8081']")).click();

CSS selectors are pretty awesome, there is no reason not to use them, but that does NOT mean you have to select everything by class name. Even with CSS selectors, if you have relatively large pages, the performance of finding the element in the DOM is much improved if you use an ID. I would ask your developers to add ID's to any static content, and if there is any dynamic content such as a list of items, then add an ID to the parent so you can locate that element by ID, then get the children.

  • Does CSS now support selecting by innerText? Otherwise seems like an obvious use case for not using a CSS selectors. Mar 25, 2015 at 17:50
  • It does not support selecting by innerText, but I try to avoid selecting by innerText as much as possible anyways, especially if I have a localized web site that I may want to test in multiple languages. Even without localization, innerText is much more likely to change than an ID on an element. Lastly, you can find a list of elements by CSS selector, and then iterate through them to match on text. Some frameworks such as Geb have built in support for this that is pretty simple.
    – Sam Woods
    Mar 25, 2015 at 18:02
  • The wisdom of selecting by innerText is independent of CSS selectors' support for it. The statement "there is no reason not to use them" is false by your own admission. Just trying to dispel that bit of misinformation. Mar 25, 2015 at 20:23

It is always a balance between over and under specifying it. Over specify and tests become too brittle, i.e. they easily break when the page is changed. Under specify and the selection is not unique enough to guarantee actually selecting the right element.

I would consider using:

.bgTypes .bgTypeOption *[role=button] # If button is unique
.bgTypes .bgTypeOption *[title="#ff8081"] # Multiple buttons, Title distinguishes

I also like the selection to be as readable as possible, in order to act as documentation (like tests) and the above read "for this application thing called bgTypes, for one bgType option, a button.

I would also try to add an id or data-attribute that helps in the source code if possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.