White Box Testing
Test your code
   Home      selenium2WebDriver-VisualTest
 

Visual Test Automation

Validate all visual aspects of web UI like manual tester. This is hard to validate CSS and UI issues across browser manually. Sometime minor changes not comparable manually.

 

Solution

• Capture screenshot for pages and flow to validate with help of selenium webdriver

• Make Golden images set to validate against each regression run

• For each test run compare screenshot with help of ImageMagick library

• Based on diff passfail visual test

• Update golden images set if the changes are intended

 

Capture screenshot first time to create baseline for UI page and flow to be tested


// Capture screenshot for baseline image
public void getscreenshotbaseline(String filename) throws Exception
{
String base = this.base + File.separator + filename;
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File(base));
}

 

Capture screenshot while regression for UI page and flow to be tested


// Capture screenshot for file to be compared
public void getscreenshotcompare(String filename) throws Exception
{
String compare = this.compare + File.separator + filename;

File compareFile = new File(compare);
if(compareFile.exists()) {
compareFile.delete();
}

File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, compareFile);
}

 

Compare regression run images with baseline images with help of image magick library. User needs to install image magick library on test machine. Following code assert fail if any diff in regression images from baseline images. If test fails and changes are valid or intended move regression image file to baseline


public void compareimg(String filename) throws Exception
{
String base = this.base + File.separator + filename;
String compare = this.compare + File.separator + filename;
String out = this.out + File.separator + filename;

if(!(new File(base)).exists()) {
Assert.fail("Base file not exist.");
}

if(!(new File(compare)).exists()) {
Assert.fail("Base file not exist.");
}

File outDir = new File(this.out);
if(!outDir.exists()) {
outDir.mkdir();
}

File outFile = new File(out);
if(outFile.exists()) {
outFile.delete();
}

// Compare base with compare and generate output
// Install ImageMagick on machine to comapre images
String cmdline = "/usr/local/bin/compare -fuzz 20% -metric AE -highlight-color blue "
+ base + " " + compare + " " + out;
Process p = Runtime.getRuntime().exec(cmdline);
BufferedReader stdInput = new BufferedReader(new InputStreamReader(p.getInputStream()));
BufferedReader stdError = new BufferedReader(new InputStreamReader(p.getErrorStream()));

String s = null;
// read the output from the command
System.out.println("Here is the standard output of the command:n");
while ((s = stdInput.readLine()) != null) {
System.out.println(s);
}

// read any errors from the attempted command
System.out.println("Here is the standard error of the command (if any):n");
while ((s = stdError.readLine()).length() > 6) {
Assert.fail(s);
}

// If out file exist, means diff. Fail the test
if(outFile.exists()) {
Assert.fail("Visual test failed diff exist at ." + out);
}

}

 



Download example source code Selenium Webdriver Visual Test

 

External References

Imagemagick library