Selenium網頁自動化測試的圖形比對

 Selenium網頁自動化測試的圖形比對

這篇文章主要說明如何進行兩張圖形比對。

主要用在當畫面比較複雜時，網頁元件的驗證與比對相對複雜，

如果每次執行整個畫面都有預期一定的結果時，就可以直接擷取畫面，

用圖形比對的方式驗證。最後也舉一個完整的程式範例說明。

 測試情境

1. 這裡用 google 為例

2. 瀏覽Google 網頁，將網頁的呈現結果螢幕畫面擷取下來。

3. 將該擷取畫面的圖檔與之前準備好的圖檔比較。看看兩個畫面擷取的圖檔是否相同

程式說明

這個程式主要用到幾個小技巧

• 畫面擷取：Selenium內建這個功能可以幫助擷取螢幕畫面 getScreenshotAs

File screenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(screenshotFile, new File(scrFile));

• 圖形比對：CompareUtil.CompareImage

圖形比對的部分，這裡運用到其他的比對工具。另外，其實也可以直接將該檔案取 MD5，直接比對 MD5也是另一個比較簡單的做法

程式範例

[pastacode lang=”java” message=”Selenium Image Comparison” highlight=”” provider=”manual”]

package mySelenium;

import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.*;
import org.apache.commons.io.FileUtils;
import org.junit.*;
import static org.junit.Assert.*;
import java.io.File;

public class ImgCompareTest {
	
	public WebDriver driver;
		
	@Before
	public void setUp() throws Exception { 
		driver = new FirefoxDriver();
	}

	@Test
	public void imgCompare() throws Exception {
	
		String scrFile = "c:\\Google_screenshot.png";
		String baseScrFile = "c:\\baseScreenshot.png";
		
		//Open the BMI Calculator Page and get a Screen Shot of Page into a File
		driver.get("http://www.google.com");
		File screenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
		FileUtils.copyFile(screenshotFile, new File(scrFile));
		
		//Verify baseline image with actual image
		// Here we will need "CompareUtil" class. If you need the class, leave a message.
		assertEquals(CompareUtil.Result.Matched, CompareUtil.CompareImage(baseScrFile,scrFile));
		
	}
	
	@After
	public void tearDown() throws Exception {
		//Close the browser
		driver.quit();
		
		
	}
}

[/pastacode]

(程式範例參考來源Syed Sayem大師)