Question

目前，我正在使用Watir-Webdriver测试图表。我可以使用以下代码获取包含图例的文本：

browser.divs(:id=>"charting_Pie").each do |d|
  puts d.text
end

我真正需要的是获取所有切片的工具提示值。另外，请帮我跟其他图表一样（例如：条形图）。

可以在Dojo Charting page上看到示例图表，其中包括：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo: Monthly Sales Pie Chart with MoveSlice</title>
    <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/../../../resources/style/demo.css" media="screen">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.7/dijit/themes/claro/claro.css" media="screen">
  </head>
  <body class="claro">
    <h1>Monthly Sales Pie Chart with MoveSlice</h1>

    <div id="chartNode" style="width:800px;height:400px;"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.7/dojo/dojo.js"></script>
    <script>
    require([
      "dojox/charting/Chart",
      "dojox/charting/themes/Claro",
      "dojox/charting/plot2d/Pie",
      "dojox/charting/action2d/Tooltip",
      "dojox/charting/action2d/MoveSlice",
      "dojox/charting/plot2d/Markers",
      "dojox/charting/axis2d/Default",
      "dojo/domReady!"
    ], function(Chart, theme, Pie, Tooltip, MoveSlice) {
      var chartData = [10000,9200,11811,12000,7662,13887,14200,12222,12000,10009,11288,12099];
      var chart = new Chart("chartNode");
      chart.setTheme(theme);
      chart.addPlot("default", {
        type: Pie,
        markers: true,
        radius:170
      });
      chart.addAxis("x");
      chart.addAxis("y", { min: 5000, max: 30000, vertical: true, fixLower: "major", fixUpper: "major" });
      chart.addSeries("Monthly Sales - 2010",chartData);
      var tip = new Tooltip(chart,"default");
      var mag = new MoveSlice(chart,"default");
      chart.render();
    });
    </script>
  </body>
</html>

Answer 1

使用用户界面

对于Dojo饼图，切片是标签名称为“path”的元素。由于这些不是标准HTML元素，因此您必须使用Watir的通用element方法来查找它们。例如，第一个切片将通过以下方式检索：

browser.element(tag_name: 'path')

要触发工具提示，您需要触发鼠标悬停事件。有几种方法可以做到这一点：

# Using hover
browser.element(tag_name: 'path').hover

# Using fire_event
browser.element(tag_name: 'path').fire_event('onmouseover')

工具提示文本本身似乎显示在带有dijitTooltipContents类的div中：

browser.div(class: 'dijitTooltipContents').text

总而言之，这是一个工作脚本：

browser = Watir::Browser.new :chrome
browser.goto('http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/monthly-sales-moveslice.php')
tooltip_text = browser.elements(tag_name: 'path').map do |slice|
    slice.fire_event('onmouseover')
    browser.div(class: 'dijitTooltipContents').text
end
p tooltip_text  
#=> ["10000", "9200", "11811", "12000", "7662", "13887", "14200", "12222", "12000", "10009", "11288", "12099"]

从实验中，我建议使用fire_event方法而不是hover。在这种情况下，hover没有足够快地触发，这导致了不一致的结果，例如为多个切片拉出相同的数字。

检查HTML

那就是说，除非你真的试图测试Dojo饼图本身的功能，否则你可以从相关的脚本元素中提取数据：

browser = Watir::Browser.new :chrome
browser.goto('http://dojotoolkit.org/documentation/tutorials/1.8/charting/demo/monthly-sales-moveslice.php')
script = browser.scripts.find { |script| script.html.include?('chartData') }
tooltip_text = script.html[/chartData\s*=\s*\[([\d,]+)\]/, 1].split(',')
p tooltip_text
#=> ["10000", "9200", "11811", "12000", "7662", "13887", "14200", "12222", "12000", "10009", "11288", "12099"]

如何从Dojo饼图中获取工具提示值

1 个答案: