如何使用Protractor

Question

我有一个像这样的圆图：

如果将鼠标悬停在不同的颜色上，颜色和文字会发生变化，如下所示：

图表是使用JavaScript构建的。它由一个填充了数据的<canvas>元素组成。

现在我想用Protractor为它编写一个端到端的测试。有没有办法做到这一点？

这是<canvas>元素的代码，如页面所示：

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

我现在拥有的端到端测试代码：

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

Answer 1

您可以使用mouseMove browser action悬停元素。它有一个可选的偏移参数，您可以使用该参数精确控制要悬停的元素的哪个区域：

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