0

Bar Graph is generated on Web Page (developed using AngularJS) using data from database. Graph is created using CANVAS.

enter image description here

Once graph is completed loaded, if you click on Red part, it will open one pop-up which will have table containing the values - Total and Missed. Same for Green - Total & Hit.

Graph will always have two colors - RED & GREEN.

I am trying to test this Graph using Robot Framework. I am able to Click on graph and then read the value from popup table.

Only issue is I am clicking randomly. I want to identify the RED and GREEN and then Click it.

After inspecting above element in IE, below information I am getting for above Graph.

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

Please let me know the way how to identify the element in graph.

Preferable option is Robot Framework but ready for any other solution also.

Dinesh Pundkar
  • 4,160
  • 1
  • 23
  • 37

1 Answers1

1

You can get the coordinates of canvas using offsetLeft, offsetTop, width of the canvas. Ex.

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.

After that you can use jquery to click in that area below is the sample link for it. How to simulate a click by using x,y coordinates in JavaScript?.

Hope it helps.

gusaindpk
  • 1,243
  • 2
  • 13
  • 31