Question

我在Watir webdriver中编写Ruby，我想测试一下CSV文件（我已经读过）的数据的高图精确度。我怎样才能从网站上阅读高清数据？当您将鼠标悬停在点上时，会生成包含许多数据点的高图，数据将显示在一个框中。我无法使用watir webdriver定位元素，因为我从源头看到每个点都是路径标记。我想也许自动光标移动到x y位置但不知道如何做到这一点。有帮助吗？谢谢

Answer 1

<强>假设

由于我们只有图表的图像，而不是特定的html，我将假设图形在设计上与"Basic Line" highcharts demo相似。以下内容有望在概念上为您的图表工作（即该方法可能会起作用，但可能需要进行一些调整）。

获取路径元素

在图表中，有一个绘制每个点的路径元素，以及一个绘制线条的路径元素。

<g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(62,55) scale(1 1)" clip-path="none">
  <path fill="#2f7ed8" d="M 638.25 182.5 C 643.578 182.5 643.578 190.5 638.25 190.5 C 632.922 190.5 632.922 182.5 638.25 182.5 Z"></path>

watir不直接支持g和path元素，因此您需要将通用元素类型与css或xpath定位器一起使用。

#Get the first line (as there are 4 in the demo)
series1 = browser.element(:css => 'g.highcharts-markers')

#Get the data points (the last  point is ignored since it is the line)
all_path_elements = series1.elements(:css => 'path')
points = all_path_elements[0..-2]

模拟MouseOver

您可以使用hover方法模拟鼠标在元素上：

browser.element(:css => 'g.highcharts-markers path').hover

阅读弹出窗口

弹出窗口的html如下：

<g opacity="0" transform="translate(146,222)" visibility="hidden" style="cursor:default;padding:0;white-space:nowrap;" zIndex="8" class="highcharts-tooltip">
  <text zIndex="1" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" y="21" x="8">
    <tspan x="8" style="font-size: 10px">Apr</tspan>
    <tspan dy="16" x="8" style="fill:#8bbc21">Berlin</tspan>
    <tspan dx="0">: </tspan>
    <tspan dx="0" style="font-weight:bold">8.4°C</tspan>
  </text>

我们可以使用以下任一方式获取弹出文本：

#All text together
puts browser.element(:css => 'g.highcharts-tooltip').text
#=> "DecTokyo: 9.6°C"

#Each line of the popup
browser.elements(:css => 'g.highcharts-tooltip tspan').each{ |x| puts x.text }
#=> "Dec"
#=> "Tokyo"
#=> ":"
#=> "9.6°C"

请注意，text方法仅显示可见文本，因此您需要确保在获取文本之前显示弹出窗口。或者，您可以解析元素的html。

搜索数据点

要查找特定日期的值（ex temperature），我们需要迭代路径元素，直到找到与所需日期匹配的元素。使用之前的points变量，让我们获取7月的值。

point = points.find do |p|  
  #Hover over a point
  p.hover

  #Get the month from the popup
  month = browser.elements(:css => 'g.highcharts-tooltip tspan')[0].text

  #Keep going until the month is "Jul"
  month == 'Jul'
end

#Get the value of the point
point.hover
puts browser.elements(:css => 'g.highcharts-tooltip tspan')[3].text
#=> "25.2°C"

然后可以将此值与预期值的电子表格进行比较。

运行脚本

将所有要点放在一起，给出了最终的运行示例。

require 'watir'
browser = Watir::Browser.new :chrome
browser.goto 'http://www.highcharts.com/demo/'
series1 = browser.element(:css => 'g.highcharts-markers')
all_path_elements = series1.elements(:css => 'path')
points = all_path_elements[0..-2]
point = points.find do |p|  
  p.hover
  month = browser.elements(:css => 'g.highcharts-tooltip tspan')[0].text
  month == 'Jul'
end
point.hover
puts browser.elements(:css => 'g.highcharts-tooltip tspan')[3].text
#=> "25.2°C"

使用Watir Webdriver测试Highcharts

1 个答案: