Question

I am in the process of migrating my test suite from the Selenium 1 to WebDriver. I’ve come across a problem clicking on elements on a page which contains a map of the USA clickable states.

Using Selenium 1 I would do the following to select a particular state from the map.

selenium.click("css=area[alt=North Carolina]");

In Selenium 2 I’m converting this to

driver.findElement(By.cssSelector("area[alt=North Carolina]")).click();

WebDriver actually selects a different State. This is not a timing issue, a state is selected it is just the incorrect state. I’ve tried switching out cssselector for xpath with the same result.

Not sure if this is related to this issue

OS : Win XP

Browsers: Tested on IE 8 and FF 5 & 6

Selenium : 2.5.0

Example of page code

<area alt="California" shape="POLY" coords="10,60,29,68,25,98,56,146,51,167,17,138,3,70"   href="javascript:LoadCategory('CA');">

Answer 1

Looking at the HTML for the page you provided, it seems that there are individual pages for states like CA,AZ,OH etc. There are some other states (majority of them) like NM, MT etc all have common pages. As far as webdriver is concerned, I am not sure why it’s not clicking on the right element. I wrote something like below that works for me. You will have to extend this logic for other states.

WebDriver driver = new FirefoxDriver();
driver.manage().timeouts().implicitlyWait(90, TimeUnit.SECONDS);
driver.get("http://www.servsafe.com/catalog/starterscategories.aspx");
Selenium selenium = new WebDriverBackedSelenium(driver, driver.getCurrentUrl());
selenium.windowMaximize();
((JavascriptExecutor)driver).executeScript("javascript:LoadCategory('CA');");

Similarly, you can do it for other states that have individual pages, like

((JavascriptExecutor)driver).executeScript("javascript:LoadCategory('AZ');");
((JavascriptExecutor)driver).executeScript("javascript:LoadCategory('FL');");

For states that have common pages,

((JavascriptExecutor)driver).executeScript("javascript:LoadCategory();");