Chart
文章首发于微信公众号【软测小生】
前言：
图表(Chart)的自动验证是测试自动化的最大挑战之一， 而在我们的应用程序中，我们有大量的图表，接下来将展示我是如何自动化Chart，或许给你一些新的想法。
Ocular
我将使用Ocular-图像验证库! 事实上，我创建这个Ocular 库就是为了这个目的。
示例应用：
为了更好地解释，我将创建两个简单的HTML文件，如下所示(我从这个站点获取HTML) &每个HTML文件包含3个图表。
在这里插入图片描述
这里我们假设右边的图表和左边的完全一样。除了收入图表的1月份数据不一样之外，右边的图表几乎是一样的。
我的期望是——作为自动化测试的一部分，应该报告这种差异，测试应该失败!
HTML源代码看起来是这样的：
HTML源码
现在是时候为上面的HTML文件设计Page对象了：
Page Object:
package com.chart.demo;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.HashMap;
import java.util.Map;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.FindBy;
import org.openqa.selenium.support.PageFactory;
import com.testautomationguru.ocular.Ocular;
import com.testautomationguru.ocular.comparator.OcularResult;
public class SampleChartPage {
private WebDriver driver;
private Map<String, String> map;
@FindBy(id = "buyers")
private WebElement buyersChart;
@FindBy(id = "countries")
private WebElement countriesChart;
@FindBy(id = "income") WebElement incomeChart;
// private WebElement incomeChart;
public SampleChartPage(WebDriver driver) {
this.driver = driver;
PageFactory.initElements(driver, this);
// 页面对象应该包含准图像的路径
// 这些图像不需要存在
// Ocular如果没有找到，会创建这些图像
map = new HashMap<String, String>();
map.put("buyers", "buyers.png");
map.put("countries", "countries.png");
map.put("income", "income.png");
}
public boolean verifyBuyersChart() {
return this.verifyChart(map.get("buyers"), buyersChart);
}
public boolean verifyCountriesChart() {
return this.verifyChart(map.get("countries"), countriesChart);
}
public boolean verifyIncomeChart() {
return this.verifyChart(map.get("income"), incomeChart);
}
// 常用的方法来比较基准图像与实际的某个页面/特定元素
private boolean verifyChart(String fileName, WebElement element) {
//Path path = Paths.get(fileName); //只为这个方法实用--baselineTest()
Path path = Paths.get(fileName).toAbsolutePath();//为这两个方法使用visaul_test_without_any_change()和visaul_test_after_change()
System.out.println(path);
OcularResult result = Ocular.snapshot().from(path) //(1)
.sample().using(driver).element(element) //(2)
.compare(); //(3)
int similarity = result.getSimilarity();
System.out.println("similarity="+similarity);
return result.isEqualsImages();
}
}
我假设以上page对象是不言自明的。我在项目中创建了这样的文件夹。
- snap文件夹应该包含所有的基准图像
-
result将包含比较结果
文件夹
最初这些文件夹可以是空的。因为我们不会有那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文件夹将包含我们需要的所有图像!
image
package com.chart.demo;
import java.nio.file.Paths;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.BeforeSuite;
import org.testng.annotations.Test;
import com.testautomationguru.ocular.Ocular;
public class OcularDemo {
private WebDriver driver;
private SampleChartPage page;
@BeforeSuite
public void ocularConfig() {
//更新Ocular配置
// 设置基准图像的路径——这个文件夹应该存在
// 设置比较后返回结果的路径 - 这个文件夹应该存在
Ocular.config()
.snapshotPath(Paths.get(".", "resources/snap"))
.resultPath(Paths.get(".", "resources/result"));
}
@BeforeMethod
public void beforeMethod() {
driver = new ChromeDriver();
driver.manage().window().maximize();
}
@AfterMethod
public void afterMethod() {
driver.quit();
}
// 在这个测试的时候，snap文件是空的. ocular没有发现任何基准图像.
// 所以Ocular创建了基准图像并且对比结果总是返回True
@Test
public void baselineTest() throws InterruptedException {
driver.get("file:///" + Paths.get("Chart.jsdemo0.html").toAbsolutePath());
Thread.sleep(5000);
page = new SampleChartPage(driver);
Assert.assertTrue(page.verifyBuyersChart());
Assert.assertTrue(page.verifyCountriesChart());
Assert.assertTrue(page.verifyIncomeChart());
}
// 在这个测试中,snap文件包含了基准图像.
// 所以Ocular对比了实际元素获取的图像并返回结果
@Test/*(dependsOnMethods = "baselineTest")*/
public void visaul_test_without_any_change() throws InterruptedException {
driver.get("file:///" + Paths.get("Chart.jsdemo0.html").toAbsolutePath());
page = new SampleChartPage(driver);
Assert.assertTrue(page.verifyBuyersChart());
Assert.assertTrue(page.verifyCountriesChart());
Assert.assertTrue(page.verifyIncomeChart());
}
// snap文件夹下已经包含了基准图像.
// 所以Ocular对比了实际元素获取的图像并返回结果
// income图标的数据改变了 -所以他将失败
@Test/*(dependsOnMethods = "visaul_test_without_any_change")*/
public void visaul_test_after_change() throws InterruptedException {
driver.get("file:///" + Paths.get("Chart.jsdemo1.html").toAbsolutePath());
Thread.sleep(5000);
page = new SampleChartPage(driver);
Assert.assertTrue(page.verifyBuyersChart());
Assert.assertTrue(page.verifyCountriesChart());
Assert.assertTrue(page.verifyIncomeChart()); //这里将会失败，因为数据改变了
}
}
对于失败的测试用例，差异被高亮显示，如下所示!!
失败的测试用例可视化
总结：
大多数自动化套件通过读取图表数据来进行比较，如果数据与预期相符，则很难对图表进行实际验证。但是，再看我们上面的例子，通过Ocular来验证图表不再是一个大的挑战! 如果我们通过基准图像位置和元素，Ocular比较高亮出差异是很容易的。
这只是局部，希望能够帮到你，更多内容请查看Ocular的源码。
Maven依赖
其中用到的Maven依赖如下：
<!-- https://mvnrepository.com/artifact/com.testautomationguru.ocular/ocular -->
<dependency>
<groupId>com.testautomationguru.ocular</groupId>
<artifactId>ocular</artifactId>
<version>1.0.0.Alpha</version>
</dependency>
Demo HTML网页获取
其中该Demo所用到的HTML网页，可以到CSDN下载，但是有点恶心要积分；
也可关注微信公众号软测小生回复“ChartDemo”获取下载链接。
下载后解压使用说明如下图：
项目文件
网友评论