如何在自动化过程中单击 Highchart 元素

Question

有什么方法可以获取 SmartGWT hightchart 图中元素的定位器（定位器或 xpath 等）？我需要自动点击图表的系列图例（出现在图表右侧的系列）。

这些是我试图为这个图的元素识别验证定位器的东西：

• 使用Relative Xpath Helper 插件。单击highchart 图表的任何元素后，我收到消息：“未找到唯一标识符”。
• 使用 Selenium IDE 设置为 smartgwt 的 'user-extensions.js' 和 'user-extensions-ide.js' selenium 库。在尝试识别这些系列的定位器或图中的任何其他元素后，我收到消息：“LOCATOR_DETECTION_FAILED”。
• 使用Selenium Page Object Generator插件。生成java文件后，java文件中没有生成与图像相关的信息。

任何帮助将不胜感激。

提前致谢！

<g class="highcharts-legend" zIndex="7" transform="translate(-32,110)">
  <g zIndex="1" clip-path="url(#highcharts-2)">
    <g transform="translate(0,1)">
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#C00000" stroke-width="2"></path>
        <path fill="#C00000" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#274b6d;fill:#274b6d;" text-anchor="start" zIndex="2">
          <tspan x="21">Worst Inventory On Site</tspan>
        </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,21)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#3A5723" stroke-width="2"></path>
        <path fill="#3A5723" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#274b6d;fill:#274b6d;" text-anchor="start" zIndex="2">
          <tspan x="21">Total Ins</tspan>
        </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,39)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
        <tspan x="21">Total Outs</tspan>
       </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,57)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="2,2" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
          <tspan x="21">Inventory On Site</tspan>
       </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,75)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="6,2" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
        <tspan x="21">Inventory On Transit</tspan>
       </text>
      </g>
    </g>
  </g>
</g>

Answer 1

感谢@dangi13 的帮助。但是我找到了使用不同 xpath 结构的解决方案：

sharedData.appInstance.findElement(By.xpath("//[name()='g' and @class='highcharts-legend']//[name()='text']//*[name()='tspan' and text()='Worst Inventory on Site']")).click();

Answer 2

您可以使用以下代码点击 HighChart 元素：

/**
     * @param graphName Use one of below values.
     * Worst Inventory On Site
     * Total Ins
     * Total Outs
     * Inventory On Site
     * Inventory On Transit
     */
    public void clickOnGraph(String graphName) {
         WebElement graphElement = driver.findElement(By.xpath("//g[@class='highcharts-legend-item']//tspan[text()='" + graphName + "']"));
         graphElement.click();
    }

用于进一步的 HighChart 元素操作。你可以参考：

https://github.com/Ardesco/Powder-Monkey/blob/master/src/main/java/com/lazerycode/selenium/graphs/HighCharts.java

对 HighCharts 相关的 Selenium 操作很有帮助。

如果正常点击不起作用，您可以尝试使用 JavaScriptExecutor 或 Actions 类点击。

如果对你有帮助，请告诉我:)