单击在 Canvas (AngularJS) 中创建的图形答案

【问题标题】：Clicking on graph created in Canvas (AngularJS)单击在 Canvas (AngularJS) 中创建的图形
【发布时间】：2018-08-25 16:27:01
【问题描述】：

条形图是使用数据库中的数据在网页上生成的（使用AngularJS开发）。图表是使用 CANVAS 创建的。

图表加载完成后，如果您点击红色部分，它将打开一个弹出窗口，其中包含包含值的表格 - Total 和 错过了。绿色也一样 - Total & Hit。

图表始终有两种颜色 - 红色和绿色。

我正在尝试使用 Robot Framework 测试此 Graph。我可以点击图表，然后从弹出表中读取值。

唯一的问题是我随机点击。我想识别红色和绿色，然后单击它。

在 IE 中检查上述元素后，我得到的信息如下图。

<div class = 'ChartWrapperArea'>
    <canvas width='2000' height='600'
     class = 'chart-bar ng-isolate-scope'
     id = 'pwFeedChart' style='display;block;'
     chart-colors='colors' chart-options='barOptions'
     chart-labels='barLabels' chart-data='barData'
     chart='pwFeedChart'>
    </canvas>
</div>

请告诉我如何识别图中元素的方法。

首选选项是 Robot Framework，但也适用于任何其他解决方案。

【问题讨论】：

标签： javascript java python selenium robotframework

【解决方案1】：

您可以使用offsetLeft，offsetTop，画布的宽度来获取画布的坐标。例如。

var test = document.getElementsByTagName('canvas')[0];
var left = test.offsetLeft;
var top = test.offsetTop;
var width = test.width;
// get the coordinates X and Y using above.

之后，您可以使用 jquery 单击该区域，下面是它的示例链接。 How to simulate a click by using x,y coordinates in JavaScript?.

希望对你有帮助。

【讨论】：

谢谢@gusaindpk。会尽力回复您。