SeleniumWebDriver如何自动化可视化验证图表和绘图(如折线图，饼图，柱状图)

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”获取下载链接。
下载后解压使用说明如下图：

项目文件

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,265评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,078评论 2赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,852评论 0赞 347
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,408评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,445评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,772评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,921评论 3赞 406
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,688评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,130评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,276评论 4赞 329
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,882评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1赞 265
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2赞 348