Access a rectangular in svg using selenium java

Question

I want to access a rectangular in a svg using.I should specify i have several svg on the same page. Here is what i want to access:

<svg id="raphael-paper-252" height="239" version="1.1" width="399" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; left: -0.5px; top: -0.5px; background-color: rgb(255, 255, 255);">
<desc>Scrollable Dual Y-Axis Combination Chart</desc>
<defs>
<g class="raphael-group-253-background">
<g class="raphael-group-260-canvas">
<g class="raphael-group-266-axisbottom">
<g class="raphael-group-266-axisbottom">
<g class="raphael-group-254-dataset" style="" clip-path="url('#0EF0615E-B63E-4B86-BCB3-DA1B99BCD97A')" transform="matrix(1,0,0,1,0,0)">
<g class="raphael-group-267-axistop">
<g class="raphael-group-495-scroll">
<g class="raphael-group-259-datalabels" style="" clip-path="url('#32ADDEF9-19E1-4425-A700-753A4E192433')" transform="matrix(1,0,0,1,0,0)">
<g class="fusioncharts-legend" transform="matrix(1,0,0,1,95,181)" style="">
<g class="raphael-group-255-hot" style="" clip-path="url('#FF53AB95-4DD3-4307-A757-AEC8F0979452')" transform="matrix(1,0,0,1,0,0)">
<g class="raphael-group-316-col-hot">
<rect style="cursor: pointer; stroke: rgb(192, 192, 192); stroke-opacity: 0.000001; fill-opacity: 0.000001; fill: rgb(192, 192, 192);" x="90.5" y="118.5" width="25" height="5" rx="1" ry="1" stroke="#c0c0c0" stroke-opacity="0.000001" stroke-width="1" fill-opacity="0.000001" fill="#c0c0c0"/>

For a smaller path i used this

    WebElement svgElement = OpenBrowser.driver.findElement(By.cssSelector("svg"));  

                 // Get the Buttons with which we want to interact in a list  
                 List<WebElement> gElements = svgElement.findElements(By.cssSelector("g"));  


                 WebElement button = gElements.get(7);
                 Actions actionBuilder = new Actions(OpenBrowser.driver);
                 actionBuilder.click(button).build().perform();  

and it worked but when i try this

WebElement svgElement = svg.findElement(By.cssSelector("svg"));  

 // Get the Buttons with which we want to interact in a list  
 List<WebElement> gElements = svgElement.findElements(By.cssSelector("g"));  

 System.out.println(gElements.size());


List<WebElement> button1 =  gElements.get(9).findElements(By.cssSelector("g"));
System.out.println(button1.size());
List<WebElement> button2 = button1.get(1).findElements(By.cssSelector("rect"));
WebElement button = button2.get(4);

 Actions actionBuilder = new Actions(OpenBrowser.driver);
 actionBuilder.click(button).build().perform();  

for the path above it throws me index out of bounds. I think it takes the first svg not the one i want.i tried accessing the element the svg is in first but it dosent find it :

WebElement svg = OpenBrowser.driver.findElement(By.cssSelector("#box_w3 > div > div.widget-body > div > div"));

I also tried using xpath and absolute still nothing. Any help is appreciated. Thanks in advance :)

Answer 1

Ok, so it seems I have figured it out. What I have done is accessed every step independently

WebElement divElement = OpenBrowser.driver.findElement(By.cssSelector("#chartContainerTicket"));  
 WebElement spanElements = divElement.findElement(By.cssSelector("span"));  
try{
     svgElements = spanElements.findElement(By.cssSelector("svg")); 

    }
    catch(StaleElementReferenceException e1 ){
         svgElements = spanElements.findElement(By.cssSelector("svg")); 

    }

The try catch is there because sometimes it wouldn't find the svg element so i had to search for it again and I used exception so it ignores the first time it doesn't find the element. After that i put in a list all the g tag elements in the svg:

List<WebElement> gElements = svgElements.findElements(By.cssSelector("g"));

 System.out.println(gElements.size());
 System.out.println(gElements);

After that I iterated through every g element pushing it using a for loop until I found the rectangle I needed to push.Ironically it was the first one :|

//for(int i = 1 ; i<gElements.size();i++){
WebElement button1 =  gElements.get(1 //here was i);

 Actions actionBuilder = new Actions(OpenBrowser.driver);
    actionBuilder.click(button1).build().perform();  
    System.out.println(button1);
    Thread.sleep(1000);//}

The action is here because you can't interact directly with a svg element.This method, accessing every element one by one and putting g elements in a list seems to be the most reliable so far and the only one I could get working. I hope this answer will save someone some time :) Peace out!