Page 1 of 1

Ranorex Imaging Class To Perform Visual Regression Checks

Posted: Sat Feb 24, 2018 8:42 am
by saravanan_palanivel
Hi Team,

We are using Ranorex 7.2, and we are trying to implement image comparison to perform visual regression for our localizaion testing. As part of this, we've written following snippet using Ranorex's Imaging class (refer below code). its good and we can able to compare 2 images and report out result as boolean

But the expectations here are,
1. Ranorex should be creating difference of 2 images as Bitmap output
2. Ranorex should be able to ignore unintended regions in the given images, like date & time, usernames etc.

Could you please share any workaround to get ride off above bottlenecks ? It would be really great and useful as we need to perform visual checks for more than 25 languages for the same product (and its really time consuming manual task though) :wink:
Bitmap baseline = Imaging.Load(ImagesPath_Baseline + @"\" + TestName + @"\" + Path.GetFileName(image));
Bitmap actual = Imaging.Load(image);

// Compare Screenshots
if (Imaging.Compare(baseline, actual, 1.00))
{
	Report.Success("Image Matched With Baseline : " + Path.GetFileName(image));
	Total_MatchesFound++;
}
else
{
	TestContext.WriteLine("--------------------------------------------------------------------------------");
	Report.Warn("Image Mismatch Found! : " + Path.GetFileName(image));
	Report.LogData(ReportLevel.Info, "Expected Image : ", baseline);
	Report.LogData(ReportLevel.Info, "Actual Image : ", actual);
	Total_MismatchesFound++;
	TestContext.WriteLine("--------------------------------------------------------------------------------");
}
Thanks,
Saravanan

Re: Ranorex Imaging Class To Perform Visual Regression Checks

Posted: Tue Feb 27, 2018 1:20 pm
by McTurtle
Hello Saravanan,

I also think that there is no method in Ranorex that would return you a bitmap with the differences. I wrote some code for this some time ago. Back then I had the problem that the Ranorex image comparison would fail but even when looking hard I would not be able to see a difference. The code would simply color the differences all green and also tell you the % of pixels that are different. Maybe you can modify this and use it:
public void Compare_Images()
		{
			Bitmap Image_Success=new Bitmap("ImageOne.png");
			Bitmap Image_Failed=new Bitmap("ImageTwo.png");
			
			Imaging.FindOptions options_preliminary=new Imaging.FindOptions();
			options_preliminary.Similarity=0.9;
			
			Imaging.Match image_match=Imaging.FindSingle(Image_Success,Image_Failed, options_preliminary);
			Report.Info(image_match.Similarity.ToString());
			
			Bitmap Image_comparison=new Bitmap(Image_Success.Width,Image_Success.Height);
			int nr_different_pixels=0;
			
			if(Image_Success.Height==Image_Failed.Height && Image_Success.Width==Image_Failed.Width)
			{
				Report.Info("Images are same size.");
				
				for(int i=0; i<Image_Success.Height;i++)
				{
					for(int j=0; j<Image_Success.Width;j++)
					{
						if(Image_Success.GetPixel(j,i)==Image_Failed.GetPixel(j,i))
						{
							Image_comparison.SetPixel(j,i,Image_Success.GetPixel(j,i));
						}
						else
						{
							nr_different_pixels++;
							Image_comparison.SetPixel(j,i,Color.Green);
						}
					}
					
				}
				
			}
			else
			{
				Report.Failure("Images are not same size.");
			}
			int size=(Image_Success.Width * Image_Success.Height);
			float procent=((float)(nr_different_pixels) / (float)size) * 100;
			Report.LogData(ReportLevel.Info,"",Image_comparison);
			Report.Info("Total number of pixels: " + (Image_Success.Width*Image_Success.Height).ToString());
			Report.Info("Total number of different pixels: " + nr_different_pixels);
			Report.Info("In %: " + procent.ToString()+ " %");
		}
As for the ignored regions, you should be able to work with the "client rectangle" property of the child elements that you would like to ignore and get the pixel coordinates of the area where they are located in respect to the parent. You can then create a method that would paint the area of the screenshot of the parent white in the provided image and in the screenshot of the element. Does this help?

Regards,
McTurtle

Re: Ranorex Imaging Class To Perform Visual Regression Checks

Posted: Thu Mar 01, 2018 5:55 am
by saravanan_palanivel
Thanks so much McTurtle! i found GraphicsMagick image processing system to provide the comparison output as bitmap image with differences highlighted in color (pink or blue), rather than just boolean.

But still i am working on to find out solution for ignoring dynamic regions from image comparison.


Thanks,
Saravanan

Re: Ranorex Imaging Class To Perform Visual Regression Checks

Posted: Mon Mar 05, 2018 3:07 pm
by McTurtle
Hello Saravanan,

I guess the tricky part is the transformation of the pixel-coordinates when the element that you would like to ignore is not a direct child of the element that you want to compare the screenshots of? Did you manage to write a method for that? If so, it would be quite cool if you could share that.

Regards,
McTurtle