SVG and selenium

Question

Hej Guys

I an using google visualization api to draw stacked bar chart. Its all fine but now i want to test it with selenium but having a hard time finding the elements in the google chart.

For example i want to click on the chart element but everytime i try to find an element by xpath i get exception "OpenQA.Selenium.NoSuchElementException: The element could not be found"

I read that with selenium its tricky to click on the svg images.

Is there anybody who know a solution cuz i m kind of desprate and i havent find a suitable solution on the net by myself.

My chart looks like this:

http://i48.tinypic.com/21o4swx.png

What i am trying todo is:

        webdriver.Navigate().GoToUrl("http://localhost:59777/Tests/TestsMainView");
        IWebElement element = webdriver.FindElement(By.XPath("/html/body/div/div[2]/div[2]/iframe/html/body/div/svg/g[2]/g/g[2]/rect[5]"));
        Actions myAction = new Actions(webdriver);
        myAction.Click(element).Perform();
        Thread.Sleep(9999);

Thanks :)

Answer 1

Here is some advice that may help you. First your second line of code is should be

WebElement element = webdriver.FindElement(By.xpath("//img[contains(@src,'http://i48.tinypic.com/21o4swx.png')]"))

You had "IWebElement" (this was probably just a typo in your question). I changed the way the element is found searching for matching element instead of starting at the top level and working down. This is a better practice to narrow down the element you are attempting to interact with so that changes to the code don't instantly break your test. Also unless you start an xpath expression off with "//" or "xpath=" selenium Webdriver will not recognize it so even if your path never changed selenium Webdriver wouldn't be able to find it.

If I understand what you are trying to do then you can also remove lines 3-5 and replace them with the following,

element.click();

This will have selenium Webdriver zoom in on the chart provided by your link. I hope this helps

Answer 2

I noticed xpath cannot select anything within an svg tag. I managed to find elements using className or tagName selectors instead or you could even try cssSelectors but I am not sure about that one. Note that you can still use xpath to access parents of a node inside an svg using:

     By.xpath("..");

Hope that will help.