Protractor - Get array from canvas attribute in Angular2 using ng2-charts/Chart.js

Question

I'm using ng2-charts which is based on chart.js Using it in my Angular 2 Application I want to check some data with my protractor test in one of the attributes of the <canvas> element.

I can't find a way to access the data. I found solutions with evaluate but I'm not sure if that's for Angular1 or 2.

Following solution with evaluate did not work for me: Test a Chart.js canvas with Protractor

My canvas setup:

  <div style="display: block">
    <canvas id="test" 
            [datasets]="chartData"
            [labels]="chartLabels"
            [options]="ChartOptions"
            [legend]="showRegions"
            [chartType]="barChartType" 
            height="100%"></canvas>
  </div>

When the page is loaded the canvas element looks like this (I removed the label attributes for convinience).

<canvas id="test" ng-reflect-datasets="[object Object],[object Object]" ng-reflect-chart-type="bar" ng-reflect-legend="true"></canvas>

Now I find my canvas element like this:

var canvas = element(by.css("canvas#test[ng-reflect-datasets]"));

And from here I'm stuck. If I access the ng-reflect-datasets attribute I only get the string "[object Object]..." but I need the values inside these objects.

Is this somehow possible?

jordanwillis jordanwillis · Accepted Answer · 2017-03-31T21:16:56

Did you try it like this...

var canvas = element(by.css("canvas#test[datasets]"));
canvas.evaluate("chartData").then(function (datasets) {
    // datasets is an array of objects that each have data, label, etc.
    console.dir(datasets[0].data);
});

Note, I just derived this from the SO answer in your question + my knowledge of ng2-charts (I have not used Protractor before).

Protractor - Get array from canvas attribute in Angular2 using ng2-charts/Chart.js

1 Answers