Help finding child class with cssSelector syntax

Question

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:

Answer 1

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.

Answer 2

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.