51Testing软件测试论坛

标题: SeleniumWebDriver如何自动化可视化验证图表和绘图(如折线图，饼图，柱状图) [打印本页]

作者: lsekfe 时间: 2020-9-1 11:19
标题: SeleniumWebDriver如何自动化可视化验证图表和绘图(如折线图，饼图，柱状图)
前言：
图表(Chart)的自动验证是测试自动化的最大挑战之一，而在我们的应用程序中，我们有大量的图表，接下来将展示我是如何自动化Chart，或许给你一些新的想法。
Ocular我将使用Ocular-图像验证库! 事实上，我创建这个Ocular 库就是为了这个目的。
示例应用：
为了更好地解释，我将创建两个简单的HTML文件，如下所示(我从这个站点获取HTML) &每个HTML文件包含3个图表。[attach]129489[/attach]
[attach]129490[/attach]
这里我们假设右边的图表和左边的完全一样。除了收入图表的1月份数据不一样之外，右边的图表几乎是一样的。
我的期望是——作为自动化测试的一部分，应该报告这种差异，测试应该失败!
HTML源代码看起来是这样的：
[attach]129492[/attach]

现在是时候为上面的HTML文件设计Page对象了：

Page Object:
[attach]129493[/attach]
[attach]129495[/attach]

我假设以上page对象是不言自明的。我在项目中创建了这样的文件夹。

snap文件夹应该包含所有的基准图像
result将包含比较结果

[attach]129496[/attach]

最初这些文件夹可以是空的。因为我们不会有那3个图表网页元素的图像（在第一次运行时，Ocular将在snap文件夹下创建这些图像）。
接下来我们开始创建测试用例：

TestNG Test:在这个testNG测试集中，我有3个测试：

baseline_test——此测试的目的是首先生成基准图像，当您第一次运行测试时，Ocular将创建基准图像。这样，您就可以将它用于后续的任何验证。这个测试总会PASS。
visual_test_without_any_change ——这里，我将调用相同的HTML文件。因此，Ocular会将图表与之前测试方法(baseline_test)中创建的基准图像进行比较。这个测试将PASS，因为使用相同的数据启动了相同的HTML，所以图表将与预期一样。
visual_test_after_change ——在这个测试中，我将启动另一个HTML，其中收入(income)图表数据略有变化。因此，Ocular将验证和报告图片的差异。
一旦我运行baseline_test方法, snap文件夹将包含我们需要的所有图像!

[attach]129497[/attach]
[attach]129498[/attach]
[attach]129499[/attach]
[attach]129500[/attach]
对于失败的测试用例，差异被高亮显示，如下所示!!
[attach]129501[/attach]
总结：
大多数自动化套件通过读取图表数据来进行比较，如果数据与预期相符，则很难对图表进行实际验证。但是，再看我们上面的例子，通过Ocular来验证图表不再是一个大的挑战! 如果我们通过基准图像位置和元素，Ocular比较高亮出差异是很容易的。
这只是局部，希望能够帮到你，更多内容请查看Ocular的源码。
Maven依赖其中用到的Maven依赖如下：

<dependency>
<groupId>com.testautomationguru.ocular</groupId>
<artifactId>ocular</artifactId>
<version>1.0.0.Alpha</version>
</dependency>

复制代码

Demo HTML网页获取

其中该Demo所用到的HTML网页，可以到CSDN下载
下载后解压使用说明如下图：

[attach]129502[/attach]

作者：软测小生
链接：https://www.jianshu.com/p/2f764b8ef269
来源：简书

作者: Miss_love 时间: 2020-12-30 14:42
支持分享

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)