使用Selenium Java訪問SVG中的矩形

Question

我想使用svg訪問矩形。我應該指定我在同一頁面上有幾個svg。 這是我要訪問的內容：

<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"/>

對於較小的路徑，我使用了這個

    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();  

它的工作，但當我嘗試這個

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();  

因為上面的路徑使我的索引超出范圍。 我認為它需要第一個svg而不是我想要的那個。我嘗試訪問svg首先位於的元素，但是它發現了它：

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

我也嘗試使用xpath，但絕對沒有。 任何幫助表示贊賞。 提前致謝 ：）

Answer 1

好的，看來我已經知道了。 我所做的每一步都可以獨立訪問

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")); 

    }

嘗試捕獲在那里是因為有時它找不到svg元素，所以我不得不再次搜索它，並且我使用了異常，因此它在第一次找不到該元素時會忽略它。 之后，我將svg中的所有g標簽元素放入列表中：

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

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

之后，我遍歷每個g元素，使用for循環將其推入，直到找到需要推入的矩形為止。具有諷刺意味的是，這是第一個：|

//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);//}

之所以這樣做是因為您不能直接與svg元素進行交互。這種方法，一個一個地訪問每個元素並將g元素放入列表似乎是迄今為止最可靠的方法，也是我可以使用的唯一方法。 我希望這個答案可以節省一些時間:)和平！