2

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 '15 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 '15 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. – KisnardOnline Mar 25 '15 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 '15 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. – KisnardOnline Mar 25 '15 at 15:26
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.

| improve this answer | |
  • Does CSS now support selecting by innerText? Otherwise seems like an obvious use case for not using a CSS selectors. – Lucas Schwarz Mar 25 '15 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 '15 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. – Lucas Schwarz Mar 25 '15 at 20:23
1

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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