Screenshot Tests (Visual Testing)
- 3 minutes to read
EasyTest supports screenshot testing for all XAF platforms (ASP.NET Core Blazor, Windows Forms, ASP.NET Web Forms). This topic explains how to run screenshot tests.
Add a Visual Test
The steps below show how to add a visual test for the login form.
In your test project, create a Screenshots folder, and add an expected image ({BlazorAppName}_Login.png) and a mask image ({BlazorAppName}_Login_Mask.png). In the properties window, set the Build Action property for these images to Embedded resource.
Add the following code to get an image from the embedded resources:
using System.Reflection; // ... private static Image LoadImageFromResource(string searchPattern) { var assembly = Assembly.GetExecutingAssembly(); var resourceName = assembly.GetManifestResourceNames().FirstOrDefault(x => x.Contains(searchPattern)); using var stream = assembly.GetManifestResourceStream(resourceName); if(stream is not null) { return Image.FromStream(stream); } return null; }
The following method saves an image to a file:
using System.Drawing.Imaging; using System.IO; // ... private static void SaveImage(Image image, string folder, string fileName, string postfix) { if(!Directory.Exists(folder)) { Directory.CreateDirectory(folder); } string fileNameWithoutExtension = Path.Combine(folder, Path.GetFileNameWithoutExtension(fileName)); string actualFileName = string.Format("{0}.{1}{2}", fileNameWithoutExtension, postfix, Path.GetExtension(fileName)); image.Save(actualFileName, ImageFormat.Png); }
Add test code:
const string BlazorAppName = "MyAppNameBlazor"; // ... [Fact] public void ScreenshotTest() { var outputDirectory = Environment.CurrentDirectory; IApplicationContext appContext = FixtureContext.CreateApplicationContext(BlazorAppName); appContext.RunApplication(); string expectedImageName = $"{BlazorAppName}_Login.png"; string maskImageName = $"{BlazorAppName}_Login_Mask.png"; Image expectedImage = LoadImageFromResource(expectedImageName); Image maskImage = LoadImageFromResource(maskImageName); // Call the SetActiveWindowsSize method to ensure the actual // and the expected image have the same dimensions. appContext.GetScreen().SetActiveWindowSize(new Size(1024, 768)); // Get the actual screenshot. Image screenshot = appContext.GetScreen().GetScreenshot(); // Compare the expected image with the actual image. bool equality = appContext.GetScreen().ImagesEqual(screenshot, expectedImage, maskImage); // If the images are not equal, save the actual image and a diff image. if(!equality) { Image diffs = appContext.GetScreen().GetImagesDifferences(screenshot, expectedImage, maskImage); SaveImage(screenshot, outputDirectory, expectedImageName, "Actual"); SaveImage(diffs, outputDirectory, expectedImageName, "Diff"); } Assert.True(equality); }
Image Types
- Expected image
The screenshot test compares an actual screenshot with an expected image. The expected image captures the application’s visual state you need to achieve during the test.
- Mask image
Use a mask image to ignore a particular area on the screenshot (for example, a text input with a blinking cursor). Mask images are of the same size as their corresponding expected images. A mask image has a white background; ignored areas are painted in black.
- Diff image
A diff image shows the difference between expected and actual images. The different areas are painted red.
- Actual image (Screenshot)
- An application screenshot captured during testing. If the actual image is the same as the expected image, the test passed.