Selenium WebDriver Issue with cssSelector

Question

I am trying to click on a button with using a CSS selector in Selenium 2.0 WebDriver. The issue is the script which I am able to run with Selenium RC is not working with WebDriver. Code:

Selenium RC:

selenium.click("css=.gwt-Button:contains('Run Query')");

which works absolutely fine.

Selenium WebDriver:

driver.findElement(By.cssSelector(".gwt-Button:contains('Run Query')")).click(); 

which does not work. I am using: selenium-server-standalone-2.9.0.jar with Firefox version 5.0. Could anyone help me in figuring out why the cssSelector is not working with WebDriver?

Answer 1

'Contains' is being deprecated from CSS 3. Webdriver supports whatever natively supported by the browser. It works in selenium RC because RC uses Sizzle library for css selectors and it supports 'contains'. Did you try something like,

WebElement element = driver.findElement(By.cssSelector(".gwt-Button[type='button']");
element.click();

If this is not unique then perhaps you might need to filter it further down. If your site uses jQuery then you could use 'contains' selector from jQuery.

JavascriptExecutor js = ((JavascriptExecutor)driver);
WebElement element = (WebElement) js.executeScript("return $(\".gwt-Button:contains('Run Query')\")[0];");
element.click();

Answer 2

that syntax looks valid and when I dropped some elements on a test page and then went to my console and did $(".gwt-Button:contains('Run Query')").length I got a 1 when I changed the text of the buttons. So the only thing I can think of is maybe you have a Run Query button that exists on the page but isn't displayed and so you get the runtime exception. You might want to do a check to see if it's displayed before clicking on it. Or creating a list of the elements and then removing all hidden (display == false) elements.