如何为highcharts编写e2e测试用例-angular

Question

我正在尝试使用量角器为我们的应用程序中使用 highcharts-angular 构建的图表编写端到端测试用例。我正在查询图表中绘制的系列以及鼠标悬停时系列中某个点的工具提示值。这些定位器如下所示

getPlottedSeriesNames() {
    return element.all(by.css('.highcharts-legend-item>text>tspan')).getText();
}

hoverOverASeries() {
    return  browser.actions().mouseMove(element(by.css('.highcharts-series-1>.highcharts-point'))).perform();
}

getTooltip() {
    return  element(by.css('.highcharts-tooltip-box>text>tspan')).getText();
}

规格文件包含以下内容：

it('should have the all the series plotted in the chart', async () => {
    const desiredCount = 4;
    const plottedSeries = await occurrenceChart.getPlottedSeriesNames();
    expect(plottedSeries.length).toEqual(desiredCount);
});

it('should have desired tooltip properties', async () => {
    await occurrenceChart.hoverOverASeries();
    const tooltip = await occurrenceChart.getTooltip();// just trying to log the data of tooltip
    console.log('tooltip', tooltip);
});

我能够在图表中获得绘制的系列，但是在鼠标悬停时获得工具提示没有按预期工作（可能是我做错了）并且我遇到了以下错误。

Failed: No element found using locator: By(css selector, .highcharts-tooltip-box&gt;text&gt;tspan)"><![CDATA[NoSuchElementError: No element found using locator: By(css selector, .highcharts-tooltip-box>text>tspan)

鼠标悬停操作无效，因此工具提示不可用。

在 angular 应用程序中是否有更好的方法来为 highcharts 编写 e2e 测试。

Answer 1

您需要 mouseMove 两次才能弹出工具提示。

我不知道为什么会出现这种情况，但您可以在屏幕截图上看到，mouseMove 您有粗体边框，但工具提示没有出现

所以你将在 hoverOverASeries

return browser.actions().mouseMove(webElement).mouseMove(webElement).perform();

定位符 getTooltip 也应为（“>”更改为“+”）

return element(by.css('.highcharts-tooltip-box+text>tspan')).getText();

P.S。感谢您的 github link，我创建了一个拉取请求。

如何为highcharts编写e2e测试用例-angular

How to write e2e test cases for highcharts-angular

highcharts

protractor

angular