Identifying the element from it's text using CSS selectors

[Sridhar Iyer]

Hi Guys,

Here is my page source.

<ul id="ClaimTabbedPanelsTabGroup_ul" class="TabbedPanelsTabGroup">

 

<li id="data_li" class="TabbedPanelsTab" tabindex="0" onclick="javascript:showLoader('0');tabSubmit('summary.do?hdn_button=Summary')">

Apple

</li> 

 

<li id="data_li" class="TabbedPanelsTab" tabindex="0" onclick="javascript:showLoader('1');tabSubmit('documentsimages.do?hdn_button=Documents')">

Mango

</li>      

 

<li id="data_li" class="TabbedPanelsTab" tabindex="0" onclick="javascript:showLoader('2');tabSubmit('documentsimages.do?hdn_button=Images')">

Peach

</li>        

  

<li id="data_li" class="TabbedPanelsTab" tabindex="0">

Orange

</li>

</ul>

I want to get the link webelements through their innertext which are Apple, Mango etc.

When I provided the expression - $$("li:contains('Apple')") in the Chrome console it resulted in  - SyntaxError: An invalid or illegal string was specified

Similarly I tried a few expressions with the 'contains' but none of them worked.

The only thing which works is $$("#data_li:nth-child(1)") but I don't want to do this just because my selenium scripts would break if the indices of these links are altered by the Dev. Any suggestions?

[Shawn McCarthy]

Try xpath ? 

This locator will look for the span that contains the text "Plan:".

By.xpath("//span[contains(text(),'Plan:')]");

[Arran]

If you really must use text-based searching, you are bound to XPath.

contains is not part of the CSS spec, and thus it won't work. It was part of the spec, and then dropped. Therefore, these days contains is merely coming from Sizzle (the CSS selector engine behind jQuery). This is further proven by the fact it doesn't work in the Chrome Console (but load Sizzle or jQuery into the console and it will work)

So either use XPath or think about injecting jQuery/Sizzle into the page (not a good idea).

[Sridhar Iyer]

Hi Shawn,

I wanted to identify these elements using CSS. Is there a limitation for using CSS in this case? Is XPath the only option?

By the way, there is no "Span" tag in my HTML but thanks for helping though.

[David Lai]

The weakness of CSS is it can't select something based on an element's children.  Text unfortunately is considered a child of the web element.

On Thursday, October 24, 2013 2:32:02 PM UTC-7, Sridhar Iyer wrote:

[David]

Another option if you want to stick with CSS is to use a locator that returns the set of elements (Apple, Peach, Mang, Orange), then iterate through and get only the one that matches "Mango" and "Apple".

Otherwise, you'll need XPath or Sizzle/jQuery injection as others mention.

On Thursday, October 24, 2013 2:32:02 PM UTC-7, Sridhar Iyer wrote: