Javascript 使用Selenium Webdriver测试Highcharts折线图数据点

Javascript 使用Selenium Webdriver测试Highcharts折线图数据点,javascript,python,css,selenium,highcharts,Javascript,Python,Css,Selenium,Highcharts,我已经看到了使用Watir Webdriver测试highcharts折线图来回答这个问题。然而,使用带有SeleniumWebDriver和css/xpath定位器的测试框架似乎无法解决这个问题 我将python与SeleniumWebDriver结合使用,试图浏览类似于上所示的折线图的数据点。我的图表是一个基于时间的图表,其中包含一个折线图和条形图。出于测试目的,我隐藏了条形图,以便仅查看折线图。我试图使用鼠标悬停功能来显示图表上每个数据点的工具提示,然后提取显示的数据 这对于其他格式化图表

我已经看到了使用Watir Webdriver测试highcharts折线图来回答这个问题。然而,使用带有SeleniumWebDriver和css/xpath定位器的测试框架似乎无法解决这个问题

我将python与SeleniumWebDriver结合使用,试图浏览类似于上所示的折线图的数据点。我的图表是一个基于时间的图表,其中包含一个折线图和条形图。出于测试目的,我隐藏了条形图,以便仅查看折线图。我试图使用鼠标悬停功能来显示图表上每个数据点的工具提示,然后提取显示的数据

这对于其他格式化图表(条形图/饼图/圆环图)来说效果很好,因为每个数据项都被视为一个单独的highcharts系列,但折线图似乎是一个highcharts系列,其中有一个包含元素d=所有数据点的路径元素

我找不到一种方法来浏览所示行中的所有数据点。我的折线图包含一个24点的单一数据系列(每天每小时)

我正在使用的html代码是:

<g class="highcharts-series-group" zIndex="3">
    <g class="highcharts-series highcharts-tracker highcharts-tracker highcharts-tracker" visibility="hidden" zIndex="0.1" transform="translate(91,55) scale(1 1)" style="" clip-path="url(#highcharts-7)">
        <rect fill="#497646" x="364.5" y="192.5" width="12" height="258" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"></rect>
    </g>
    <g class="highcharts-markers" visibility="hidden" zIndex="0.1" transform="translate(91,55) scale(1 1)">
    </g>
    <g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(55,55) scale(1 1)" clip-path="url(#highcharts-7)">
        <path fill="none" stroke="#aa4643" stroke-width="2" zIndex="1" d="M 12.708333333333334 451 C 12.708333333333334 451 27.958333333333332 451 38.125 451 C 48.29166666666667 451 53.375 451 63.54166666666667 451 C 73.70833333333333 451 78.79166666666667 451 88.95833333333333 451 C 99.125 451 104.20833333333333 451 114.375 451 C 124.54166666666667 451 129.625 451 139.79166666666669 451 C 149.95833333333334 451 155.04166666666669 451 165.20833333333334 451 C 175.375 451 180.45833333333334 451 190.62500000000003 451 C 200.79166666666669 451 205.875 451 216.04166666666669 451 C 226.20833333333334 451 231.29166666666669 451 241.45833333333334 451 C 251.625 451 256.70833333333337 451 266.875 451 C 277.0416666666667 451 282.125 451 292.2916666666667 451 C 302.4583333333333 451 307.5416666666667 451 317.7083333333333 451 C 327.875 451 332.9583333333333 451 343.125 451 C 353.2916666666667 451 358.375 25.7 368.5416666666667 25.7 C 378.7083333333333 25.7 383.7916666666667 451 393.9583333333333 451 C 404.125 451 409.2083333333333 451 419.375 451 C 429.5416666666667 451 434.625 451 444.7916666666667 451 C 454.9583333333333 451 460.0416666666667 451 470.2083333333333 451 C 480.375 451 485.4583333333333 451 495.625 451 C 505.7916666666667 451 510.875 451 521.0416666666667 451 C 531.2083333333334 451 536.2916666666667 451 546.4583333333334 451 C 556.625 451 561.7083333333334 451 571.8750000000001 451 C 582.0416666666667 451 597.2916666666667 451 597.2916666666667 451"></path>
    </g>
    <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(55,55) scale(1 1)" clip-path="none">
        <path fill="#aa4643" stroke="#FFFFFF" stroke-width="1" visibility="hidden" d="M 368.5416666666667 19.7 C 376.5336666666667 19.7 376.5336666666667 31.7 368.5416666666667 31.7 C 360.54966666666667 31.7 360.54966666666667 19.7 368.5416666666667 19.7 Z"></path>
        <path class="highcharts-tracker highcharts-tracker" fill="none" d="M 2.708333333333334 451 L 12.708333333333334 451 C 12.708333333333334 451 27.958333333333332 451 38.125 451 C 48.29166666666667 451 53.375 451 63.54166666666667 451 C 73.70833333333333 451 78.79166666666667 451 88.95833333333333 451 C 99.125 451 104.20833333333333 451 114.375 451 C 124.54166666666667 451 129.625 451 139.79166666666669 451 C 149.95833333333334 451 155.04166666666669 451 165.20833333333334 451 C 175.375 451 180.45833333333334 451 190.62500000000003 451 C 200.79166666666669 451 205.875 451 216.04166666666669 451 C 226.20833333333334 451 231.29166666666669 451 241.45833333333334 451 C 251.625 451 256.70833333333337 451 266.875 451 C 277.0416666666667 451 282.125 451 292.2916666666667 451 C 302.4583333333333 451 307.5416666666667 451 317.7083333333333 451 C 327.875 451 332.9583333333333 451 343.125 451 C 353.2916666666667 451 358.375 25.7 368.5416666666667 25.7 C 378.7083333333333 25.7 383.7916666666667 451 393.9583333333333 451 C 404.125 451 409.2083333333333 451 419.375 451 C 429.5416666666667 451 434.625 451 444.7916666666667 451 C 454.9583333333333 451 460.0416666666667 451 470.2083333333333 451 C 480.375 451 485.4583333333333 451 495.625 451 C 505.7916666666667 451 510.875 451 521.0416666666667 451 C 531.2083333333334 451 536.2916666666667 451 546.4583333333334 451 C 556.625 451 561.7083333333334 451 571.8750000000001 451 C 582.0416666666667 451 597.2916666666667 451 597.2916666666667 451 L 607.2916666666667 451" stroke-linejoin="round" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" zIndex="2" style="" visibility="visible"></path>
    </g>
</g>

在此方面的任何帮助都将不胜感激。
BazScal

您正在尝试什么代码?此外,我相信,这不是完整的html,因为我自己也在使用highcharts。我正在用python编写代码,并使用selenium webdriver访问包含highchart条形图/折线图的UI。我正在尝试访问的插入的html代码。我遇到的问题是,对于行中的每个项目,行中的每个数据点都没有单独的路径。是否可以将所有点作为javascript对象循环,而不是从DOM获取它们?这一点已被更改为添加一个元素以获得更好的性能。例如,
chart.series[0]。data[0]。graphic
将访问DOM元素,因此您应该能够为该确切点调用类似于hover的命令。这就是我遇到的问题,只有当我将鼠标悬停在每个点上并且路径内容更改时,每个点才会变为“活动”。在highcharts line演示图表中,每个点或html路径显示为单独的元素。在我的示例中,正如您提到的@PawełFus,我的折线图的类路径元素是一个可调整的路径元素,在鼠标悬停时进行调整。我尝试使用xy偏移量,但这些图表对处理的数据是动态的,所以它们不总是显示相同的内容。也许你是对的,当被悬停动作激活时,你会通过点进行循环。你得到折线图的解决方案验证了吗?我也面临同样的问题。我不知道怎么在那里滑鼠。