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

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();
    }
}

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());  //这里将会失败，因为数据改变了
    }
}

<!-- https://mvnrepository.com/artifact/com.testautomationguru.ocular/ocular -->
<dependency>
    <groupId>com.testautomationguru.ocular</groupId>
    <artifactId>ocular</artifactId>
    <version>1.0.0.Alpha</version>
</dependency>