使用 Watir Webdriver 测试 Highcharts

Question

我在 Watir webdriver 中编写 Ruby，我想测试与 CSV 文件（我已经阅读过）相比呈现的数据的高图表准确性。我如何从网站上读取 highchart 数据？ 当您将鼠标悬停在点上时，会生成一个包含许多数据点的高图，数据将显示在一个框中。 我无法使用 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]

模拟鼠标悬停

您可以使用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。

搜索数据点

要找到特定日期的值（例如温度），我们需要遍历路径元素，直到找到与所需日期匹配的元素。使用之前的points 变量，让我们得到七月的值。

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"