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

【问题标题】：How to write e2e test cases for highcharts-angular如何为 highcharts-angular 编写 e2e 测试用例
【发布时间】：2019-09-23 11:11:43
【问题描述】：

我正在尝试使用量角器为我们的应用程序中使用 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();
}

而spec文件有以下内容：

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 测试。

【问题讨论】：

您能否使用此 PO 从规范文件中添加您的代码。所以我们可以看到全貌和行动顺序。也许这可以很容易地解决 ExpectedConditions 的使用...
完成规范文件
我可以看到您还添加了您收到的错误消息。我的错，我认为这是一个“虚拟定位器”，显然看起来不正确。您能否也提供一个您正在与之交互的html
stackblitz.com/edit/highchart-highstock
@SyamPradeep，你为什么附上getPlottedSeriesNames方法的代码？它似乎无关，在实际测试和其他定位器中没有任何动作，也许我遗漏了一些东西。请更正错误消息，因为您最后有一个拼写错误box>text>tspan)">text>tspan)，所以我们将看到实际的错误。另外，您可以尝试更新getTooltip 方法let tooltip = element(by.css('.highcharts-tooltip-box>text>tspan')); return browser.wait(ExpectedConditions.presenceOf(tooltip)).then(() => { return tooltip.getText(); });

标签： angular highcharts protractor

【解决方案1】：

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

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

所以你将拥有hoverOverASeries

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

同样定位器getTooltip应该是(">"改为"+")

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

附：感谢您提供 github 链接，我创建了一个拉取请求。

【讨论】：