Invalid Selector error when attempt to select a date format from dropdown list

Question

For an application I am testing, I wish to select a date format from a drop down list. The date format is this: dd/mm/yyyy (this is the value in the dropdown)

However I receive this error when trying to select it: Selenium::WebDriver::Error::InvalidSelectorError:

Anybody got any idea how I can select this value from the dropdown? I have single quotes and doubles quotes when passing the entry to my test, but it does not like the slashes (/).

Anybody got any ideas?

The html is as follows:

<option class="ng-scope ng-binding" value="YYYY-MM-DD" ng-repeat="fmt in date_formats"     ng-selected="false">

2014-05-06

</option>
<option class="ng-scope ng-binding" value="DD/MM/YYYY" ng-repeat="fmt in date_formats"  ng-selected="false">

06/05/2014

</option>

My test uses the following method to select the format:

def select_date_format(format)
  page.find("[value=#{format}]").click
end

In the above method format is a variable that is passed from my spec file with the date format I wish to choose. This method works fine with dashes (i.e when the date format is YYYY-MM-DD) but I get the error when I attempt to pass in a value that has slashes (i.e - DD/MM/YYYY)

Thanks!

Answer 1

The exception is complaining about the slashes in the CSS-selector. The following is not considered a valid CSS-selector:

[value=DD/MM/YYYY]

To have slashes in the attribute value, you need to enclose the attribute value in quotes:

[value='DD/MM/YYYY']

Your method should work if you add the quotations inside the selector:

def select_date_format(format)
  page.find("[value='#{format}']").click
end

Answer 2

I checked it in Java and it works :

@Test
public void test1() { 
    WebDriver driver = new FirefoxDriver();
    driver.get("test.html");
    Thread.sleep(3000);

    driver.findElement(By.xpath("//option[@value='DD/MM/YYYY']")).click();

    String dateFormat = "DD/MM/YYYY";
    driver.findElement(By.xpath("//option[@value='" + dateFormat + "']")).click(); 

    driver.close();
}

Or you can use Select :

Select select = new Select(driver.findElement(By.xpath("//path_to_drop_down")));
select.deselectAll();
select.selectByVisibleText("DD/MM/YYYY");

(http://selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/support/ui/Select.html)