We Keep Coding

CSS Selector: Anchor text of href contains

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?

All links have a unique parameter called tbm: its value is isch for images, so I'd go with
a[href*="tbm=isch"]

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.

Selenium Web driver clicking images

How do I select in image on and click on it using Selenium web driver? Say if it says this
<style type="text/css"> <ul id="nav"> <li> <li> <li> <li> <li> My Dashboard </li> </ul>
Would I use
driver.findElement(By.linkText("My Dashboard")).click();
or something else?

If you want to click on link in your example, you can use the selector you wrote, different kinds of css selectors (for example, By.cssSelector("#nav a") (looks for a link inside the "nav" list) or By.cssSelector("a[href='dashboard.action']") (looks for a link with specific href)) or using xPath selectors.

The important thing is to have a unique identifier to locate your element and an identifier that will fire 100% of the time.
For example, if you expect the link text to change on you, then don't look for that particular link text, because you have no guarantee that it will work 100% of the time.
Similarly, if there are 30 different elements that have the same id tag, don't use that either.
If things turn out to be very complex... that is, if you are in a large page with a lot of unknown variables, find by XPATH.
In the end, it really depends on the complexity of the website you are entering, and the goal of what you need done.
For more information, go to the Selenium javadocs and click BY on the sidebar for a list of different methods and how to use them.

If you need to click a link with an image, it would be better to locate the element with the explicit wait.
Example :
new WebDriverWait(driver, timeout).until(ExpectedConditions.presenceOfElementLocated(locator));

How to build a Vaadin demo sampler type of page

I have a simple question, I am trying to build something similar to whats in this URL
Visit: http://demo.vaadin.com/sampler-for-vaadin6
Specifically, I want to know how to create those boxes , which can be clicked on ? I am not sure what these are? whether they are links or images or buttons?
I also what the box around it when a mouse is moved over these boxes. Any sample code is highly appreciated.

The sampler page is created with Vaadin. According to FireBug it's made with a CSSLayout and those boxes are made with links. The hover effect is made with the following css attribute:
.v-csslayout-grid .screenshot a:hover span {
background: url("screenshot-frame-hover.png") no-repeat scroll 1px 0px transparent;
}

You can find the code for a "relatively" recent version of the Vaadin 6 Sampler here.
At least this version (which I believe to be 6.7.4) should give you some examples of what you're looking for.

can I have a parsys inside parsys

I'm having a paragraph system (parsys) in my page, and inside that I'm dragging one component; that component has two paragraph systems inside it. So now I will be dragging a rich text component in both of the two paragraph systems which are present in the component. However, after dragging the rich-text components in the two paragraph systems, I'm not able to edit the those two rich text components, as they got overlapped. Can you tell me whether we can have a parsys inside a parsys and will that support content authoring.

Yes it is possible to have a parsys inside a parsys. The overlapping problem would be a CSS issue, and can be solved most of the time by adding the following div at the end of your component code.
<div style="clear:both"></div>
Also, to prevent adding additional div styles to your page, this should be done only in author mode:
<% if (WCMMode.fromRequest(request) == WCMMode.EDIT) { %>
<div style="clear:both"></div>
<% } %>

JMesa style disappears when is child of <s:form>

I have an extrange case with JMesa..
When I'm doing tests without a form element as parent (to apply filters and pages) JMesa table is rendered.
But when I put the Jmesa element as form's child, the style disappears and is rendered as a basic table without colors or borders ._.
<fieldset>
<s:form action="listUsers">
<jmesa:tableModel id="test" items="${users}" var="bean">
<jmesa:htmlTable caption="${pageScope.caption}" width="100%">
<jmesa:htmlRow>
... Rows ....
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableModel>
</s:form>
</fieldset>
On head tags I have the css refered and jmesa/jquery.jmesa ..

Since the table renders with correct styles when not wrapped in a form tag but renders with no styling when it is inserted into the body of a form tag, my first thought is that there is a style somewhere at the form tag level that is causing the table styles to be lost or overridden. Another possibility is that if your CSS Selectors are configured with very specific parent/child relationships, the introduction of another tag could conceivably prevent styles from being applied.
Without more information as to what styles are present, the best suggestion I can offer is to use a tool that allows you to interactively assess your styles. Internet Explorer 8 has the Developer Tools feature. Conveniently, you can use a feature to click on an item on your Web page and it will load that element along with its styles. You can then analyze the styles or dynamically tweak styles to immediately see results.
I'd recommend loading the page that works and screen capturing the styles for the table when it looks good. Then you can do the same for when the styles are not being applied to the table and compare the two as a starting point to determining what's causing the difference.