Question

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

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);
});

我能够在图中获得绘制的序列，但是获取关于mouser悬停的工具提示无法按预期工作（可能是我做错了方法），并且遇到了以下错误。

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)

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

在角度应用中是否有更好的方法编写高图表的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链接，我创建了请求请求。

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

1 个答案: