CSS Selector: Anchor text of href contains

Question

I am currently working with Selenium and have now reached the interesting, yet incredibly difficult, world of CSS selectors.

I'm currently looking at selecting the different options of the Google tool bar. E.g when you search for something, on the results page you get options to search for the same term but under images, news, videos etc

I'm particularly interested in selecting the "Images" link.

I've been working on it for quite a while and the closest i have got is the below selector:

div a.q.qs[href]

This drills down into the right sub classes but there are 16 of them. Despite hours of aimless searching, i'm unable to complete the query with a contains method around the anchor text, which is unique in the targeted sub classes.

I'm aware there is a By LinkText option in Selenium, but i'm not sure if the anchor text is unique across the entire page. Also, i really want to understand CSS selectors in general so even if it was, i want to resolve this particular issue so i can apply it to future problems.

I'm looking for something like the below pseudo CSS selector:

div a.q.qs[href].Anchorcontains("Images")

Can anyone help?

Answer 1

All links have a unique parameter called tbm: its value is isch for images, so I'd go with

a[href*="tbm=isch"]

Answer 2

There are sometimes ways to get what you want with CSS selectors but if you want to find an element by contained text, you will have to use either link text/partial link text if it's a link or XPath for everything else.

The XPath for what you want is

//div[@id='hdtb-msb-vis']//a[.='Images']

You could use //a[.='Images'] but that returns two elements, one of which is not visible.

To break this down

// at any level
div find a DIV
[@id='hdtb-msb-vis'] that contains an ID of 'hdtb-msb-vis'
//a that has a child A at any level
[.='Images'] that contains text (.) equal to 'Images'

If you want to explore by link text, you can write something like

int count = driver.findElements(By.linkText("Images")).size();

and print count. My guess is that it will be 2, one of which is not visible. You can use Selenium to further filter this down to only the visible link, if you wanted.

You are going to have the same issue with BackSlash's CSS selector answer. You can tweak it slightly and solve this problem with the CSS selector locator

#hdtb-msb-vis a[href*='tbm=isch']

Here are some links to CSS references that will help you get started: W3C reference, SauceLabs CSS Selectors tips, and Taming Advanced CSS Selectors.