我希望能够在Chrome DOM检查器中使用Protractor来定位highcharts工具提示,但我需要能够捕获收费提示的类名才能做到这一点。
当数据序列中的一个点在Highcharts图表中悬停时,会显示一个工具提示,如下所示:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/
我正在使用一个共享的工具提示:
tooltip: {
shared: true,
},
但是,使用检查器的"Force元素状态:悬停"不起作用。我甚至看不到工具提示在检查器中显示为DOM元素?
如何在Chrome DOM检查器中检查Highcharts工具提示?
要在Chrome DOM检查器中检查Highcharts工具提示,需要保持工具提示可见。您可以通过包装隐藏方法来实现:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});
演示:https://jsfiddle.net/BlackLabel/mke7Lh3b/
现在,您可以很容易地找到工具提示class,它是(针对第一个系列中的要点(:
highcharts-label highcharts-tooltip highcharts-color-0
highcharts-color-0
这部分是动态添加的。该数字取决于默认Highcharts颜色阵列系列中指定的颜色。
API:https://api.highcharts.com/highcharts/colors
另一种选择是在开发检查器中使用ctrl+F。在你的工具中使用特定术语后,直到按下回车键,你会发现它很容易