將Highchart SVG圖像與Selenium一起使用

Question

在Java中運行Selenium測試時，我需要一些幫助，在該頁面上我有SVG高圖表圖像。 我遇到的問題是，我無法讓硒識別高位圖中的每個元素，然后依次單擊它們以觸發另一個事件。

我已在下面附上了屏幕截圖，希望該屏幕截圖突出顯示我正在嘗試做的事情

我認為屏幕上的HTML代碼段不清晰，因此我在下面概述了這一點：

    <div id="status-action-counts" class="two-by-two-chart" data-highcharts-chart="0">
        <div id="highcharts-0" class="highcharts-container" style="position: relative; overflow: hidden; width: 588px; height: 300px; text-align: left; line-height: normal; z-index: 0; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; font-size: 12px; left: 0.133331px; top: 0.916672px;">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="588" height="300">
                <desc>Created with Highcharts 3.0.4</desc>
                <defs>
                <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="588" height="300">
                <g class="highcharts-grid" zIndex="1">
                <g class="highcharts-grid" zIndex="1">
                <g class="highcharts-axis" zIndex="2">
                <g class="highcharts-axis" zIndex="2">
                <g class="highcharts-series-group" zIndex="3">
                    <g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(62,51) scale(1 1)" style="cursor:pointer;" clip-path="url(#highcharts-1)">
                        <rect fill="#ECB631" x="26.5" y="52.5" width="49" height="121" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="130.5" y="150.5" width="49" height="23" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="233.5" y="168.5" width="49" height="5" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="336.5" y="162.5" width="49" height="11" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="439.5" y="17.5" width="49" height="156" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                    </g>
                    <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(62,51) scale(1 1)">
                </g>

本質上，我想單擊“指導代理”高圖，然后將觸發一個事件並允許我繼續進行測試。 如果有人可以提供幫助以幫助我前進，我將不勝感激。

代碼片段

    public static void terminatedReportCompletedBarGraphSelect(InternetExplorerDriver driver)
    {
        WebElement parent = driver.findElement(By.className("highcharts-series-group"));
        List<WebElement> children = parent.findElements(By.tagName("rect"));
        children[0].Click();
    }

UPATE-25/11/14您好，我希望您可以為我遇到的下一個問題提供幫助。 由於您的幫助，我現在已經能夠選擇條形圖。 然后，它要做的是打開另一個條形圖，我想單擊該元素上的一個元素。 問題在於className是“ Highcharts-series-group”，與我以前使用的元素定位符相同。 我在下面附上了我要選擇的選項的屏幕截圖（是右側的圖）

這是HTML的一個片段，以防萬一它不可見：

<div id="controller-breakdown" class="two-by-two-chart" style="display: block;" data-highcharts-chart="1">
    <div id="highcharts-2" class="highcharts-container" style="position: relative; overflow: hidden; width: 588px; height: 300px; text-align: left; line-height: normal; z-index: 0; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; font-size: 12px; left: 0.083313px; top: 0.916672px;">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="588" height="300">
            <desc>Created with Highcharts 3.0.4</desc>
            <defs>
            <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="588" height="300">
            <g class="highcharts-grid" zIndex="1">
            <g class="highcharts-grid" zIndex="1">
            <g class="highcharts-axis" zIndex="2">
            <g class="highcharts-axis" zIndex="2">
            <g class="highcharts-series-group" zIndex="3">
            <g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(61,51) scale(1 1)" style="cursor:pointer;" clip-path="url(#highcharts-3)">
                <rect fill="#ECB631" x="67.5" y="32.5" width="124" height="183" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                <rect fill="#ECB631" x="325.5" y="118.5" width="124" height="97" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
            </g>
            <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(61,51) scale(1 1)">
            </g>

我希望通過編寫以下代碼，可以從右側圖表中選擇一個條形。 我的想法是，我必須以某種方式使用'div id =“ controller-breakdown'元素來標識我嘗試訪問的代碼塊，因為這是唯一的。

public static void relationalBarChartSelector(InternetExplorerDriver driver)
{
    WebElement parent = driver.findElement(By.id("controller-breakdown"));
    List<WebElement> children = parent.findElements(By.tagName("rect"));
    children.get(1).click();
}

你怎么看？

Answer 1

希望這會有所幫助-HighCharts

Answer 2

這對我有用（恐怕是C＃）。 沒有一種簡單的方法可以識別哪個數據在哪個矩形中，因此，除非您已經知道序列的順序，否則可能是一個問題：

IList<IWebElement> bars = MyWebDriver.Driver.FindElements(By.TagName("rect"));
foreach (var bar in bars)
{
    Thread.Sleep(500);
    try
    {
        bar.Click();
    }
    catch (Exception e)
    {
    }
}