I'm fairly new to protractor so sorry if this is a stupid question. I'm looking into testing an application and need test the values inside a Chart.js graph.

Has anyone got any ideas on how to get my protractor program to look inside the canvas.

This is the canvas output in HTML.

<canvas id="test" 
        class="chart chart-line ng-isolate-scope" 
        data="test.data" 
        labels="test.labels" 
        series="test.series" 
        legend="true" 
        options="test.options" 
        colours="test.colours" 
        width="1816" 
        height="800" 
        style="width: 908px; 
        height: 400px;">
</canvas>

Thanks in advance.

I'm fairly new to protractor so sorry if this is a stupid question. I'm looking into testing an application and need test the values inside a Chart.js graph.

Has anyone got any ideas on how to get my protractor program to look inside the canvas.

This is the canvas output in HTML.

<canvas id="test" 
        class="chart chart-line ng-isolate-scope" 
        data="test.data" 
        labels="test.labels" 
        series="test.series" 
        legend="true" 
        options="test.options" 
        colours="test.colours" 
        width="1816" 
        height="800" 
        style="width: 908px; 
        height: 400px;">
</canvas>

Thanks in advance.

• javascript
• angularjs
• canvas
• protractor
• chart.js

Share Improve this question Follow asked Jan 13, 2016 at 9:47 Evan BurbidgeEvan Burbidge 86799 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I think you may get the underlying chart data, by evaluating in the canvas's context. Example:

var canvas = element(by.css("canvas#test[data]"));
canvas.evaluate("test.data").then(function (data) {
    console.log(data);
});

Protractor can get attributes of the canvas, but it can't access object created within it. But it depends what you're looking to do. Strategies for canvas testing might include image diffs, and string diffs, and often make use of browser.actions for manipulating them.