Can some one help me to find the CSS selector for highlighted item

Question

Could someone help me to identify the correct csslocator for the second span element in the below image:

I tried the below locators but was not able to succeed, is there anything wrong with the locator used ?

driver.FindElement(By.CssSelector("class[onclick='gotoReportView(20, 'ReportSectionc5404625cccfdb7d5563')']")).Click();

driver.FindElement(By.CssSelector("Span[onclick='gotoReportView(20, 'ReportSectionc5404625cccfdb7d5563')']")).Click();

Answer 1

I would like to suggest a different way to get to the element that I use a lot. It might be slower, because it does mutliple FindElement(s) calls, but it is so much more readable and understandable.

var container = driver.FindElement(By.ClassName("items-container"));
var spans = container.FindElements(By.TagName("span"))
spans[1].Click();

You find the div and then search for elements within the div and then take the second one to interact with.

Answer 2

Your css locator is wrong:

driver.FindElement(By.CssSelector("class[onclick='gotoReportView(20, 'ReportSectionc5404625cccfdb7d5563')']")).Click();

driver.FindElement(By.CssSelector("Span[onclick='gotoReportView(20, 'ReportSectionc5404625cccfdb7d5563')']")).Click();

The format for css locator is ,

1. tag[attribute='value']
2. tag.classname
3. tag#id
4. Tag>Tag (direct child)
5. tag tag (in direct child , equvalent to /tag//tag in xpath)
6. tag[attribute*='value'] ( Similar to contains in xpath, it search for partial match)
7. tag[attribute^='value'] ( find attribute that start with particular value)

So the correct css locator is:

driver.FindElement(By.CssSelector("span[onclick=\"gotoReportView(20, \'ReportSectionc5404625cccfdb7d5563\')\"]")).Click();

Or

 driver.FindElement(By.CssSelector("span[class='item'][onclick=\"gotoReportView(20, \'ReportSectionc5404625cccfdb7d5563\')\"]")).Click();

Note: you should escape the quotes (\') as there are quotes within the locator

And also use " quotes for the value Eg "[attribute=\"somthing(\'something\')\"]"

So just use the locator as it is in the DOM, and escape inner quotes using '\'