Visual Testing

Testsigma allows you to check your app's appearance during tests using its Visual Testing feature. You can ensure a great user experience as the UI remains consistent and design changes are spotted early. Visual Testing is turned off by default for test steps, but you can switch it on for specific steps that require visual validation. This guide will show you how to activate Visual Testing in Test Steps and mark Baseline Images in Testsigma.

Prerequisites

Before using Visual Testing, you must understand specific concepts such as creating Projects, Test Cases, Test Steps, utilising Test Step Options, Ad-hoc Run, and Test Case - Advanced Options.

Enable Visual Testing in Test Steps

You can configure the visual testing for a test step on a test case details page or a test step recorder. Here are the steps to do it:

1. Enable visual testing in the test step by clicking the ellipsis button (Test Step Options).
2. Select Enable Visual Testing from the drop-down list that will appear.
3. Click Update Step after enabling Visual Testing for the step.

Bulk Action for Visual Testing Steps

In Testsigma, you can save time and reduce redundant efforts by selecting multiple steps in a test case and simultaneously turning on/off the visual testing settings. Testsigma supports bulk action of steps for this purpose.

1. Select the multiple test steps by clicking on checkboxes to enable Visual Testing.
2. In the menu bar, click on Update Settings. Then, select Enable Visual Testing for the step from the pop-up menu that appears.
3. Click Update after enabling Visual Testing for the steps.
4. Run the Test Case to view the visual difference.

Mark Baseline Image

When you conduct visual testing using Testsigma, you should compare the current image (reference image) with the original image (baseline image) and ensure that the reference image matches the baseline image. You should update the baseline image whenever you apply changes to the UI using the following steps:

1. You have two options to enable visual testing in your test steps: Enable Visual Testing in Test Step or Bulk Action for Visual Testing Steps. Run the test case after enabling it in Test Step.
2. Re-Run the test case to enable visual testing and see any visual differences.
3. After executing a test case for visual testing, the Test Case Result page will display a green camera icon on steps with no visual differences between the reference and baseline images and a red camera icon where there are visual differences.
4. Click on the camera icon to open the Visual Difference overlay screen. Then, go to the top right of the page and check the box Mark as base image as Current Image. This action will update your base image to match your current reference image.

5. In Visual Difference overlay, you can perform the following options:

   • Highlight Differences: Highlight variations in the display.
   • Hide Visual Differences: Conceal any visible disparities.
   • Select region to ignore from visual comparison: Select areas not to compare visually.
   • Merge base image and current image: Combine the original and current images for comparison.

   • Zoom in and Zoom out: Enlarge or reduce the view for closer inspection.

     

6. Next time you run the test case, you will compare the visuals from future runs with the new base image.

Perform Visual Testing in Test Case

1. Follow the steps in the above section to Enable Visual Testing in Test Steps using Test Step Options or Update Settings. Mark the Baseline Image and run the test case to identify visual differences in the UI.
2. Click on Test Case Settings in the right-side navbar and enable the Fail Test Case if Visual Testing Fails toggle to automatically mark a test case as failed if it detects visual differences during execution.

Optimizing Visual Testing with Ignore Sections

Steps to Configure Ignore Sections for Visual Testing

1. Click Ad-hoc Runs in the right navigation bar, then click View Details to open the test case result page.
2. Click the Camera icon to open the Visual Difference overlay screen.
3. Select Select region to ignore from visual comparison and choose the areas you want to exclude from the visual comparison.
4. You can resize or move the ignored area by selecting Resize/Move Ignored Regions and adjusting the selected region on the screen as needed.
5. Review the regions you marked as ignored and click Save.

Benefits of Visual Testing