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

2 Answers 2

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.