如何使用 Protractor 将鼠标悬停在 canvas 元素的某个区域上

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 上。它有一个可选的 offset 参数，您可以使用它来精确控制要悬停的元素区域：

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

如何使用 Protractor 将鼠标悬停在 canvas 元素的某个区域上

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

end-to-end

html5-canvas

protractor