Visual Testing
Last updated
Last updated
Visual Testing involves comparing the actual visual output of an application with expected visual representations. This comparison is usually done by capturing screenshots or images of the application's user interface during test executions and then comparing these images with baseline images from previous test runs.
Visual Testing is not applicable to Test Scripts that are parameterized or have been modified after the creation of the Baseline Script Report.
Additionally, Visual Testing is not supported for Suite Runs.
To initiate the process of Visual Testing, it is imperative to begin by creating a baseline script for which visual testing is to be conducted.
Creation of Baseline Script :
Choose the specific Test Script for which you intend to initiate the Visual Testing within the Sprints/ Test Lab by performing the Execute Test by clicking on Execute button as Visual Testing will not be performed using Dry Runs.
Upon selecting the Execute Test button, you will be redirected to the run window. Here, users are prompted to click on the Select Browser option, enabling them to choose one of the browsers. Additionally, users can configure the screen Resolution and opt for a specific Environment in which the baseline script is intended to be executed and click on Run Test button.
On clicking that you will be redirected to the reports page of the Test Lab/Sprints in the Executions tab you can see the status of the currently executing script once it gets passed that becomes your Baseline script against which Visual Testing can be performed.
After the creation of the Baseline Script, return to the Test Lab/Sprint section select the script for which the baseline was established and proceed to initiate the test execution by clicking on the Execute Test on the Execute button which redirects to run window there click on Visual Testing and enable the toggle for Visual Testing and by default it will be selected, select the Same Browser, Set the same Resolution which was set during the creation of Baseline Script else you can't trigger the Visual Testing as it involves in comparing current execution with previous execution and you can see the message displayed on run window as there is no previous executions available to compare.
In the scenario where, if both browsers are selected for Visual Testing, the system will prompt to choose one of the browsers for the Visual Testing procedure. Consequently, Visual Testing will be carried out in the selected browser, while in the other browser, the execution will proceed as a conventional, non-Visual Testing.
Once the Resolution and Browser are set to the same as selected with Baseline script you can select the Baseline script and click on Run Test button.
It will direct to the Test Lab/ Sprints Executions tab where you can see the current status of the Test Script currently being executed as Visual Testing against Baseline script where you can easily identify on the reports page as it is differentiated with Eye icon on the report page.
Once the Test Script gets Passed click on the arrow icon on the right side of the Test Script which directs to the detailed report of Visual Testing.
Navigate to the Visual Testing tab to access a comparison between the Present Execution and Previous Executions through the use of Screenshots.
In this comparison, steps that have undergone changes in the current execution are visually indicated with Red Boundary boxes, while steps that have remained unchanged retain their Original appearance. Notably, Steps numbered 1, 6, 7, and 9 exhibit red boundary boxes, denoting changes in Visual Testing when compared with the Baseline script. Conversely, steps numbered 2, 3, 4, 5, and 8 do not display red boundary boxes, signifying the absence of alterations in Visual Testing as compared to the Baseline script.
To see the changes in current executions click on the Screenshot with red boundry box where you can see the comparision of Previous Executions with Current Executions
Clicking on the Eye icon in the current executions section we can see the changes in the current execution which is marked in Red color.
When there are no changes detected it will be shown as No Changes Detected in the current execution section.
In Visual Testing, Assertions are used to specify what elements or visual attributes of a web page or application should be checked or verified during the testing process and it applicable only for Current Executions.
In the execution window user can select any of the assertions and click on the run test button and in the reports page user is provided with the options of Assertions under which you can select any of the assertions and click on the Screenshots to see the Assertions.
There are three types of Assertions
DarkMode - When the test script is executed in the Dark Mode the elements which is present on the screen will be highlighted in Yellow color
User is provided with option of Submit Changes button if they wishes to delete all the Assertions.
Overlapping - When the Test Script is executed by selecting the Overlapping Elements the elements which is overlapped in the screen will be highlighted in Blue color.
Contrast - When the test script is executed by selecting the Contrast if there are any differrnces in the brightness of the screen that will be highlighted.
