Test a Chart.js canvas with Protractor

问题:

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.

回答1:

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.

回答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);
});