How to hover over an area of a canvas element with Protractor

Question

I have a circle diagramme like this one:

And if you hover over the different colours, the color and text changes, like so:

The diagramme is built with JavaScript. It consists of a <canvas> element that is being populated with data.

Now I want to write an end-to-end test for it using Protractor. Is there a way to do this?

This is the code of the <canvas> element, as is on page:

<canvas width="183" height="183" style="width: 183px; height: 183px;"></canvas>

And the code of the end-to-end test that I have right now:

it("should show a circle diagram with 33% activity", function() {
    expect(Backoffice.doughnutChart.isDisplayed()).toBeTruthy();
    expect(Backoffice.doughnutChartText.getText()).toContain("33%");
});

Answer 1

You can hover the element with mouseMove browser action. It has an optional offset parameter that you can use to precisely control what area of the element to hover:

browser.actions()
    .mouseMove(Backoffice.doughnutChart, {x: 100, y: 100})
    .perform();