如何使用硒单击甜甜圈饼图元素

时间:2018-06-21 16:10:17

标签: javascript html selenium selenium-webdriver xpath

我能够找到此甜甜圈饼图的每个部分的元素,但是单击事件在图表的中心(空的内圈)执行,没有任何作用。我需要单击图表的彩色环部分。请让我知道是否有任何解决方案。 以下是使用xpath的iam:

WebElement osTypeChart = driver.findElement(By.xpath("//div[@id='oscontainer']/div[1]//*[local-name()='svg']//*[local-name()='g'][1]//*[local-name()='g'][1]//*[local-name()='path'][2]"));
    Actions builder = new Actions(driver);
    builder.moveToElement(osTypeChart).click(osTypeChart).build().perform();

<div id="oscontainer" config="ostypeChart" class="dynamicChartWidth chartHeight ng-isolate-scope" data-highcharts-chart="1"><div id="highcharts-jy24ja7-2" class="highcharts-container " style="position: relative; overflow: hidden; width: 589px; height: 176px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><svg version="1.1" class="highcharts-root " style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="589" height="176" viewBox="0 0 589 176"><desc>Created with Highcharts 5.0.14</desc><defs><clipPath id="highcharts-jy24ja7-3"><rect x="0" y="0" width="569" height="159" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="589" height="176" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="10" y="15" width="569" height="159"></rect><rect fill="none" class="highcharts-plot-border" x="10" y="15" width="569" height="159"></rect><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-pie-series highcharts-color-undefined highcharts-tracker " transform="translate(10,15) scale(1 1)" style="cursor:pointer;"><path fill="#045f80" d="M 152.23584471234318 -1.899998558473598 A 69.5 69.5 0 0 1 152.30534470639597 137.0999779637625 L 152.30534470639597 137.0999779637625 A 69.5 69.5 0 0 0 152.23584471234318 -1.899998558473598 Z" class="highcharts-halo highcharts-color-0" fill-opacity="0.25"></path><path fill="rgb(4,95,128)" d="M 151.98584471234318 -1.4999985584735924 A 69.5 69.5 0 0 1 152.05534470639597 137.4999779637625 L 152.0332068238376 109.69998677825751 A 41.7 41.7 0 0 0 151.9915068274059 26.300000864915845 Z" transform="translate(0,0)" stroke="rgb(255,255,255)" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-0 "></path><path fill="rgb(251,176,65)" d="M 151.98584471234318 137.49999855847358 A 69.5 69.5 0 0 1 151.90346589430402 -1.4999329579995901 L 151.9420795365824 26.30004022520024 A 41.7 41.7 0 0 0 151.9915068274059 109.69999913508416 Z" transform="translate(0,0)" stroke="rgb(255,255,255)" stroke-width="1" stroke-linejoin="round" class="highcharts-point highcharts-color-1 "></path></g><g class="highcharts-markers highcharts-series-0 highcharts-pie-series highcharts-color-undefined " transform="translate(10,15) scale(1 1)"></g></g><g class="highcharts-legend" transform="translate(368,55)"><rect fill="none" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="211" height="47" visibility="visible"></rect><g><g><g class="highcharts-legend-item highcharts-pie-series highcharts-color-0" transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15"><tspan>Linux ( 50.0%  : 1 devices)</tspan></text><rect x="2" y="4" width="12" height="12" fill="#045f80" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-pie-series highcharts-color-1" transform="translate(8,21)"><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>Windows ( 50.0%  : 1 devices)</tspan></text><rect x="2" y="4" width="12" height="12" fill="#fbb041" rx="6" ry="6" class="highcharts-point"></rect></g></g></g></g><g class="highcharts-label highcharts-tooltip highcharts-color-0" style="cursor:default;pointer-events:none;white-space:nowrap;" transform="translate(166,-9999)" opacity="0" visibility="visible"><path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 86.5 0.5 C 89.5 0.5 89.5 0.5 89.5 3.5 L 89.5 44.5 C 89.5 47.5 89.5 47.5 86.5 47.5 L 50.5 47.5 44.5 53.5 38.5 47.5 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="#000000" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 86.5 0.5 C 89.5 0.5 89.5 0.5 89.5 3.5 L 89.5 44.5 C 89.5 47.5 89.5 47.5 86.5 47.5 L 50.5 47.5 44.5 53.5 38.5 47.5 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="#000000" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></path><path fill="none" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 86.5 0.5 C 89.5 0.5 89.5 0.5 89.5 3.5 L 89.5 44.5 C 89.5 47.5 89.5 47.5 86.5 47.5 L 50.5 47.5 44.5 53.5 38.5 47.5 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" isShadow="true" stroke="#000000" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></path><path fill="rgba(247,247,247,0.85)" class="highcharts-label-box highcharts-tooltip-box" d="M 3.5 0.5 L 86.5 0.5 C 89.5 0.5 89.5 0.5 89.5 3.5 L 89.5 44.5 C 89.5 47.5 89.5 47.5 86.5 47.5 L 50.5 47.5 44.5 53.5 38.5 47.5 3.5 47.5 C 0.5 47.5 0.5 47.5 0.5 44.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" stroke="#045f80" stroke-width="1"></path><text x="8" style="font-size:12px;color:#333333;fill:#333333;" y="20"><tspan style="font-size: 10px">Linux</tspan><tspan style="fill:#045f80" x="8" dy="15">●</tspan><tspan dx="0"> Devices: </tspan><tspan style="font-weight:bold" dx="0">1</tspan></text></g></svg></div></div>

1 个答案:

答案 0 :(得分:0)

如果在甜甜圈图的中间单击,则意味着您可以获取单击位置(坐标)(中间部分)。获取位置后,您可以从坐标中添加/减去坐标以使其单击新位置。

如果要使其成为更好的解决方案,请获取元素尺寸并根据百分比计算出这些调整数。