使用Watir Webdriver测试Highcharts

Question

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

Answer 1

假设

由于我们只有图表的图像,而不是特定的html,我将假设图形在设计上与"基本线"高图演示相似.以下内容有望在概念上为您的图表工作(即该方法可能会起作用,但可能需要进行一些调整).

获取路径元素

在图中,有一个绘制每个点的路径元素,以及绘制线的路径元素.

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