Visual Regression Testing Tools

Overview:

Visual testing is a quality assurance method that involves verifying the appearance, layout, and design of an application or website to ensure its visual elements function correctly across different devices, browsers, and resolutions. It focuses on detecting discrepancies between expected and actual visual representations, ensuring a consistent and error-free user interface.

Integration:

To integrate the visual testing on your local appium or selenium code execution, we need to integrate the following line of code:

// Java Syntax
Add this at the start of your testcase
((JavascriptExecutor) driver).executeScript("tg:logs", ImmutableMap.of("testcaseName", "SampleTestCase"));


Add this after each step
((JavascriptExecutor) driver).executeScript("tg:logs", ImmutableMap.of("testStepName", "Step Description"));

Pass or Fail 
((JavascriptExecutor) driver).executeScript("tg:action", "{\"status\": \"passed\", \"case\": \"Reason for the testcase!\"}"); 

// OR 
((JavascriptExecutor) driver).executeScript("tg:action", "{\"status\": \"failed\", \"case\": \"Reason for the testcase!\"}");

After adding the above line, you can execute your code. This first execution will serve as a baseline for the comparison of images of the next test cases.

From the second test execution onwards, you will be able to see the visual testing results.

To see the execution results, you have to navigate to Automation Sessions.

Select the device on which you have executed the test cases:

You will see a list of timestamps for the executed test cases. Click on the last timestamp of the test that you have executed.

Click on visual testing on the local execution dashboard, and you will see the message saying detected capabilities for visual testing.

Run the same test case with the same steps once again to see the visual testing results. While the test case is running, you will see the following screen:.

Once the execution is finished, you will see the list of test steps with the generated status for a few seconds.

Once the result is generated, you can see the results of the screenshot comparison for each step.

You can click on the Compare button to see the visual difference between 2 screenshots. The difference will be marked by a red rectangle.

You can click on the Update Baseline button if you would like to set the recent image as the baseline for the next test case execution.

You can set the whole testcase session as baseline for comparison for the next testcase execution by clicking on the “Set session as baseline” button.

To ignore region of baseline vs result image:

Click on the Compare button in the action section to edit the changes in the latest report.

Select the Ignore region option if you wanted to ignore by selecting the portion in the selected image.

Click on Save for saving the changes after selecting the region you wanted to ignore.

 After saving a Success dialogue box will appear.

Compare another step with the baseline by clicking on it.

Select the Selective region option in drop down, you can specifically add/ignore the portion of the image. Color can be ignored by selecting the checkbox. 

After saving a Success dialogue box will appear.

Failed Status will be updated into Success after making changes in the existing report.