如何将 Selenium 与“chart.js”一起使用答案

【问题标题】：How to use Selenium with "chart.js"如何将 Selenium 与“chart.js”一起使用
【发布时间】：2017-01-26 16:13:52
【问题描述】：

有人要求我使用 Selenium 为网站编写一些测试。其中一些页面上有由“chart.js”库生成的图表。测试要求我：

读取图表中部分数据值的大小
点击图表上的某些条形。
将鼠标悬停在某些栏上并验证工具提示

问题是图表被实现为单个 HTML canvas 元素，因此 selenium 可以操作的图表细节没有 DOM。

【问题讨论】：

标签： selenium testing automated-tests integration-testing chart.js

【解决方案1】：

正如您所指出的，由于没有 DOM，您将无法直接使用 Selenium 访问图表。可能有一种方法可以使用 JavascriptExecutor 来访问图表数据以运行 JS 命令。我不熟悉 chart.js，但我已经针对 CANVAS 元素编写了自动化。我与开发人员交谈并与他们讨论了我需要访问的内容，他们给了我有关方法等的指针，我可以调用这些指针来获得我需要的东西。我使用页面对象模型，所以我最终编写了一些 Java 函数，这些函数包裹着访问 CANVAS 的 JS 代码。

【讨论】：

我认为这可能是唯一的出路。在 chart.js 的情况下，我什至不确定是否可以测试悬停文本和单击，因为该库似乎没有任何方式告诉我们在何处单击/悬停特定数据元素。我觉得奇怪的是图书馆会使其自身无法测试！